refactor(web/skillcheck): move visibility into it's own state

web/src/features/skillcheck/index.tsx

@@ -12,7 +12,6 @@ interface CustomGameDifficulty {
 type GameDifficulty = 'easy' | 'medium' | 'hard' | CustomGameDifficulty;
 
 export interface SkillCheckProps {
-  visible: boolean;
   angle: number;
   difficultyOffset: number;
   difficulty: GameDifficulty;
@@ -34,8 +33,8 @@ debugData([
 ]);
 
 const SkillCheck: React.FC = () => {
+  const [visible, setVisible] = useState(false);
   const [skillCheck, setSkillCheck] = useState<SkillCheckProps>({
-    visible: false,
     angle: 0,
     difficultyOffset: 315,
     difficulty: 'easy',
@@ -44,16 +43,16 @@ const SkillCheck: React.FC = () => {
   useNuiEvent('startSkillCheck', (data: GameDifficulty) => {
     const offset = typeof data === 'object' ? data.areaSize : difficultyOffsets[data];
     setSkillCheck({
-      visible: true,
       angle: -90 + getRandomAngle(120, 360 - (315 - offset)),
       difficultyOffset: offset,
       difficulty: data,
     });
+    setVisible(true);
   });
 
   return (
     <Center height="100%" width="100%">
-      {skillCheck.visible && (
+      {visible && (
         <>
           <svg width={500} height={500}>
             {/*Circle track*/}
@@ -91,6 +90,7 @@ const SkillCheck: React.FC = () => {
                   : skillCheck.difficulty.speedMultiplier
               }
               setSkillCheck={setSkillCheck}
+              setVisible={setVisible}
             />
           </svg>
           <Box

web/src/features/skillcheck/indicator.tsx

@@ -8,10 +8,11 @@ interface Props {
   angle: number;
   offset: number;
   multiplier: number;
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
   setSkillCheck: React.Dispatch<React.SetStateAction<SkillCheckProps>>;
 }
 
-const Indicator: React.FC<Props> = ({ angle, offset, multiplier, setSkillCheck }) => {
+const Indicator: React.FC<Props> = ({ angle, offset, multiplier, setSkillCheck, setVisible }) => {
   const [indicatorAngle, setIndicatorAngle] = useState(-90);
   const intervalRef = useRef<NodeJS.Timer | null>(null);
   const isKeyPressed = useKeyPress('e');
@@ -30,7 +31,7 @@ const Indicator: React.FC<Props> = ({ angle, offset, multiplier, setSkillCheck }
     if (intervalRef.current && indicatorAngle + 90 >= 360) {
       clearInterval(intervalRef.current);
       fetchNui('skillCheckOver', { success: false });
-      setSkillCheck((prevState) => ({ ...prevState, visible: false }));
+      setVisible(false);
     }
 
     if (isKeyPressed && intervalRef.current) {
@@ -40,7 +41,7 @@ const Indicator: React.FC<Props> = ({ angle, offset, multiplier, setSkillCheck }
       } else {
         fetchNui('skillCheckOver', { success: true });
       }
-      setSkillCheck((prevState) => ({ ...prevState, visible: false }));
+      setVisible(false);
     }
   }, [indicatorAngle, isKeyPressed]);