From 8cf45335c4112ed7e8d9398e6fb5c4e235de34b6 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 18 Jan 2024 23:07:59 +0200 Subject: [PATCH] fix advisories logic Make step checked only when it has been clicked --- .../Advisories/Advisories.tsx | 61 ++++++++++++------- 1 file changed, 38 insertions(+), 23 deletions(-) diff --git a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx index 7e63774d..8152ef40 100644 --- a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx +++ b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx @@ -10,30 +10,46 @@ import './advisoriesLayout.css' import { advisoryTopics } from '../../../constants' const Advisories = () => { - const dispatch = useDispatch() - const { subStepAdvisories } = useSelector((state: RootState) => state.advisories) - const [selectedTitle, setSelectedTitle] = useState(Object.keys(advisoryTopics)[0]) + const dispatch = useDispatch(); + const { subStepAdvisories } = useSelector((state: RootState) => state.advisories); + const [completedSteps, setCompletedSteps] = useState([]); + const [selectedTitle, setSelectedTitle] = useState(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]) - }, [subStepAdvisories]) + setSelectedTitle(Object.keys(advisoryTopics)[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 index = topics.indexOf(currentTitle) - return index <= subStepAdvisories ? true : false - } + const topics = Object.keys(advisoryTopics); + const index = topics.indexOf(currentTitle); + return index === subStepAdvisories; + }; const getIndexTitle = (title: string): number => { - const topics = Object.keys(advisoryTopics) - const index = topics.indexOf(title) - return index - } + const topics = Object.keys(advisoryTopics); + const index = topics.indexOf(title); + return index; + }; return ( @@ -46,21 +62,21 @@ const Advisories = () => { {Object.keys(advisoryTopics).map((title, index) => ( dispatch(setSubStepAdvisories(getIndexTitle(title)))} + onPress={() => handleStepClick(title)} style={{ cursor: 'pointer', alignItems: 'center' }} space={'$2'} > {advisoriesIcons[index]} {title} @@ -73,5 +89,4 @@ const Advisories = () => { ) } -export default Advisories - +export default Advisories;