wip: testing urlUpdater

kalkulacka-one · Jan 15, 2025 · 711874a · 711874a
1 parent 1752974
commit 711874a
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 25 deletions.
diff --git a/apps/web/app/abc/header.tsx b/apps/web/app/abc/header.tsx
@@ -4,11 +4,13 @@ import { useQuestionsStore } from "./providers/storeProvider";
 
 export default function Header() {
   const isRekapitulace = useQuestionsStore((state) => state.isRekapitulace);
+  const currentLocation = useQuestionsStore((state) => state.currentLocation);
 
   return (
     // sticky implementation?
     <header className="flex h-14 w-screen items-center justify-center bg-primary">
       Volební kalkulačka {isRekapitulace ? "Rekap true" : "Rekap false"}
+      Location: {currentLocation}
     </header>
   );
 }
diff --git a/apps/web/app/abc/navod/[guideNumber]/page.tsx b/apps/web/app/abc/navod/[guideNumber]/page.tsx
@@ -152,7 +152,7 @@ export default function Page() {
                 icon={ArrowIconRight}
                 hasIcon
               >
-                <Link href="/xyz/1">První otázka</Link>
+                <Link href="/abc/otazka/1">První otázka</Link>
               </Button>
             )}
           </div>
@@ -162,7 +162,7 @@ export default function Page() {
             className={`col-[1_/_span_2] justify-self-center ${guideNumber === 4 ? "invisible" : null}`}
           >
             {/* fix link wrap, should be link in style of a button! */}
-            <Link href="/abc/otazka">
+            <Link href="/abc/otazka/1">
               <Button
                 fitContent
                 kind="link"

diff --git a/apps/web/app/abc/providers/storeProvider.tsx b/apps/web/app/abc/providers/storeProvider.tsx
@@ -30,6 +30,10 @@ type Store = {
   guideNumber: number;
   guide: Guide;
   isRekapitulace: boolean;
+  currentLocation: "navod" | "otazka" | "rekapitulace" | null;
+  setCurrentLocation: (
+    currentLocation: "navod" | "otazka" | "rekapitulace",
+  ) => void;
   setCurrentQuestion: (number: number) => void;
   setIsRekapitulace: (rekapitulaceState: boolean) => void;
 };
@@ -48,6 +52,9 @@ export const StoreProvider = ({ children, questions }: StoreProviderProps) => {
   const storeRef = useRef<StoreApi<Store> | undefined>();
   if (!storeRef.current) {
     storeRef.current = createStore<Store>((set) => ({
+      currentLocation: null,
+      setCurrentLocation: (currentLocation) =>
+        set(() => ({ currentLocation: currentLocation })),
       setIsRekapitulace: (rekapitulaceState) =>
         set(() => ({ isRekapitulace: rekapitulaceState })),
       isRekapitulace: false,

diff --git a/apps/web/app/abc/utils/urlUpdater.tsx b/apps/web/app/abc/utils/urlUpdater.tsx
@@ -2,47 +2,61 @@
 import { useEffect } from "react";
 import { useQuestionsStore } from "../providers/storeProvider";
 import { usePathname } from "next/navigation";
-import { stackTraceLimit } from "postcss/lib/css-syntax-error";
 
 type Props = {
   children: React.ReactNode;
 };
 
 export default function UrlUpdater({ children }: Props) {
   const path = usePathname();
-  const isRekapitulace = useQuestionsStore((state) => state.isRekapitulace);
+  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);
+
+  console.log(path);
 
-  // rekapitulace setter
+  // location setter
   // is slow, make a better approach?
   useEffect(() => {
-    if (path.includes("rekapitulace") && !isRekapitulace) {
-      console.log("Rekapitulace");
+    if (path.includes("rekapitulace")) {
       setIsRekapitulace(true);
-    } else if (path.includes("otazka") && isRekapitulace) {
+      setCurrentLocation("rekapitulace");
+    } else if (path.includes("otazka")) {
       setIsRekapitulace(false);
+      setCurrentLocation("otazka");
+    } else if (path.includes("navod")) {
+      setCurrentLocation("navod");
     }
   }, []);
 
-  // const currentQuestion = useQuestionsStore((state) => state.currentQuestion);
-
-  // useEffect(() => {
-  //   // cleanups ?
-  //   // change url
-  //   function changeUrl() {
-  //     // insert conditionals here for edge cases?
-  //     history.replaceState({}, "", `/abc/${currentQuestion}`);
-  //   }
-  //   // change title
-  //   function changeTitle() {
-  //     // insert conditionals here for edge cases?
-  //     document.title = `Otázka ${currentQuestion}`;
-  //   }
-  //   // changeTitle();
-  //   // changeUrl();
-  // }, [currentQuestion]);
+  useEffect(() => {
+    // cleanups ?
+    // change url
+    function changeUrl() {
+      // insert conditionals here for edge cases?
+      if (currentLocation === "otazka") {
+        history.replaceState({}, "", `/abc/otazka/${currentQuestion}`);
+      } else if (currentLocation === "navod") {
+        history.replaceState({}, "", `/abc/navod/${guideNumber}`);
+      }
+    }
+    // change title
+    function changeTitle() {
+      if (currentLocation === "otazka") {
+        document.title = `Otázka ${currentQuestion}`;
+      } else if (currentLocation === "navod") {
+        document.title = `Návod ${guideNumber}`;
+      }
+    }
+    changeTitle();
+    changeUrl();
+  }, [currentQuestion, guideNumber]);
 
   return children;
 }