Update Advisories.tsx

src/pages/ValidatorOnboarding/Advisories/Advisories.tsx

@@ -10,46 +10,44 @@ import './advisoriesLayout.css'
 import { advisoryTopics } from '../../../constants'
 
 const Advisories = () => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch()
-  const { subStepAdvisories } = useSelector((state: RootState) => state.advisories);
+  const { subStepAdvisories } = useSelector((state: RootState) => state.advisories)
-  const [completedSteps, setCompletedSteps] = useState<number[]>([]);
+  const [completedSteps, setCompletedSteps] = useState<number[]>([])
-  const [selectedTitle, setSelectedTitle] = useState<string>(Object.keys(advisoryTopics)[0]);
+  const [selectedTitle, setSelectedTitle] = useState<string>(Object.keys(advisoryTopics)[0])
 
-  const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅'];
+  const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅']
 
-  const isCompleted = (index: number): boolean => completedSteps.includes(index);
+  const isCompleted = (index: number): boolean => completedSteps.includes(index)
 
-  const advisoriesIcons = unicodeNumbers.map((number, index) =>
+  const advisoriesIcons = unicodeNumbers.map((number, index) => (isCompleted(index) ? '✓' : number))
-    isCompleted(index) ? '✓' : number,
-  );
 
   useEffect(() => {
-    setSelectedTitle(Object.keys(advisoryTopics)[subStepAdvisories]);
+    setSelectedTitle(Object.keys(advisoryTopics)[subStepAdvisories])
-    // Add the current step to the completed steps if not already there
+
-    setCompletedSteps((prevSteps) => {
+    setCompletedSteps(prevSteps => {
       if (!prevSteps.includes(subStepAdvisories)) {
-        return [...prevSteps, subStepAdvisories];
+        return [...prevSteps, subStepAdvisories]
       }
-      return prevSteps;
+      return prevSteps
-    });
+    })
-  }, [subStepAdvisories]);
+  }, [subStepAdvisories])
 
   const handleStepClick = (title: string): void => {
-    const index = getIndexTitle(title);
+    const index = getIndexTitle(title)
-    dispatch(setSubStepAdvisories(index));
+    dispatch(setSubStepAdvisories(index))
-  };
+  }
 
   const isCurrent = (currentTitle: string): boolean => {
-    const topics = Object.keys(advisoryTopics);
+    const topics = Object.keys(advisoryTopics)
-    const index = topics.indexOf(currentTitle);
+    const index = topics.indexOf(currentTitle)
-    return index === subStepAdvisories;
+    return index === subStepAdvisories
-  };
+  }
 
   const getIndexTitle = (title: string): number => {
-    const topics = Object.keys(advisoryTopics);
+    const topics = Object.keys(advisoryTopics)
-    const index = topics.indexOf(title);
+    const index = topics.indexOf(title)
-    return index;
+    return index
-  };
+  }
 
   return (
     <XStack className="advisories-container">
@@ -89,4 +87,4 @@ const Advisories = () => {
   )
 }
 
-export default Advisories;
+export default Advisories