wip: improve edge case handling in question and guide navigation logi…

…c, refactored questionswrapper, improved urlUpdater
kalkulacka-one · Jan 20, 2025 · 1f233a7 · 1f233a7
1 parent 93a58f6
commit 1f233a7
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 23 deletions.
diff --git a/apps/web/app/abc/providers/storeProvider.tsx b/apps/web/app/abc/providers/storeProvider.tsx
@@ -151,18 +151,40 @@ export const StoreProvider = ({ children, questions }: StoreProviderProps) => {
           });
           return { ...state, questions: updatedQuestion };
         }),
-      // add edge cases
+      // check edge cases
       prevQuestion: () =>
-        set((state) => ({ currentQuestion: state.currentQuestion - 1 })),
+        set((state) => ({
+          currentQuestion:
+            state.currentQuestion !== null && state.currentQuestion !== 0
+              ? state.currentQuestion - 1
+              : null,
+        })),
       skipQuestion: () =>
-        set((state) => ({ currentQuestion: state.currentQuestion + 1 })),
+        set((state) => ({
+          currentQuestion:
+            state.currentQuestion !== null &&
+            state.currentQuestion !== questions.length
+              ? state.currentQuestion + 1
+              : null,
+        })),
       guideNumber: null,
       guide: guide,
       setGuideNumber: (guideNumber) =>
         set(() => ({ guideNumber: guideNumber })),
-      prevGuide: () => set((state) => ({ guideNumber: state.guideNumber - 1 })),
+      prevGuide: () =>
+        set((state) => ({
+          guideNumber:
+            state.guideNumber !== null && state.guideNumber !== 0
+              ? state.guideNumber - 1
+              : null,
+        })),
       nextGuide: () => {
-        set((state) => ({ guideNumber: state.guideNumber + 1 }));
+        set((state) => ({
+          guideNumber:
+            state.guideNumber !== null && state.guideNumber !== guide.length
+              ? state.guideNumber + 1
+              : null,
+        }));
       },
       setCurrentQuestion: (number) => set(() => ({ currentQuestion: number })),
     }));

diff --git a/apps/web/app/abc/utils/urlUpdater.tsx b/apps/web/app/abc/utils/urlUpdater.tsx
@@ -1,15 +1,17 @@
 "use client";
 import { useEffect } from "react";
 import { useQuestionsStore } from "../providers/storeProvider";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 
 type Props = {
   children: React.ReactNode;
 };
 
 export default function UrlUpdater({ children }: Props) {
   const path = usePathname();
+  const router = useRouter();
   const currentQuestion = useQuestionsStore((state) => state.currentQuestion);
+  const rekapitulace = useQuestionsStore((state) => state.isRekapitulace);
   const setIsRekapitulace = useQuestionsStore(
     (state) => state.setIsRekapitulace,
   );
@@ -19,43 +21,57 @@ export default function UrlUpdater({ children }: Props) {
   const guideNumber = useQuestionsStore((state) => state.guideNumber);
   const currentLocation = useQuestionsStore((state) => state.currentLocation);
 
-  // location setter
-  // is slow, make a better approach?
+  // Location setter
   useEffect(() => {
-    if (path.includes("rekapitulace")) {
+    if (
+      path.includes("rekapitulace") &&
+      rekapitulace !== true &&
+      currentLocation !== "rekapitulace"
+    ) {
       setIsRekapitulace(true);
       setCurrentLocation("rekapitulace");
-    } else if (path.includes("otazka")) {
+    } else if (
+      path.includes("otazka") &&
+      rekapitulace !== false &&
+      currentLocation !== "otazka"
+    ) {
       setIsRekapitulace(false);
       setCurrentLocation("otazka");
-    } else if (path.includes("navod")) {
+    } else if (path.includes("navod") && currentLocation !== "navod") {
       setCurrentLocation("navod");
     }
   }, [path]);
 
+  // Url updater
   useEffect(() => {
     function changeUrl() {
       // insert conditionals here for edge cases?
       if (currentLocation === "otazka") {
+        // refactor url structure
         history.replaceState({}, "", `/abc/otazka/${currentQuestion}`);
       } else if (currentLocation === "navod") {
+        // refactor url structure
         history.replaceState({}, "", `/abc/navod/${guideNumber}`);
+        // edge case if currentLocation null or undefined
+      } else if (currentLocation === undefined || currentLocation === null) {
+        router.push("/");
       }
     }
-    changeUrl();
-  }, [currentQuestion, guideNumber]);
-
-  useEffect(() => {
-    // change title
     function changeTitle() {
       if (currentLocation === "otazka") {
+        // refactor title structure
         document.title = `Otázka ${currentQuestion}`;
       } else if (currentLocation === "navod") {
+        // refactor title structure
         document.title = `Návod ${guideNumber}`;
+      } else {
+        // default title
+        document.title;
       }
     }
     changeTitle();
-  }, [currentLocation]);
+    changeUrl();
+  }, [currentQuestion, guideNumber, currentLocation]);
 
   return children;
 }
diff --git a/packages/design-system/src/ui/layout/questionWrapper.tsx b/packages/design-system/src/ui/layout/questionWrapper.tsx
@@ -76,9 +76,9 @@ export function QuestionWrapper({
               // fix k1 prefix issue!!!
             >
               {currentQuestion === 1 ? (
-                <span className="k1-hidden lg:k1-inline">
-                  <Link href="/abc/navod/1">Návod</Link>
-                </span>
+                <Link href="/abc/navod/1">
+                  <span className="k1-hidden lg:k1-inline">Návod</span>
+                </Link>
               ) : (
                 <span className="k1-hidden md:k1-block">
                   Předchozí{" "}
@@ -107,9 +107,9 @@ export function QuestionWrapper({
               onClick={skipQuestion}
             >
               {currentQuestion >= questionCount ? (
-                <span className="k1-hidden lg:k1-inline">
-                  <Link href="/abc/rekapitulace">Rekapitulace</Link>
-                </span>
+                <Link href="/abc/rekapitulace">
+                  <span className="k1-hidden lg:k1-inline">Rekapitulace</span>
+                </Link>
               ) : (
                 <span className="k1-hidden md:k1-block">
                   Přeskočit{" "}