Refactored Rating component

Separated annDetails, added to userPage, made actually operating

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) => (
     <>
         <h1>{name}</h1>
 
@@ -42,7 +40,9 @@ const View = ({
 
         <p className='mb-0'>{description}</p>
 
-        <Rating userId={userId} className='mb-3' />
+        <p className='mb-3'>
+            Рейтинг пользователя: <StarRating dynamic userId={userId} />
+        </p>
 
         <MapContainer style={styles.map} center={[lat, lng]} zoom={16} >
             <TileLayer
@@ -80,7 +80,7 @@ function Control({
 
     return (
         <>
-            <p>Забронировали {bookedBy} чел.</p>
+            <p>Забронировали {bookedBy + (bookButton.disabled ? 1 : 0)} чел.</p>
             {(myId === userId) ? (
                 <>
                     <Button variant='success' onClick={showDispose}>Утилизировать</Button>
@@ -93,6 +93,12 @@ function Control({
     )
 }
 
+type AnnouncementDetailsProps = {
+    close: () => void,
+    refresh: () => void,
+    announcement: Announcement,
+}
+
 function AnnouncementDetails({
     close,
     refresh,

front/src/components/Rating.tsx

@@ -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 (
-        <button
-            className={`${styles.star} ${filled ? styles.starFilled : ''} ${selected ? styles.starSelected : ''}`}
-            onMouseEnter={setMyRate}
-            onFocus={setMyRate}
-            onClick={sendMyRate}
-        >&#9733;</button>
-    )
-}
-
-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 (
-        <p className={className}>
-            Рейтинг пользователя:{' '}
-            {gotResponse(rating) ? (
-                gotError(rating) ? (
-                    <span className='text-danger'>{rating.error}</span>
-                ) : (
-                    <span
-                        className={styles.starContainer}
-                        onMouseLeave={() => setMyRate(0)}
-                    >
-                        {...Array(5).fill(5).map(
-                            (_, i) =>
-                                <Star
-                                    key={i}
-                                    filled={i < rating.data}
-                                    selected={i < myRate}
-                                    setMyRate={() => setMyRate(i + 1)}
-                                    sendMyRate={() => void sendMyRate()}
-                                />
-                        )}
-                    </span>
-                )
-            ) : (
-                <span>Загрузка...</span>
-            )
-            }
-        </p>
-
-    )
-}
-
-export default Rating

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 (
+        <button
+            className={`${styles.star} ${filled ? styles.starFilled : ''} ${selected ? styles.starSelected : ''}`}
+            onMouseEnter={setMyRate}
+            onFocus={setMyRate}
+            onClick={sendMyRate}
+            disabled={disabled}
+        >&#9733;</button> // 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 (
+            <span>Загрузка...</span>
+        )
+    }
+
+    if (gotError(rating)) {
+        return (
+            <span className='text-danger'>{rating.error}</span>
+        )
+    }
+
+    return (
+        <span className={styles.starContainer} onMouseLeave={() => setMyRate(0)}>
+            {...Array(5).fill(5).map((_, i) => (
+                <Star
+                    key={i}
+                    filled={i < Math.round(rating.data)}
+                    selected={i < myRate}
+                    setMyRate={() => dynamic && setMyRate(i + 1)}
+                    sendMyRate={() => dynamic && void sendMyRate()}
+                    disabled={!dynamic}
+                />
+            ))}
+        </span >
+    )
+}
+
+export default StarRating

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'