From 3734b99119e1a66e7b22e77b5fa28c97cdd4eb0c Mon Sep 17 00:00:00 2001
From: mewdev <michal.wierzgon@gmail.com>
Date: Wed, 1 Jan 2025 18:27:29 +0100
Subject: [PATCH] wip: toggleImportant (recapitulation)

---
 apps/web/app/xyz/rekapitulace/page.tsx        |  5 ++
 apps/web/app/xyz/store.ts                     | 16 ++++-
 .../src/ui/iconButton/starIconButton.tsx      |  3 +-
 .../recapitulationCard/recapitulationCard.tsx | 71 ++++++++++---------
 4 files changed, 61 insertions(+), 34 deletions(-)

diff --git a/apps/web/app/xyz/rekapitulace/page.tsx b/apps/web/app/xyz/rekapitulace/page.tsx
index 0587e8c..1a42338 100644
--- a/apps/web/app/xyz/rekapitulace/page.tsx
+++ b/apps/web/app/xyz/rekapitulace/page.tsx
@@ -7,6 +7,9 @@ export default function Page() {
   const questions = useQuestionsStore((state) => state.questions);
   const toggleYes = useQuestionsStore((state) => state.toggleYes);
   const toggleNo = useQuestionsStore((state) => state.toggleNo);
+  const toggleImportantRec = useQuestionsStore(
+    (state) => state.toggleImportantRec,
+  );
 
   function handleAnswer(event, buttonType) {
     // console.log(event.currentTarget.dataset.buttoncardid);
@@ -16,6 +19,8 @@ export default function Page() {
       toggleYes(id);
     } else if (buttonType === "No") {
       toggleNo(id);
+    } else if (buttonType === "Togglerecimportant") {
+      toggleImportantRec(id);
     }
   }
 
diff --git a/apps/web/app/xyz/store.ts b/apps/web/app/xyz/store.ts
index 3bfae96..6b91f8c 100644
--- a/apps/web/app/xyz/store.ts
+++ b/apps/web/app/xyz/store.ts
@@ -1,6 +1,5 @@
 import { create } from "zustand";
 import { Question } from "@repo/schema/dist";
-import { devtools } from "zustand/middleware";
 
 type ExtendedQuestions = Question & {
   isImportant: true | false | null;
@@ -16,8 +15,10 @@ type QuestionsStore = {
   toggleImportant: () => void;
   answerYes: () => void;
   answerNo: () => void;
+  // fix no unused vars error
   toggleYes: (cardId: string) => void;
   toggleNo: (cardId: string) => void;
+  toggleImportantRec: (cardId: string) => void;
   setCurrentQuestion: (number: number) => void;
 };
 
@@ -130,6 +131,19 @@ export const useQuestionsStore = create<QuestionsStore>((set) => ({
       });
       return { ...state, questions: updatedQuestions };
     }),
+  toggleImportantRec: (cardId) =>
+    set((state) => {
+      const updatedQuestions = state.questions.map((question) => {
+        if (cardId === question.id) {
+          return {
+            ...question,
+            isImportant: !question.isImportant,
+          };
+        }
+        return { ...question };
+      });
+      return { ...state, questions: updatedQuestions };
+    }),
 }));
 
 export type { ExtendedQuestions };
diff --git a/packages/design-system/src/ui/iconButton/starIconButton.tsx b/packages/design-system/src/ui/iconButton/starIconButton.tsx
index cadd56e..15b0777 100644
--- a/packages/design-system/src/ui/iconButton/starIconButton.tsx
+++ b/packages/design-system/src/ui/iconButton/starIconButton.tsx
@@ -6,7 +6,7 @@ import { StarIconFilled } from "@repo/design-system/icons";
 type Props = {
   children?: React.ReactNode;
   starPressed?: boolean;
-  onClick: () => void;
+  onClick: (event) => void;
 } & Omit<
   ComponentProps<typeof ToggleIconButton>,
   "iconDefault" | "iconPressed"
@@ -24,6 +24,7 @@ const StarIconButton = ({
       iconPressed={StarIconFilled}
       onClick={onClick}
       togglePressed={starPressed}
+      data-togleiconbuttonid="Dupa"
       {...props}
     >
       {children}
diff --git a/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx b/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx
index e1af1ec..61525c9 100644
--- a/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx
+++ b/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx
@@ -12,6 +12,8 @@ type ExtendedQuestions = Question & {
   answerType: true | false | null | undefined;
 };
 
+// type answerType: true || false || null || undefined;
+
 export interface Props {
   question: ExtendedQuestions;
   currentQuestion: number;
@@ -101,7 +103,10 @@ export function RecapitulationCard({
     >
       <div className="k1-flex k1-items-center k1-justify-between">
         {/* toggle star */}
-        <StarIconButton onClick={() => alert("Important toggled")} />
+        <StarIconButton
+          data-togglebuttonid="Testid"
+          onClick={(event) => onClick(event, "Togglerecimportant")}
+        />
 
         <div className="k1-mr-auto k1-flex k1-flex-col">
           <div className="k1-flex k1-flex-wrap k1-items-center k1-gap-4">
@@ -121,39 +126,41 @@ export function RecapitulationCard({
         <DetailIconButton onClick={toggleDetail} />
         <div>{switchButton(answerType)}</div>
       </div>
-      <div className="k1-flex k1-w-full">
-        <Button
-          kind="inverse"
-          color="primary"
-          size="default"
-          hasIcon
-          icon={YesIcon}
-          compactable
-          wider
-          data-buttonCardId={id}
-          onClick={(event) => onClick(event, "Yes")}
-        >
-          Ano
-        </Button>
-        <Button
-          kind="inverse"
-          color="secondary"
-          size="default"
-          hasIcon
-          icon={NoIcon}
-          compactable
-          wider
-          data-buttonCardId={id}
-          onClick={(event) => onClick(event, "No")}
-        >
-          Ne
-        </Button>
-      </div>
       {detailToggled && (
         <div>
-          <p className="k1-text-base k1-font-normal k1-text-neutral">
-            {detail}
-          </p>
+          <div className="k1-flex k1-w-full">
+            <Button
+              kind="inverse"
+              color="primary"
+              size="default"
+              hasIcon
+              icon={YesIcon}
+              compactable
+              wider
+              data-buttonCardId={id}
+              onClick={(event) => onClick(event, "Yes")}
+            >
+              Ano
+            </Button>
+            <Button
+              kind="inverse"
+              color="secondary"
+              size="default"
+              hasIcon
+              icon={NoIcon}
+              compactable
+              wider
+              data-buttonCardId={id}
+              onClick={(event) => onClick(event, "No")}
+            >
+              Ne
+            </Button>
+          </div>
+          <div>
+            <p className="k1-text-base k1-font-normal k1-text-neutral">
+              {detail}
+            </p>
+          </div>
         </div>
       )}
     </Card>