From e47aad88ae150f905764bb36707487826d4ff568 Mon Sep 17 00:00:00 2001 From: wbglaeser Date: Tue, 25 Jun 2024 21:37:06 +0200 Subject: [PATCH] allow backward and forward navigation --- .../profile-section/ProfileSectionScreen.js | 7 +++- .../components/ProfileSectionClass.js | 2 +- .../components/ProfileSectionList.js | 8 +--- .../hooks/useProfileSectionListHandlers.js | 14 ++++++- src/storage/useProfileSectionStore.js | 39 +++++++++++++++++-- 5 files changed, 57 insertions(+), 13 deletions(-) diff --git a/src/screens/profile-section/ProfileSectionScreen.js b/src/screens/profile-section/ProfileSectionScreen.js index c57b801c..05345ca8 100644 --- 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 ( @@ -35,6 +37,7 @@ const ProfileSectionScreen = () => { {!completed ? () : null diff --git a/src/screens/profile-section/components/ProfileSectionClass.js b/src/screens/profile-section/components/ProfileSectionClass.js index 2cef7ffb..def15f7d 100644 --- 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 index fa10664d..35b6586b 100644 --- a/src/screens/profile-section/components/ProfileSectionList.js +++ b/src/screens/profile-section/components/ProfileSectionList.js @@ -5,7 +5,7 @@ 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); @@ -13,17 +13,13 @@ const ProfileSectionList = ({profileSectionData, setCompleted}) => { 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 ( diff --git a/src/screens/profile-section/hooks/useProfileSectionListHandlers.js b/src/screens/profile-section/hooks/useProfileSectionListHandlers.js index 5a8e4b52..a8ac0fb7 100644 --- 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 index 0398db77..8cd99a82 100644 --- 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; +};