wip: recapitulation card interactivity working

kalkulacka-one · Dec 31, 2024 · addfa8c · addfa8c
1 parent 5e6b20f
commit addfa8c
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 13 deletions.
diff --git a/apps/web/app/xyz/rekapitulace/page.tsx b/apps/web/app/xyz/rekapitulace/page.tsx
@@ -2,18 +2,35 @@
 import { ArrowIconRight } from "@repo/design-system/icons";
 import { Button, RecapitulationCard } from "@repo/design-system/ui";
 import { useQuestionsStore } from "../store";
+import { useEffect } from "react";
 
 export default function Page() {
   const questions = useQuestionsStore((state) => state.questions);
-  const answerYes = useQuestionsStore((state) => state.answerYes);
-  const answerNo = useQuestionsStore((state) => state.answerNo);
+  const toggleYes = useQuestionsStore((state) => state.toggleYes);
+  const toggleNo = useQuestionsStore((state) => state.toggleNo);
+  // const answerYes = useQuestionsStore((state) => state.answerYes);
+  // const answerNo = useQuestionsStore((state) => state.answerNo);
 
-  function handleAnswer(buttonType) {
-    if (buttonType === "Ano") {
-      answerYes();
-    } else if (buttonType === "Ne") {
-      answerNo();
+  useEffect(() => {
+    console.log("Rerender");
+  }, [questions]);
+
+  function handleAnswer(event, buttonType) {
+    // console.log(event.currentTarget.dataset.buttoncardid);
+    const id = event.currentTarget.dataset.buttoncardid;
+
+    if (buttonType === "Yes") {
+      toggleYes(id);
+    } else if (buttonType === "No") {
+      toggleNo(id);
     }
+    // if (buttonType === "Ano") {
+    //   // alert("Ano");
+    //   console.log(questions[0].answerType);
+    // } else if (buttonType === "Ne") {
+    //   // alert("Ne");
+    //   console.log(questions[0].answerType);
+    // }
   }
 
   return (

diff --git a/apps/web/app/xyz/store.ts b/apps/web/app/xyz/store.ts
@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { Question } from "@repo/schema/dist";
+import { devtools } from "zustand/middleware";
 
 type ExtendedQuestions = Question & {
   isImportant: true | false | null;
@@ -15,6 +16,8 @@ type QuestionsStore = {
   toggleImportant: () => void;
   answerYes: () => void;
   answerNo: () => void;
+  toggleYes: (cardId: string) => void;
+  toggleNo: (cardId: string) => void;
   setCurrentQuestion: (number: number) => void;
 };
 
@@ -51,7 +54,9 @@ export const useGuideStore = create<GuideStore>((set) => ({
   prevStep: () => set((state) => ({ currentStep: state.currentStep - 1 })),
 }));
 
-export const useQuestionsStore = create<QuestionsStore>((set) => ({
+// swtich off debug mode
+
+export const useQuestionsStore = create((set) => ({
   questions: [],
   currentQuestion: 0,
   questionTotal: 4,
@@ -99,6 +104,32 @@ export const useQuestionsStore = create<QuestionsStore>((set) => ({
       return { ...state, questions: updatedQuestions };
     }),
   setCurrentQuestion: (number) => set(() => ({ currentQuestion: number })),
+  toggleYes: (cardId) =>
+    set((state) => {
+      const updatedQuestions = state.questions.map((question) => {
+        if (cardId === question.id) {
+          return {
+            ...question,
+            answerType: true,
+          };
+        }
+        return { ...question };
+      });
+      return { ...state, questions: updatedQuestions };
+    }),
+  toggleNo: (cardId) =>
+    set((state) => {
+      const updatedQuestions = state.questions.map((question) => {
+        if (cardId === question.id) {
+          return {
+            ...question,
+            answerType: false,
+          };
+        }
+        return { ...question };
+      });
+      return { ...state, questions: updatedQuestions };
+    }),
 }));
 
 export type { ExtendedQuestions };
diff --git a/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx b/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx
@@ -6,6 +6,7 @@ import { StarIconButton } from "@repo/design-system/ui";
 import { DetailIconButton } from "@repo/design-system/ui";
 import { useState } from "react";
 import type { Question } from "@repo/schema/dist/question.schema";
+import { useQuestionsStore } from "../../../../../apps/web/app/xyz/store";
 
 type ExtendedQuestions = Question & {
   isImportant: true | false | null;
@@ -16,7 +17,7 @@ export interface Props {
   question: ExtendedQuestions;
   currentQuestion: number;
   questionCount: number;
-  onClick: (buttonType) => void;
+  onClick: (event, buttonType) => void;
 }
 
 export function RecapitulationCard({
@@ -77,14 +78,25 @@ export function RecapitulationCard({
         );
       }
       case undefined: {
-        return "Neutral";
+        return (
+          <Button
+            compactable
+            fitContent
+            wider
+            kind="inverse"
+            color="neutral"
+            icon={NeutralIcon}
+          >
+            Nevím
+          </Button>
+        );
       }
     }
   }
 
   return (
     <Card
-      id={id}
+      data-card-id={id}
       corner="topLeft"
       className="k1-flex k1-w-full k1-flex-col  k1-justify-between k1-gap-4 k1-p-customMobile md:k1-p-customDesktop"
     >
@@ -119,7 +131,8 @@ export function RecapitulationCard({
           icon={YesIcon}
           compactable
           wider
-          onClick={() => onClick("Ano")}
+          data-buttonCardId={id}
+          onClick={(event) => onClick(event, "Yes")}
         >
           Ano
         </Button>
@@ -131,7 +144,8 @@ export function RecapitulationCard({
           icon={NoIcon}
           compactable
           wider
-          onClick={() => onClick("Ne")}
+          data-buttonCardId={id}
+          onClick={(event) => onClick(event, "No")}
         >
           Ne
         </Button>