Improved StarRating indication of rated mark

front/src/components/AnnouncementDetails.tsx

@@ -25,10 +25,12 @@ const styles = {
 }
 
 type ViewProps = {
+    myId: number,
     announcement: Announcement,
 }
 
 const View = ({
+    myId,
     announcement: { name, category, bestBy, description, lat, lng, address, metro, userId },
 }: ViewProps) => (
     <>
@@ -41,7 +43,7 @@ const View = ({
         <p className='mb-0'>{description}</p>
 
         <p className='mb-3'>
-            Рейтинг пользователя: <StarRating dynamic userId={userId} />
+            Рейтинг пользователя: <StarRating dynamic={myId !== userId} userId={userId} />
         </p>
 
         <MapContainer style={styles.map} center={[lat, lng]} zoom={16} >
@@ -62,12 +64,14 @@ const View = ({
 )
 
 type ControlProps = {
+    myId: number,
     closeRefresh: () => void,
     announcement: Announcement,
     showDispose: () => void
 }
 
 function Control({
+    myId,
     closeRefresh,
     announcement: { bookedBy, id, userId },
     showDispose,
@@ -76,8 +80,6 @@ function Control({
 
     const { handleRemove, removeButton } = useRemoveAnnouncement(closeRefresh)
 
-    const myId = useId()
-
     return (
         <>
             <p>Забронировали {bookedBy + (bookButton.disabled ? 1 : 0)} чел.</p>
@@ -111,6 +113,8 @@ function AnnouncementDetails({
 
     const [disposeShow, setDisposeShow] = useState(false)
 
+    const myId = useId()
+
     return (
         <div
             className='modal'
@@ -124,11 +128,16 @@ function AnnouncementDetails({
                 </Modal.Header>
 
                 <Modal.Body>
-                    <View announcement={announcement} />
+                    <View myId={myId} announcement={announcement} />
                 </Modal.Body>
 
                 <Modal.Footer>
-                    <Control closeRefresh={closeRefresh} showDispose={() => setDisposeShow(true)} announcement={announcement} />
+                    <Control
+                        myId={myId}
+                        closeRefresh={closeRefresh}
+                        showDispose={() => setDisposeShow(true)}
+                        announcement={announcement}
+                    />
                 </Modal.Footer>
             </Modal.Dialog>
             <Modal centered show={disposeShow} onHide={() => setDisposeShow(false)} style={{ zIndex: 100000 }}>

front/src/components/StarRating.tsx

@@ -8,18 +8,17 @@ import styles from '../styles/StarRating.module.css'
 type StarProps = {
     filled: boolean,
     selected: boolean,
-    setMyRate?: () => void,
+    selectRate?: () => void,
     sendMyRate?: () => void,
     disabled: boolean
 }
 
-function Star({ filled, selected, setMyRate, sendMyRate, disabled }: StarProps) {
+function Star({ filled, selected, selectRate, disabled }: StarProps) {
     return (
         <button
             className={`${styles.star} ${filled ? styles.starFilled : ''} ${selected ? styles.starSelected : ''}`}
-            onMouseEnter={setMyRate}
-            onFocus={setMyRate}
-            onClick={sendMyRate}
+            onMouseEnter={selectRate}
+            onFocus={selectRate}
             disabled={disabled}
         >&#9733;</button> // star
     )
@@ -28,21 +27,23 @@ function Star({ filled, selected, setMyRate, sendMyRate, disabled }: StarProps)
 type StarRatingProps = {
     userId: number,
     dynamic?: boolean,
-    style?: React.CSSProperties,
 }
 
 function StarRating({ userId, dynamic = false }: StarRatingProps) {
     const rating = useUserRating(userId)
 
+    const [selectedRate, setSelectedRate] = useState(0)
     const [myRate, setMyRate] = useState(0)
+    const rated = myRate > 0
 
     const { doSendRate } = useSendRate()
 
     async function sendMyRate() {
-        const res = await doSendRate(myRate, userId)
+        const res = await doSendRate(selectedRate, userId)
 
         if (res) {
             rating.refetch()
+            setMyRate(selectedRate)
         }
     }
 
@@ -59,15 +60,30 @@ function StarRating({ userId, dynamic = false }: StarRatingProps) {
     }
 
     return (
-        <span className={styles.starContainer} onMouseLeave={() => setMyRate(0)}>
+        <span
+            className={styles.starContainer}
+
+            onClick={() => dynamic && !rated && void sendMyRate()}
+
+            onMouseEnter={() => rated && setSelectedRate(myRate)}
+            onMouseLeave={() => setSelectedRate(0)}
+
+            onFocus={() => rated && setSelectedRate(myRate)}
+            onBlur={() => setSelectedRate(0)}
+
+            onTouchStart={() => rated && setSelectedRate(myRate)}
+            onTouchEnd={() => setSelectedRate(0)}
+
+            title={`Пользователи: ${Math.round(rating.data)}\nВы: ${myRate}`}
+            tabIndex={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}
+                    selected={i < selectedRate}
+                    selectRate={() => dynamic && !rated && setSelectedRate(i + 1)}
+                    disabled={!dynamic || rated}
                 />
             ))}
         </span >