wip: fixed urlUpdater url glitches

apps/web/app/abc/providers/storeProvider.tsx

@@ -35,10 +35,15 @@ type Store = {
   guideNumber: number | null;
   guide: Guide;
   isRekapitulace: boolean;
-  currentLocation: "navod" | "otazka" | "rekapitulace" | "vysledky" | null;
+  currentLocation: "navod" | "otazka" | "rekapitulace" | "vysledky" | "default";
   setGuideNumber: (guideNumber: number) => void;
   setCurrentLocation: (
-    currentLocation: "navod" | "otazka" | "rekapitulace" | "vysledky",
+    currentLocation:
+      | "navod"
+      | "otazka"
+      | "rekapitulace"
+      | "vysledky"
+      | "default",
   ) => void;
   setCurrentQuestion: (number: number) => void;
   setIsRekapitulace: (rekapitulaceState: boolean) => void;
@@ -58,7 +63,7 @@ export const StoreProvider = ({ children, questions }: StoreProviderProps) => {
   const storeRef = useRef<StoreApi<Store> | undefined>();
   if (!storeRef.current) {
     storeRef.current = createStore<Store>((set) => ({
-      currentLocation: null,
+      currentLocation: "default",
       setCurrentLocation: (currentLocation) =>
         set(() => ({ currentLocation: currentLocation })),
       setIsRekapitulace: (rekapitulaceState) =>
@@ -157,15 +162,15 @@ export const StoreProvider = ({ children, questions }: StoreProviderProps) => {
           currentQuestion:
             state.currentQuestion !== null && state.currentQuestion !== 0
               ? state.currentQuestion - 1
-              : null,
+              : state.currentQuestion,
         })),
       skipQuestion: () =>
         set((state) => ({
           currentQuestion:
             state.currentQuestion !== null &&
             state.currentQuestion !== questions.length
               ? state.currentQuestion + 1
-              : null,
+              : state.currentQuestion,
         })),
       guideNumber: null,
       guide: guide,

apps/web/app/abc/utils/urlUpdater.tsx

@@ -8,7 +8,7 @@ type Props = {
 };
 
 export default function UrlUpdater({ children }: Props) {
-  const path = usePathname();
+  const currentUrl = usePathname();
   const currentQuestion = useQuestionsStore((state) => state.currentQuestion);
   const setIsRekapitulace = useQuestionsStore(
     (state) => state.setIsRekapitulace,
@@ -20,56 +20,50 @@ export default function UrlUpdater({ children }: Props) {
   const currentLocation = useQuestionsStore((state) => state.currentLocation);
 
   useEffect(() => {
-    // store location setter
     function locationSetter() {
-      if (path.includes("rekapitulace")) {
+      if (
+        currentUrl.includes("rekapitulace") &&
+        currentLocation !== "rekapitulace"
+      ) {
         setCurrentLocation("rekapitulace");
         setIsRekapitulace(true);
-      } else if (path.includes("otazka")) {
+      } else if (
+        currentUrl.includes("otazka") &&
+        currentLocation !== "otazka"
+      ) {
         setCurrentLocation("otazka");
         setIsRekapitulace(false);
-      } else if (path.includes("navod")) {
+      } else if (currentUrl.includes("navod") && currentLocation !== "navod") {
         setCurrentLocation("navod");
-      } else if (path.includes("vysledky")) {
+        setIsRekapitulace(false);
+      } else if (
+        currentUrl.includes("vysledky") &&
+        currentLocation !== "vysledky"
+      ) {
         setCurrentLocation("vysledky");
         setIsRekapitulace(false);
       }
     }
-    // url setter
-    function changeUrl() {
-      // insert conditionals here for edge cases?
-      if (currentLocation === "otazka" && currentQuestion !== null) {
-        // refactor url structure
-        history.replaceState({}, "", `/abc/otazka/${currentQuestion}`);
-      } else if (currentLocation === "navod") {
-        // refactor url structure
-        history.replaceState({}, "", `/abc/navod/${guideNumber}`);
-      } else if (currentLocation === "rekapitulace") {
-        history.replaceState({}, "", `/abc/rekapitulace`);
-      } else if (currentLocation === "vysledky") {
-        history.replaceState({}, "", `/abc/vysledky`);
-      }
-    }
-    // title setter
+
+    locationSetter();
+  }, [currentUrl, currentLocation]);
+
+  useEffect(() => {
     function changeTitle() {
       if (currentLocation === "otazka") {
-        // refactor title structure
         document.title = `Otázka ${currentQuestion}`;
+        history.replaceState({}, "", `/abc/otazka/${currentQuestion}`);
       } else if (currentLocation === "navod") {
-        // refactor title structure
         document.title = `Návod ${guideNumber}`;
+        history.replaceState({}, "", `/abc/navod/${guideNumber}`);
       } else if (currentLocation === "rekapitulace") {
         document.title = `Rekapitulace`;
       } else if (currentLocation === "vysledky") {
         document.title = `Výsledky`;
       }
     }
-
-    locationSetter();
     changeTitle();
-    changeUrl();
-  }, [path, currentQuestion, guideNumber, currentLocation]);
-
+  }, [guideNumber, currentQuestion]);
   return children;
 }
 

apps/web/app/abc/utils/urlUpdaterBackup.tsx

@@ -0,0 +1,77 @@
+"use client";
+import { useEffect } from "react";
+import { useQuestionsStore } from "../providers/storeProvider";
+import { usePathname } from "next/navigation";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function UrlUpdater({ children }: Props) {
+  const path = usePathname();
+  const currentQuestion = useQuestionsStore((state) => state.currentQuestion);
+  const setIsRekapitulace = useQuestionsStore(
+    (state) => state.setIsRekapitulace,
+  );
+  const setCurrentLocation = useQuestionsStore(
+    (state) => state.setCurrentLocation,
+  );
+  const guideNumber = useQuestionsStore((state) => state.guideNumber);
+  const currentLocation = useQuestionsStore((state) => state.currentLocation);
+
+  useEffect(() => {
+    // store location setter
+    function locationSetter() {
+      if (path.includes("rekapitulace")) {
+        setCurrentLocation("rekapitulace");
+        setIsRekapitulace(true);
+      } else if (path.includes("otazka")) {
+        setCurrentLocation("otazka");
+        setIsRekapitulace(false);
+      } else if (path.includes("navod")) {
+        setCurrentLocation("navod");
+      } else if (path.includes("vysledky")) {
+        setCurrentLocation("vysledky");
+        setIsRekapitulace(false);
+      }
+    }
+    // url setter
+    function changeUrl() {
+      // insert conditionals here for edge cases?
+      if (currentLocation === "otazka" && currentQuestion !== null) {
+        // refactor url structure
+        history.replaceState({}, "", `/abc/otazka/${currentQuestion}`);
+      } else if (currentLocation === "navod") {
+        // refactor url structure
+        history.replaceState({}, "", `/abc/navod/${guideNumber}`);
+      } else if (currentLocation === "rekapitulace") {
+        history.replaceState({}, "", `/abc/rekapitulace`);
+      } else if (currentLocation === "vysledky") {
+        history.replaceState({}, "", `/abc/vysledky`);
+      }
+    }
+    // title setter
+    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 if (currentLocation === "rekapitulace") {
+        document.title = `Rekapitulace`;
+      } else if (currentLocation === "vysledky") {
+        document.title = `Výsledky`;
+      }
+    }
+
+    locationSetter();
+    changeTitle();
+    changeUrl();
+  }, [path, currentQuestion, guideNumber, currentLocation]);
+
+  return children;
+}
+
+// TODO:
+// 1. needs refactoring (url updates glitch)