Implemented UserPage

front/src/App.css

@@ -1,16 +1,9 @@
-body {
+:root {
-  height: 100vh;
+  --bs-body-bg: rgb(17, 17, 17) !important;
-  overflow: hidden;
-  color: white;
-  font-family: sans-serif;
-}
-
-.modal-content, .modal-content .form-select {
-  background-color: rgb(17, 17, 17) !important;
 }
 
 /* В связи со сложившейся политической обстановкой */
 .leaflet-attribution-flag {
   position: absolute;
   right: -100px;
-}
+}

front/src/assets/backArrow.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="rgb(185, 179, 170)" width="24" height="24" class="bi bi-arrow-left" viewBox="0 0 16 16">
+    <path fill-rule="evenodd"
+        d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
+</svg>

front/src/assets/rightAngle.svg

@@ -0,0 +1,4 @@
+<svg fill="rgb(185, 179, 170)" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
+    <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+    <path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z"/>
+</svg>

front/src/assets/userCategories.ts

@@ -0,0 +1,45 @@
+import { Announcement } from '../api/announcement/types'
+import { FiltersType } from '../utils/filters'
+
+const userCategories = ['givingOut', 'booked', 'history'] as const
+
+type UserCategory = typeof userCategories[number]
+
+const UserCategoriesNames: Record<UserCategory, string> = {
+    givingOut: 'Раздача',
+    booked: 'Бронь',
+    history: 'История',
+}
+
+const userCategoriesInfos: Record<UserCategory, (ann: Announcement) => string> = {
+    givingOut: (ann: Announcement) => (
+        `Годен до ${new Date(ann.bestBy).toLocaleDateString('ru')}`
+    ),
+    booked: (ann: Announcement) => (
+        `Бронь ещё ${(ann as Announcement & { bookedBy: number[] }).bookedBy.length} чел.`
+    ),
+    history: (ann: Announcement) => (
+        `Забрал ${new Date((ann as Announcement & { taken: number }).taken).toLocaleDateString('ru')}`
+    ),
+}
+
+const composeUserCategoriesFilters: Record<UserCategory, () => FiltersType> = {
+    givingOut: () => {
+        const userId = -1
+
+        return ({ userId })
+    },
+    booked: () => {
+        const userId = -1
+
+        return ({ bookedBy: userId })
+    },
+    history: () => {
+        const userId = -1
+
+        return ({ userId, status: 'taken' })
+    }
+}
+
+export type { UserCategory }
+export { userCategories, UserCategoriesNames, userCategoriesInfos, composeUserCategoriesFilters }

front/src/components/BackHeader.tsx

@@ -0,0 +1,25 @@
+import { Link } from 'react-router-dom'
+import { Navbar } from 'react-bootstrap'
+
+import BackButton from '../assets/backArrow.svg'
+
+type BackHeaderProps = {
+    text: string
+}
+
+function BackHeader({ text }: BackHeaderProps) {
+    return (
+        <Navbar>
+            <Navbar.Brand as={Link} to='/'>
+                <img src={BackButton} alt='Go back' />
+            </Navbar.Brand>
+            <Navbar.Text className='me-auto'>
+                <h4 className='mb-0'>
+                    {text}
+                </h4>
+            </Navbar.Text>
+        </Navbar>
+    )
+}
+
+export default BackHeader

front/src/components/CategoryPreview.tsx

@@ -0,0 +1,25 @@
+import { StoriesPreview } from '.'
+import { UserCategoriesNames, UserCategory, composeUserCategoriesFilters } from '../assets/userCategories'
+import { useAnnouncements } from '../hooks/api'
+import { gotError } from '../hooks/useFetch'
+
+type CategoryPreviewProps = {
+    category: UserCategory
+}
+
+function CategoryPreview({ category }: CategoryPreviewProps) {
+    const announcements = useAnnouncements(composeUserCategoriesFilters[category]())
+
+    return (
+        <section>
+            <h4 className='fw-bold'>{UserCategoriesNames[category]}</h4>
+            {gotError(announcements) ? (
+                <p className='text-danger'>{announcements.error}</p>
+            ) : (announcements.loading ? 'Загрузка...' :
+                <StoriesPreview announcements={announcements.data} category={category} />
+            )}
+        </section>
+    )
+}
+
+export default CategoryPreview

front/src/components/StoriesPreview.tsx

@@ -0,0 +1,143 @@
+import { Link } from 'react-router-dom'
+import { CSSProperties, useEffect, useMemo, useRef, useState } from 'react'
+
+import { UserCategory, userCategoriesInfos } from '../assets/userCategories'
+import { Announcement } from '../api/announcement/types'
+import { categoryGraphics, categoryNames } from '../assets/category'
+
+import rightAngleIcon from '../assets/rightAngle.svg'
+import { Button } from 'react-bootstrap'
+
+type StoriesPreviewProps = {
+    announcements: Announcement[],
+    category: UserCategory,
+}
+
+const styles = {
+    container: {
+        transform: 'translateX(0)',
+    } as CSSProperties,
+    ul: {
+        display: 'flex',
+        gap: 10,
+        listStyleType: 'none',
+        overflow: 'scroll',
+        paddingLeft: 0,
+        scrollBehavior: 'smooth',
+    } as CSSProperties,
+    link: {
+        textDecoration: 'none',
+        color: 'var(--bs-body-color)'
+    } as CSSProperties,
+    image: {
+        height: '25vh',
+        maxWidth: 'calc(25vh * 9 / 16)',
+        objectFit: 'contain',
+        borderRadius: 12,
+        marginBottom: 5,
+    } as CSSProperties,
+    title: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        marginBottom: 5,
+    } as CSSProperties,
+    scrollButton: {
+        position: 'fixed',
+        right: 0,
+        top: 0,
+        zIndex: 100,
+        background: 'linear-gradient(to right, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 255) 100%)',
+        display: 'block',
+        height: '100%',
+        width: '10%',
+        border: 'none',
+        cursor: 'default',
+        borderRadius: 0,
+    } as CSSProperties,
+    leftScrollButton: {
+        left: 0,
+        transform: 'scaleX(-1)'
+    } as CSSProperties,
+    rightScrollButton: {
+        right: 0,
+    } as CSSProperties,
+}
+
+function StoriesPreview({ announcements, category }: StoriesPreviewProps) {
+    const ulElement = useRef<HTMLUListElement | null>(null)
+    const [showScrollButtons, setShowScrollButtons] = useState({ left: false, right: false })
+
+    const determineShowScrollButtons = (ul: HTMLUListElement) => (
+        setShowScrollButtons({
+            left: ul.scrollLeft > 0,
+            right: ul.scrollLeft < (ul.scrollWidth - ul.clientWidth),
+        })
+    )
+
+    useEffect(() => {
+        const ul = ulElement.current
+        if (ul) {
+            determineShowScrollButtons(ul)
+
+            const f = () => determineShowScrollButtons(ul)
+
+            ul.addEventListener('scroll', f)
+
+            return () => ul.removeEventListener('scroll', f)
+        }
+    }, [])
+
+    useEffect(() => {
+        const ul = ulElement.current
+
+        if (ul) {
+            determineShowScrollButtons(ul)
+        }
+    }, [announcements])
+
+    const doScroll = (forward: boolean) => () => {
+        const ul = ulElement.current
+        if (ul) {
+            const storyWidth = window.innerHeight * 0.25 * 9 / 16 + 10
+            ul.scrollLeft += forward ? storyWidth : -storyWidth
+        }
+    }
+
+    return <div style={styles.container}>
+        {showScrollButtons.left &&
+            <Button onClick={doScroll(false)} style={{ ...styles.scrollButton, ...styles.leftScrollButton }}>
+                <img src={rightAngleIcon} alt='Показать ещё' />
+            </Button>
+        }
+        <ul style={styles.ul} className='StoriesPreview_ul' ref={ulElement}>
+            {useMemo(() => announcements.map((ann, i) => (
+                <li key={`${category}${i}`}>
+                    <Link to={'/?' + new URLSearchParams({
+                        userId: Number(-1).toString(),
+                        userCat: category,
+                        storyIndex: i.toString()
+                    }).toString()} style={styles.link}>
+                        {ann.src?.endsWith('mp4') ? (
+                            <video src={ann.src} style={styles.image} />
+                        ) : (
+                            <img
+                                src={ann.src || categoryGraphics[ann.category]}
+                                alt={'Изображение' + (ann.src ? 'предмета' : categoryNames[ann.category])}
+                                style={styles.image}
+                            />
+                        )}
+                        <p style={styles.title}>{ann.name}</p>
+                        <p style={styles.title}>{userCategoriesInfos[category](ann)}</p>
+                    </Link>
+                </li>
+            )), [announcements, category])}
+        </ul>
+        {showScrollButtons.right &&
+            <Button onClick={doScroll(true)} style={{ ...styles.scrollButton, ...styles.rightScrollButton }}>
+                <img src={rightAngleIcon} alt='Показать ещё' />
+            </Button>
+        }
+    </div>
+}
+
+export default StoriesPreview

front/src/components/index.ts

@@ -7,3 +7,6 @@ export { default as TrashboxMarkers } from './TrashboxMarkers'
 export { default as WithToken } from './WithToken'
 export { default as ClickHandler } from './ClickHandler'
 export { default as AuthForm } from './AuthForm'
+export { default as BackHeader } from './BackHeader'
+export { default as CategoryPreview } from './CategoryPreview'
+export { default as StoriesPreview } from './StoriesPreview'

front/src/pages/UserPage.tsx

@@ -1,9 +1,26 @@
-import { Link } from 'react-router-dom'
+import { Container } from 'react-bootstrap'
+
+import BackHeader from '../components/BackHeader'
+import { useUser } from '../hooks/api'
+import { userCategories } from '../assets/userCategories'
+import { CategoryPreview } from '../components'
+import { gotError } from '../hooks/useFetch'
 
 function UserPage() {
-    /* TODO */
+    const user = useUser()
 
-    return <h1>For Yet Go <Link to='/'>Home</Link></h1>
+    return (
+        <Container style={{ maxWidth: 'calc(100vh*9/16)' }}>
+            <BackHeader text={
+                gotError(user) ?
+                    user.error :
+                    `${user.data.name}, с нами с ${new Date(user.data.regDate).toLocaleDateString('ru')}`
+            } />
+            {userCategories.map(cat => (
+                <CategoryPreview key={cat} category={cat} />
+            ))}
+        </Container>
+    )
 }
 
 export default UserPage