From 7a044970f02d911a0addffa6d8c5a78f1ef3e411 Mon Sep 17 00:00:00 2001 From: dm1sh Date: Wed, 19 Jul 2023 23:25:25 +0300 Subject: [PATCH] Implemented UserPage --- front/src/App.css | 13 +-- front/src/assets/backArrow.svg | 4 + front/src/assets/rightAngle.svg | 4 + front/src/assets/userCategories.ts | 45 +++++++ front/src/components/BackHeader.tsx | 25 ++++ front/src/components/CategoryPreview.tsx | 25 ++++ front/src/components/StoriesPreview.tsx | 143 +++++++++++++++++++++++ front/src/components/index.ts | 3 + front/src/pages/UserPage.tsx | 23 +++- 9 files changed, 272 insertions(+), 13 deletions(-) create mode 100644 front/src/assets/backArrow.svg create mode 100644 front/src/assets/rightAngle.svg create mode 100644 front/src/assets/userCategories.ts create mode 100644 front/src/components/BackHeader.tsx create mode 100644 front/src/components/CategoryPreview.tsx create mode 100644 front/src/components/StoriesPreview.tsx diff --git a/front/src/App.css b/front/src/App.css index 9866f71..f28b5cb 100644 --- a/front/src/App.css +++ b/front/src/App.css @@ -1,16 +1,9 @@ -body { - height: 100vh; - overflow: hidden; - color: white; - font-family: sans-serif; -} - -.modal-content, .modal-content .form-select { - background-color: rgb(17, 17, 17) !important; +:root { + --bs-body-bg: rgb(17, 17, 17) !important; } /* В связи со сложившейся политической обстановкой */ .leaflet-attribution-flag { position: absolute; right: -100px; -} +} \ No newline at end of file diff --git a/front/src/assets/backArrow.svg b/front/src/assets/backArrow.svg new file mode 100644 index 0000000..b831a4a --- /dev/null +++ b/front/src/assets/backArrow.svg @@ -0,0 +1,4 @@ + + + diff --git a/front/src/assets/rightAngle.svg b/front/src/assets/rightAngle.svg new file mode 100644 index 0000000..2d6f9e5 --- /dev/null +++ b/front/src/assets/rightAngle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/front/src/assets/userCategories.ts b/front/src/assets/userCategories.ts new file mode 100644 index 0000000..c741c47 --- /dev/null +++ b/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 = { + givingOut: 'Раздача', + booked: 'Бронь', + history: 'История', +} + +const userCategoriesInfos: Record 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 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 } diff --git a/front/src/components/BackHeader.tsx b/front/src/components/BackHeader.tsx new file mode 100644 index 0000000..e8ba89f --- /dev/null +++ b/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 ( + + + Go back + + +

+ {text} +

+ + + ) +} + +export default BackHeader diff --git a/front/src/components/CategoryPreview.tsx b/front/src/components/CategoryPreview.tsx new file mode 100644 index 0000000..caaecd7 --- /dev/null +++ b/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 ( +
+

{UserCategoriesNames[category]}

+ {gotError(announcements) ? ( +

{announcements.error}

+ ) : (announcements.loading ? 'Загрузка...' : + + )} +
+ ) +} + +export default CategoryPreview diff --git a/front/src/components/StoriesPreview.tsx b/front/src/components/StoriesPreview.tsx new file mode 100644 index 0000000..24b8ffe --- /dev/null +++ b/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(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
+ {showScrollButtons.left && + + } +
    + {useMemo(() => announcements.map((ann, i) => ( +
  • + + {ann.src?.endsWith('mp4') ? ( +
    • + )), [announcements, category])} +
+ {showScrollButtons.right && + + } +
+} + +export default StoriesPreview \ No newline at end of file diff --git a/front/src/components/index.ts b/front/src/components/index.ts index aa92c4b..6562e70 100644 --- a/front/src/components/index.ts +++ b/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' diff --git a/front/src/pages/UserPage.tsx b/front/src/pages/UserPage.tsx index 6c90c41..a35a1be 100644 --- a/front/src/pages/UserPage.tsx +++ b/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

For Yet Go Home

+ return ( + + + {userCategories.map(cat => ( + + ))} + + ) } export default UserPage