fix advisories logic

Make step checked only when it has been clicked
This commit is contained in:
Hristo Nedelkov 2024-01-18 23:07:59 +02:00
parent 764d04e556
commit 8cf45335c4
1 changed files with 38 additions and 23 deletions

View File

@ -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<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])
}, [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 (
<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'}
color={isCurrent(title) ? 'blue' : ''}
weight={isCompleted(index) || isCurrent(title) ? 'semibold' : 'normal'}
color={isCompleted(index) || isCurrent(title) ? 'blue' : 'default'}
>
{advisoriesIcons[index]}
</Text>
<Text
size={19}
weight={isCurrent(title) ? 'semibold' : ''}
color={isCurrent(title) ? 'blue' : ''}
weight={isCompleted(index) || isCurrent(title) ? 'semibold' : 'normal'}
color={isCompleted(index) || isCurrent(title) ? 'blue' : 'default'}
>
{title}
</Text>
@ -73,5 +89,4 @@ const Advisories = () => {
)
}
export default Advisories
export default Advisories;