manage sections state

Citizen-Knowledge-Graph · Jun 7, 2024 · a4bd65d · a4bd65d
1 parent 278fa1b
commit a4bd65d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 16 deletions.
diff --git a/src/screens/onboarding-sections/OnboardingSectionsScreen.js b/src/screens/onboarding-sections/OnboardingSectionsScreen.js
@@ -7,7 +7,8 @@ import useInitializeProfileSections from "./hooks/useInitializeProfileSections";
 
 const OnboardingSectionsScreen = () => {
     const [onboardingSectionsData, setOnboardingSectionsData] = useState();
-    useInitializeProfileSections(onboardingSectionsData);
+    const [sectionStatusInitialized, setSectionStatusInitialized] = useState(false);
+    const initializeProfileSections = useInitializeProfileSections(onboardingSectionsData);
 
     useEffect(() => {
         const fetchData = async () => {
@@ -23,10 +24,17 @@ const OnboardingSectionsScreen = () => {
         fetchData();
     }, []);
 
+    useEffect(() => {
+        if (onboardingSectionsData && !sectionStatusInitialized) {
+            initializeProfileSections(onboardingSectionsData);
+            setSectionStatusInitialized(true);
+        }
+    }, [initializeProfileSections, onboardingSectionsData, sectionStatusInitialized]);
+
     return (
         <Layout>
             <OnboardingSectionsContext/>
-            {onboardingSectionsData ? (
+            {onboardingSectionsData && sectionStatusInitialized? (
                     <OnboardingSectionsList onboardingSectionsData={onboardingSectionsData}/>)
                 :
                 null

diff --git a/src/screens/onboarding-sections/components/OnboardingSectionsItem.js b/src/screens/onboarding-sections/components/OnboardingSectionsItem.js
@@ -2,13 +2,13 @@ import React from "react";
 import { CardContent, Typography, Card, ButtonBase } from "@mui/material";
 import ArrowForwardIosOutlinedIcon from '@mui/icons-material/ArrowForwardIosOutlined';
 import SentimentSatisfiedOutlinedIcon from '@mui/icons-material/SentimentSatisfiedOutlined';
-import { yellow } from '@mui/material/colors';
+import { yellow, green } from '@mui/material/colors';
 import { Link } from "react-router-dom";
 import VStack from "../../../components/VStack";
 import HStack from "../../../components/HStack";
 
-const OnboardingSectionsItem = ({section, entityData, active, first}) => {
-    const backgroundColor = active ? yellow[600] : 'rgba(0, 0, 0, 0.1)'
+const OnboardingSectionsItem = ({section, entityData, active, completed, first}) => {
+    const backgroundColor = active ? yellow[600] : (completed ? green[500] : 'rgba(0, 0, 0, 0.1)')
 
     return (
         <VStack>
@@ -22,7 +22,7 @@ const OnboardingSectionsItem = ({section, entityData, active, first}) => {
                     <Typography sx={styles.sectionTitle}>{section.title}</Typography>
                 </HStack>
                 {
-                    active ? (
+                    active || completed ? (
                         <ButtonBase
                             component={Link}
                             to={`/profile-section/${section.id}`}

diff --git a/src/screens/onboarding-sections/components/OnboardingSectionsList.js b/src/screens/onboarding-sections/components/OnboardingSectionsList.js
@@ -11,8 +11,11 @@ const OnboardingSectionsList = ({onboardingSectionsData}) => {
     const activeSection = useProfileInputSectionStore(
         (state) => state.activeSection
     );
+    const sections = useProfileInputSectionStore((state) => state.sections);
+    //const allCompleted = sections.every((obj) => obj.completed);
 
-    console.log('entity data', entityData);
+    console.log('sections:', sections);
+    console.log('activeSection:', activeSection);
 
     return (
         <VStack gap={3} sx={{width: 'inherit'}}>
@@ -21,10 +24,17 @@ const OnboardingSectionsList = ({onboardingSectionsData}) => {
                     Profilbereiche
                 </Typography>
             </VStack>
-            {onboardingSectionsData.sections.map((section, index) => (
-                <OnboardingSectionsItem key={section.id} section={section} entityData={entityData} active={section.id === activeSection}
-                                        first={index === 0}/>
-                ))}
+            {onboardingSectionsData.sections.map((section, index) => {
+                const sectionStatus = sections.find((obj) => obj.id === section.id);
+                return (
+                    <OnboardingSectionsItem key={section.id}
+                                            section={section}
+                                            entityData={entityData}
+                                            active={section.id === activeSection}
+                                            completed={sectionStatus.completed}
+                                            first={index === 0}/>
+                )
+            })}
         </VStack>
     );
 }

diff --git a/src/screens/onboarding-sections/hooks/useInitializeProfileSections.js b/src/screens/onboarding-sections/hooks/useInitializeProfileSections.js
@@ -1,20 +1,19 @@
-import { useEffect } from 'react';
 import { useProfileInputSectionStore } from '../../../storage/zustand';
 
-const useInitializeProfileSections = (profileSections) => {
-    useEffect(() => {
+const useInitializeProfileSections = () => {
+    return (profileSections) => {
         if (!profileSections || profileSections.length === 0) return;
 
         profileSections.sections.forEach((currentItem, i) => {
             const newDictEntry = {
                 id: currentItem.id,
-                nextId: profileSections[i + 1]?.id,
+                nextId: profileSections.sections[i + 1]?.id,
             };
             useProfileInputSectionStore
                 .getState()
                 .initialiseSection(newDictEntry.id, newDictEntry.nextId, i === 0);
         });
-    }, [profileSections]);
+    };
 };
 
 export default useInitializeProfileSections;