Improved StarRating indication of rated mark

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 >