wip: dynamic url test

kalkulacka-one · Dec 25, 2024 · cbfb930 · cbfb930
1 parent 2895c55
commit cbfb930
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/apps/web/app/xyz/[index]/page.tsx → apps/web/app/xyz/duperela/page.tsx b/apps/web/app/xyz/[index]/page.tsx → apps/web/app/xyz/duperela/page.tsx
@@ -9,13 +9,14 @@ export default function Page({ params }) {
   const prevQuestion = useQuestionsStore((state) => state.prevQuestion);
   const skipQuestion = useQuestionsStore((state) => state.skipQuestion);
   const router = useRouter();
+  const paramsNumber = Number(params.index);
 
   const prevClick = () => {
     if (currentQuestion < 1) {
       router.push("/xyz/navod");
     } else {
       prevQuestion();
-      router.push(`/xyz/${currentQuestion - 1}`);
+      router.push(`/xyz/${paramsNumber - 1}`);
     }
   };
 
@@ -24,7 +25,7 @@ export default function Page({ params }) {
       router.push("/xyz/rekapitulace");
     } else {
       skipQuestion();
-      router.push(`/xyz/${currentQuestion + 1}`);
+      router.push(`/xyz/${paramsNumber + 1}`);
     }
   };
 
@@ -37,7 +38,7 @@ export default function Page({ params }) {
             <QuestionWrapper
               key={`Question card id:${question.id}`}
               question={question}
-              currentQuestion={params.index}
+              currentQuestion={currentQuestion}
               questionCount={questions.length}
               skipQuestion={skipClick}
               prevQuestion={prevClick}

diff --git a/apps/web/app/xyz/page.tsx b/apps/web/app/xyz/page.tsx
@@ -3,6 +3,7 @@ import { useQuestionsStore } from "./store";
 import { QuestionWrapper, BottomBar } from "@repo/design-system/ui";
 import { useRouter } from "next/navigation";
 import type { ExtendedQuestions } from "./store";
+import { useEffect } from "react";
 
 export default function Page() {
   // cleanup and better naming
@@ -17,6 +18,16 @@ export default function Page() {
   const answerNo = useQuestionsStore((state) => state.answerNo);
   const router = useRouter();
 
+  // understand this approach more!
+  useEffect(() => {
+    if (currentQuestion) {
+      const slug = `/xyz/${currentQuestion}`;
+      if (window.location.pathname !== slug) {
+        window.history.replaceState(null, "", slug);
+      }
+    }
+  }, [currentQuestion]);
+
   const prevClick = () => {
     if (currentQuestion === 1) {
       router.push("/xyz/navod");