From d9925647c636d57f055d7414445ea1762caaef4a Mon Sep 17 00:00:00 2001 From: dm1sh Date: Tue, 8 Aug 2023 18:36:47 +0300 Subject: [PATCH] Refactored Rating component Separated annDetails, added to userPage, made actually operating --- front/src/components/AnnouncementDetails.tsx | 26 ++++--- front/src/components/Rating.tsx | 78 ------------------- front/src/components/StarRating.tsx | 77 ++++++++++++++++++ front/src/components/index.ts | 2 +- front/src/hooks/api/useSendRate.ts | 3 +- front/src/hooks/api/useUserRating.ts | 30 ++----- front/src/pages/UserPage.tsx | 9 ++- ...ating.module.css => StarRating.module.css} | 6 +- front/src/styles/UserPage.module.css | 7 ++ 9 files changed, 124 insertions(+), 114 deletions(-) delete mode 100644 front/src/components/Rating.tsx create mode 100644 front/src/components/StarRating.tsx rename front/src/styles/{Rating.module.css => StarRating.module.css} (82%) diff --git a/front/src/components/AnnouncementDetails.tsx b/front/src/components/AnnouncementDetails.tsx index d691cac..dd7b805 100644 --- a/front/src/components/AnnouncementDetails.tsx +++ b/front/src/components/AnnouncementDetails.tsx @@ -4,19 +4,13 @@ import { CSSProperties, useState } from 'react' import { LatLng } from 'leaflet' import LineDot from './LineDot' -import Rating from './Rating' import { categoryNames } from '../assets/category' import { useBook, useRemoveAnnouncement } from '../hooks/api' import { Announcement } from '../api/announcement/types' import { iconItem } from '../utils/markerIcons' import { useId } from '../hooks' import SelectDisposalTrashbox from './SelectDisposalTrashbox' - -type AnnouncementDetailsProps = { - close: () => void, - refresh: () => void, - announcement: Announcement, -} +import StarRating from './StarRating' const styles = { container: { @@ -30,9 +24,13 @@ const styles = { } as CSSProperties, } +type ViewProps = { + announcement: Announcement, +} + const View = ({ announcement: { name, category, bestBy, description, lat, lng, address, metro, userId }, -}: { announcement: Announcement }) => ( +}: ViewProps) => ( <>

{name}

@@ -42,7 +40,9 @@ const View = ({

{description}

- +

+ Рейтинг пользователя: +

-

Забронировали {bookedBy} чел.

+

Забронировали {bookedBy + (bookButton.disabled ? 1 : 0)} чел.

{(myId === userId) ? ( <> @@ -93,6 +93,12 @@ function Control({ ) } +type AnnouncementDetailsProps = { + close: () => void, + refresh: () => void, + announcement: Announcement, +} + function AnnouncementDetails({ close, refresh, diff --git a/front/src/components/Rating.tsx b/front/src/components/Rating.tsx deleted file mode 100644 index 355f33f..0000000 --- a/front/src/components/Rating.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { useState } from 'react' - -import { gotError, gotResponse } from '../hooks/useFetch' -import { useUserRating, useSendRate } from '../hooks/api' - -import styles from '../styles/Rating.module.css' - -type StarProps = { - filled: boolean, - selected: boolean, - setMyRate: () => void, - sendMyRate: () => void, -} - -function Star({ filled, selected, setMyRate, sendMyRate }: StarProps) { - return ( - - ) -} - -type RatingProps = { - userId: number, - className: string | undefined, -} - -function Rating({ userId, className }: RatingProps) { - const rating = useUserRating(userId) - - const [myRate, setMyRate] = useState(0) - - const { doSendRate } = useSendRate() - - async function sendMyRate() { - const res = await doSendRate(myRate) - - if (res) { - rating.refetch() - } - } - - return ( -

- Рейтинг пользователя:{' '} - {gotResponse(rating) ? ( - gotError(rating) ? ( - {rating.error} - ) : ( - setMyRate(0)} - > - {...Array(5).fill(5).map( - (_, i) => - setMyRate(i + 1)} - sendMyRate={() => void sendMyRate()} - /> - )} - - ) - ) : ( - Загрузка... - ) - } -

- - ) -} - -export default Rating diff --git a/front/src/components/StarRating.tsx b/front/src/components/StarRating.tsx new file mode 100644 index 0000000..3154f6f --- /dev/null +++ b/front/src/components/StarRating.tsx @@ -0,0 +1,77 @@ +import { useState } from 'react' + +import { useSendRate, useUserRating } from '../hooks/api' +import { gotError, gotResponse } from '../hooks/useFetch' + +import styles from '../styles/StarRating.module.css' + +type StarProps = { + filled: boolean, + selected: boolean, + setMyRate?: () => void, + sendMyRate?: () => void, + disabled: boolean +} + +function Star({ filled, selected, setMyRate, sendMyRate, disabled }: StarProps) { + return ( + // star + ) +} + +type StarRatingProps = { + userId: number, + dynamic?: boolean, + style?: React.CSSProperties, +} + +function StarRating({ userId, dynamic = false }: StarRatingProps) { + const rating = useUserRating(userId) + + const [myRate, setMyRate] = useState(0) + + const { doSendRate } = useSendRate() + + async function sendMyRate() { + const res = await doSendRate(myRate, userId) + + if (res) { + rating.refetch() + } + } + + if (!gotResponse(rating)) { + return ( + Загрузка... + ) + } + + if (gotError(rating)) { + return ( + {rating.error} + ) + } + + return ( + setMyRate(0)}> + {...Array(5).fill(5).map((_, i) => ( + dynamic && setMyRate(i + 1)} + sendMyRate={() => dynamic && void sendMyRate()} + disabled={!dynamic} + /> + ))} + + ) +} + +export default StarRating diff --git a/front/src/components/index.ts b/front/src/components/index.ts index b124f0c..312f3db 100644 --- a/front/src/components/index.ts +++ b/front/src/components/index.ts @@ -14,4 +14,4 @@ export { default as Points } from './Points' export { default as SignOut } from './SignOut' export { default as Poetry } from './Poetry' export { default as SelectDisposalTrashbox } from './SelectDisposalTrashbox' -export { default as Rating } from './Rating' +export { default as StarRating } from './StarRating' diff --git a/front/src/hooks/api/useSendRate.ts b/front/src/hooks/api/useSendRate.ts index d3cfc03..f85dbe2 100644 --- a/front/src/hooks/api/useSendRate.ts +++ b/front/src/hooks/api/useSendRate.ts @@ -11,10 +11,11 @@ function useSendRate() { processSendRate, ) - const doSendRate = (rate: number) => ( + const doSendRate = (rate: number, user_id: number) => ( doSend({}, { body: JSON.stringify({ rate, + user_id, }), headers: { 'Content-Type': 'application/json', diff --git a/front/src/hooks/api/useUserRating.ts b/front/src/hooks/api/useUserRating.ts index b14a5bf..4328675 100644 --- a/front/src/hooks/api/useUserRating.ts +++ b/front/src/hooks/api/useUserRating.ts @@ -3,28 +3,14 @@ import { UserRating, isUserRatingResponse } from '../../api/userRating/types' import useFetch, { UseFetchReturn } from '../useFetch' const useUserRating = (userId: number): UseFetchReturn => ( - // useFetch( - // composeUserRatingURL(userId), - // 'GET', - // false, - // isUserRatingResponse, - // processUserRating, - // initialUserRating - // ) - - { - data: 3, - loading: false, - error: null, - refetch: () => { return }, - } - - // { - // data: undefined, - // loading: true, - // error: null, - // refetch: () => { return }, - // } + useFetch( + composeUserRatingURL(userId), + 'GET', + false, + isUserRatingResponse, + processUserRating, + initialUserRating + ) ) export default useUserRating diff --git a/front/src/pages/UserPage.tsx b/front/src/pages/UserPage.tsx index cf15d5a..2ed6dba 100644 --- a/front/src/pages/UserPage.tsx +++ b/front/src/pages/UserPage.tsx @@ -2,7 +2,7 @@ import { Container } from 'react-bootstrap' import { useUser } from '../hooks/api' import { userCategories } from '../assets/userCategories' -import { BackHeader, CategoryPreview, Poetry, Points, SignOut } from '../components' +import { BackHeader, CategoryPreview, Poetry, Points, SignOut, StarRating } from '../components' import { gotError, gotResponse } from '../hooks/useFetch' import styles from '../styles/UserPage.module.css' @@ -34,6 +34,13 @@ function UserPage() { ) } /> +
+
+ Ваша оценка: + +
+
+ {userCategories.map(cat => ( ))} diff --git a/front/src/styles/Rating.module.css b/front/src/styles/StarRating.module.css similarity index 82% rename from front/src/styles/Rating.module.css rename to front/src/styles/StarRating.module.css index 48a57c7..a929f10 100644 --- a/front/src/styles/Rating.module.css +++ b/front/src/styles/StarRating.module.css @@ -1,7 +1,11 @@ +.starContainer { + white-space: nowrap; +} + .star { -webkit-text-stroke: 2px var(--bs-body-color); font-size: 1.5rem; - color: var(--bs-modal-bg); + color: var(--bs-body-bg); background: none; border: none; padding: 0 3px; diff --git a/front/src/styles/UserPage.module.css b/front/src/styles/UserPage.module.css index 18b889a..97dea46 100644 --- a/front/src/styles/UserPage.module.css +++ b/front/src/styles/UserPage.module.css @@ -1,3 +1,10 @@ +.userRating { + display: flex; + align-items: flex-end; + justify-content: space-between; + flex-wrap: wrap; +} + .sixteenXnine { max-width: calc(100vh * 9/16) !important; } \ No newline at end of file