fix advisories logic

Make step checked only when it has been clicked

src/pages/ValidatorOnboarding/Advisories/Advisories.tsx

@@ -10,30 +10,46 @@ 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 [selectedTitle, setSelectedTitle] = useState(Object.keys(advisoryTopics)[0])
+  const [completedSteps, setCompletedSteps] = useState<number[]>([]);
+  const [selectedTitle, setSelectedTitle] = useState<string>(Object.keys(advisoryTopics)[0]);
+
+  const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅'];
+
+  const isCompleted = (index: number): boolean => completedSteps.includes(index);
 
-  const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅']
   const advisoriesIcons = unicodeNumbers.map((number, index) =>
-    index <= subStepAdvisories ? '✓' : number,
+    isCompleted(index) ? '✓' : number,
-  )
+  );
 
   useEffect(() => {
-    setSelectedTitle(Object.keys(advisoryTopics)[subStepAdvisories])
+    setSelectedTitle(Object.keys(advisoryTopics)[subStepAdvisories]);
-  }, [subStepAdvisories])
+    // Add the current step to the completed steps if not already there
+    setCompletedSteps((prevSteps) => {
+      if (!prevSteps.includes(subStepAdvisories)) {
+        return [...prevSteps, subStepAdvisories];
+      }
+      return prevSteps;
+    });
+  }, [subStepAdvisories]);
+
+  const handleStepClick = (title: string): void => {
+    const index = getIndexTitle(title);
+    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 ? true : false
+    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">
@@ -46,21 +62,21 @@ const Advisories = () => {
         {Object.keys(advisoryTopics).map((title, index) => (
           <XStack
             key={title}
-            onPress={() => dispatch(setSubStepAdvisories(getIndexTitle(title)))}
+            onPress={() => handleStepClick(title)}
             style={{ cursor: 'pointer', alignItems: 'center' }}
             space={'$2'}
           >
             <Text
               size={19}
-              weight={isCurrent(title) && 'semibold'}
+              weight={isCompleted(index) || isCurrent(title) ? 'semibold' : 'normal'}
-              color={isCurrent(title) ? 'blue' : ''}
+              color={isCompleted(index) || isCurrent(title) ? 'blue' : 'default'}
             >
               {advisoriesIcons[index]}
             </Text>
             <Text
               size={19}
-              weight={isCurrent(title) ? 'semibold' : ''}
+              weight={isCompleted(index) || isCurrent(title) ? 'semibold' : 'normal'}
-              color={isCurrent(title) ? 'blue' : ''}
+              color={isCompleted(index) || isCurrent(title) ? 'blue' : 'default'}
             >
               {title}
             </Text>
@@ -73,5 +89,4 @@ const Advisories = () => {
   )
 }
 
-export default Advisories
+export default Advisories;
-