wip: url dynamic changing, updated button urls

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

Hide file tree

Showing 5 changed files with 54 additions and 15 deletions.
diff --git a/apps/web/app/abc/navod/[guideNumber]/page.tsx b/apps/web/app/abc/navod/[guideNumber]/page.tsx
@@ -9,13 +9,22 @@ import {
   ArrowIconRight,
   ForwardIcon,
 } from "@repo/design-system/icons";
+import { useParams } from "next/navigation";
+import { useEffect } from "react";
 
 export default function Page() {
+  const params = useParams();
   const guide = useQuestionsStore((state) => state.guide);
   const guideNumber = useQuestionsStore((state) => state.guideNumber);
+  const setGuideNumber = useQuestionsStore((state) => state.setGuideNumber);
   const prevGuide = useQuestionsStore((state) => state.prevGuide);
   const nextGuide = useQuestionsStore((state) => state.nextGuide);
 
+  // ** NEEEDS REFACTOR! ** set question from params
+  useEffect(() => {
+    setGuideNumber(Number(params.guideNumber));
+  }, []);
+
   const guideCardSwitcher = (number: number) => {
     switch (number) {
       case 1: {
@@ -144,16 +153,18 @@ export default function Page() {
                 Další krok
               </Button>
             ) : (
-              <Button
-                kind="filled"
-                size="default"
-                color="primary"
-                iconPosition="right"
-                icon={ArrowIconRight}
-                hasIcon
-              >
-                <Link href="/abc/otazka/1">První otázka</Link>
-              </Button>
+              <Link href="/abc/otazka/1">
+                <Button
+                  kind="filled"
+                  size="default"
+                  color="primary"
+                  iconPosition="right"
+                  icon={ArrowIconRight}
+                  hasIcon
+                >
+                  První otázka
+                </Button>
+              </Link>
             )}
           </div>
           {/* grid col 4 */}

diff --git a/apps/web/app/abc/otazka/[questionNumber]/page.tsx b/apps/web/app/abc/otazka/[questionNumber]/page.tsx
@@ -3,21 +3,32 @@
 import { BottomBar, QuestionWrapper } from "@repo/design-system/ui";
 import { useQuestionsStore } from "../../providers/storeProvider";
 import { Question } from "@repo/schema/dist";
+import { useEffect } from "react";
+import { useParams } from "next/navigation";
 
 type ExtendedQuestions = Question & {
   isImportant: true | false | null;
   answerType: true | false | null;
 };
 
 export default function Page() {
+  const params = useParams();
   const questions = useQuestionsStore((state) => state.questions);
   const currentQuestion = useQuestionsStore((state) => state.currentQuestion);
+  const setCurrentQuestion = useQuestionsStore(
+    (state) => state.setCurrentQuestion,
+  );
   const prevQuestion = useQuestionsStore((state) => state.prevQuestion);
   const skipQuestion = useQuestionsStore((state) => state.skipQuestion);
   const toggleImportant = useQuestionsStore((state) => state.toggleImportant);
   const answerYes = useQuestionsStore((state) => state.answerYes);
   const answerNo = useQuestionsStore((state) => state.answerNo);
 
+  // ** NEEEDS REFACTOR! ** set question from params
+  useEffect(() => {
+    setCurrentQuestion(Number(params.questionNumber));
+  }, []);
+
   return (
     <>
       <main className="relative flex h-screen items-center justify-center">

diff --git a/apps/web/app/abc/providers/storeProvider.tsx b/apps/web/app/abc/providers/storeProvider.tsx
@@ -31,6 +31,7 @@ type Store = {
   guide: Guide;
   isRekapitulace: boolean;
   currentLocation: "navod" | "otazka" | "rekapitulace" | null;
+  setGuideNumber: (guideNumber: number) => void;
   setCurrentLocation: (
     currentLocation: "navod" | "otazka" | "rekapitulace",
   ) => void;
@@ -120,6 +121,8 @@ export const StoreProvider = ({ children, questions }: StoreProviderProps) => {
         set((state) => ({ currentQuestion: state.currentQuestion + 1 })),
       guideNumber: 1,
       guide: guide,
+      setGuideNumber: (guideNumber) =>
+        set(() => ({ guideNumber: guideNumber })),
       prevGuide: () => set((state) => ({ guideNumber: state.guideNumber - 1 })),
       nextGuide: () => {
         set((state) => ({ guideNumber: state.guideNumber + 1 }));

diff --git a/apps/web/app/abc/utils/urlUpdater.tsx b/apps/web/app/abc/utils/urlUpdater.tsx
@@ -36,7 +36,7 @@ export default function UrlUpdater({ children }: Props) {
   }, []);
 
   useEffect(() => {
-    // cleanups ?
+    // !!! implement cleanups!
     // change url
     function changeUrl() {
       // insert conditionals here for edge cases?

diff --git a/packages/design-system/src/ui/layout/questionWrapper.tsx b/packages/design-system/src/ui/layout/questionWrapper.tsx
@@ -2,6 +2,7 @@ import { Button } from "@repo/design-system/ui";
 import { ArrowIconLeft, ArrowIconRight } from "@repo/design-system/icons";
 import { QuestionCard } from "@repo/design-system/ui";
 import type { Question } from "@repo/schema/dist/question.schema";
+import Link from "next/link";
 
 type ExtendedQuestions = Question & {
   isImportant: true | false | null;
@@ -28,6 +29,7 @@ export function QuestionWrapper({
     <>
       {/* content */}
       {/* mobile arrow bar */}
+      {/* button link wrapping solve! */}
       <div className="k1-absolute k1-top-0 k1-w-dvw k1-flex k1-justify-between sm:k1-hidden">
         <Button
           hasIcon
@@ -37,7 +39,11 @@ export function QuestionWrapper({
           fitContent
           onClick={prevQuestion}
         >
-          {currentQuestion === 1 ? "Návod" : "Předchozí"}
+          {currentQuestion === 1 ? (
+            <Link href="/abc/navod">Návod</Link>
+          ) : (
+            "Předchozí"
+          )}
         </Button>
         <Button
           hasIcon
@@ -47,7 +53,11 @@ export function QuestionWrapper({
           fitContent
           onClick={skipQuestion}
         >
-          {currentQuestion >= questionCount ? "Rekapitulace" : "Přeskočit"}
+          {currentQuestion >= questionCount ? (
+            <Link href="/abc/rekapitulace">Rekapitulace</Link>
+          ) : (
+            "Přeskočit"
+          )}
         </Button>
       </div>
 
@@ -66,7 +76,9 @@ export function QuestionWrapper({
               // fix k1 prefix issue!!!
             >
               {currentQuestion === 1 ? (
-                <span className="k1-hidden lg:k1-inline">Návod</span>
+                <span className="k1-hidden lg:k1-inline">
+                  <Link href="/abc/navod">Návod</Link>
+                </span>
               ) : (
                 <span className="k1-hidden md:k1-block">
                   Předchozí{" "}
@@ -95,7 +107,9 @@ export function QuestionWrapper({
               onClick={skipQuestion}
             >
               {currentQuestion >= questionCount ? (
-                <span className="k1-hidden lg:k1-inline">Rekapitulace</span>
+                <span className="k1-hidden lg:k1-inline">
+                  <Link href="/abc/rekapitulace">Rekapitulace</Link>
+                </span>
               ) : (
                 <span className="k1-hidden md:k1-block">
                   Přeskočit{" "}