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