allow backward and forward navigation

Citizen-Knowledge-Graph · Jun 25, 2024 · e47aad8 · e47aad8
1 parent 09e6b2a
commit e47aad8
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 13 deletions.
diff --git a/src/screens/profile-section/ProfileSectionScreen.js b/src/screens/profile-section/ProfileSectionScreen.js
@@ -6,7 +6,7 @@ import ProfileSectionList from "./components/ProfileSectionList";
 import {useParams} from "react-router-dom";
 
 const ProfileSectionScreen = () => {
-    const {id} = useParams();
+    const {id, mode} = useParams();
     const [profileSectionData, setProfileSectionData] = useState();
     const [completed, setCompleted] = useState(false);
 
@@ -26,7 +26,9 @@ const ProfileSectionScreen = () => {
 
     useEffect(() => {
         setCompleted(false);
-    }, []);
+    }, [id]);
+
+    console.log("we are back here: ", profileSectionData)
 
     return (
         <Layout>
@@ -35,6 +37,7 @@ const ProfileSectionScreen = () => {
                         <ProfileSectionContext title={profileSectionData.title} infoBox={true}/>
                         {!completed ?
                             (<ProfileSectionList profileSectionData={profileSectionData}
+                                                 mode={mode}
                                                  setCompleted={setCompleted}
                             />)
                             : null

diff --git a/src/screens/profile-section/components/ProfileSectionClass.js b/src/screens/profile-section/components/ProfileSectionClass.js
@@ -32,7 +32,7 @@ const ProfileSectionClass = ({currentField, entityData}) => {
 
     const handleCreateProfileObject = (item) => {
         updateProfileSectionStore(item, currentField, entityData)
-        navigate(`/profile-section/${currentField.objectClass}`)
+        navigate(`/profile-section/${currentField.objectClass}/nested`)
     };
 
         return (

diff --git a/src/screens/profile-section/components/ProfileSectionList.js b/src/screens/profile-section/components/ProfileSectionList.js
@@ -5,25 +5,21 @@ import ProfileCompletionBar from "./ProfileCompletionBar";
 import {useProfileSectionStore} from "../../../storage/useProfileSectionStore";
 import {useProfileSectionListHandlers} from "../hooks/useProfileSectionListHandlers";
 
-const ProfileSectionList = ({profileSectionData, setCompleted}) => {
+const ProfileSectionList = ({profileSectionData, mode, setCompleted}) => {
     const [currentIndex, setCurrentIndex] = useState(0);
     const [entityData, setEntityData] = useState({});
     const retrieveCurrentEntityData = useProfileSectionStore((state) => state.retrieveCurrentEntityData);
     const {
         handleConfirm,
         handleBack,
         handleSkip
-    } = useProfileSectionListHandlers(setCurrentIndex, profileSectionData, setCompleted);
+    } = useProfileSectionListHandlers(mode, setCurrentIndex, profileSectionData, setCompleted);
 
     useEffect(() => {
         setEntityData(retrieveCurrentEntityData());
         setCurrentIndex(0);
     }, [profileSectionData, retrieveCurrentEntityData]);
 
-    console.log(currentIndex)
-    console.log(profileSectionData)
-    console.log(entityData)
-
     const currentField = profileSectionData.fields[currentIndex];
     return (
         <VStack sx={{width: '100%', paddingTop: '50px'}} gap={3}>

diff --git a/src/screens/profile-section/hooks/useProfileSectionListHandlers.js b/src/screens/profile-section/hooks/useProfileSectionListHandlers.js
@@ -1,9 +1,21 @@
-export const useProfileSectionListHandlers = (setCurrentIndex, profileSectionData, setCompleted) => {
+import {useProfileSectionStore} from "../../../storage/useProfileSectionStore";
+import {useNavigate} from "react-router-dom";
+
+export const useProfileSectionListHandlers = (mode, setCurrentIndex, profileSectionData, setCompleted) => {
+    const navigate = useNavigate()
+    const deleteLastNestedSection = useProfileSectionStore((state) => state.deleteLastNestedSection);
+    const currentProfileSection = useProfileSectionStore((state) => state.retrieveCurrentProfileSection);
+
     const handleConfirm = async (currentIndex) => {
         if (currentIndex < profileSectionData.fields.length - 1) {
             setCurrentIndex(currentIndex + 1);
         } else {
             console.log('All sections completed');
+            if (mode === 'nested') {
+                deleteLastNestedSection();
+                console.log("we are moving to: ", currentProfileSection());
+                navigate(`/profile-section/${currentProfileSection()}/return`);
+            }
             setCompleted(true);
         }
     };

diff --git a/src/storage/useProfileSectionStore.js b/src/storage/useProfileSectionStore.js
@@ -10,7 +10,12 @@ export const useProfileSectionStore = create((set, get) => ({
     retrieveCurrentEntityData() {
         const data = get().sectionStore;
         console.log(`STATE UPDATE: We are retrieving the current entity data`);
-        return findDeepest(data);
+        return findDeepestEntityData(data);
+    },
+    retrieveCurrentProfileSection() {
+        const data = get().sectionStore;
+        console.log(`STATE UPDATE: We are retrieving the current profile section`);
+        return findDeepestProfileSection(data);
     },
     updateDeepestDatafield: (newDatafield) =>
         console.log('STATE UPDATE: We are updating the deepest datafield') ||
@@ -22,6 +27,11 @@ export const useProfileSectionStore = create((set, get) => ({
         set((state) => ({
             sectionStore: updateDeepestNestedSection(state.sectionStore, newNestedSection),
         })),
+    deleteLastNestedSection: () =>
+        console.log('STATE UPDATE: We are deleting the last nested section') ||
+        set((state) => ({
+            sectionStore: findAndDeleteLastNestedSection(state.sectionStore),
+        })),
 }));
 
 const updateDeepestDatafield = (section, newDatafield) => {
@@ -38,11 +48,18 @@ const updateDeepestDatafield = (section, newDatafield) => {
     };
 };
 
-const findDeepest = (section) => {
+const findDeepestEntityData = (section) => {
     if (!section.nestedSection) {
         return section.entityData;
     }
-    return findDeepest(section.nestedSection);
+    return findDeepestEntityData(section.nestedSection);
+};
+
+const findDeepestProfileSection = (section) => {
+    if (!section.nestedSection) {
+        return section.profileSection;
+    }
+    return findDeepestProfileSection(section.nestedSection);
 };
 
 const updateDeepestNestedSection = (section, newNestedSection) => {
@@ -56,3 +73,19 @@ const updateDeepestNestedSection = (section, newNestedSection) => {
 
     return findDeepestAndUpdate(section);
 };
+
+const findAndDeleteLastNestedSection = (section) => {
+    const findSecondToLast = (section) => {
+        if (!section.nestedSection || !section.nestedSection.nestedSection) {
+            return section;
+        }
+        return findSecondToLast(section.nestedSection);
+    };
+
+    const secondToLastSection = findSecondToLast(section);
+    if (secondToLastSection && secondToLastSection.nestedSection) {
+        secondToLastSection.nestedSection = null;
+    }
+
+    return section;
+};