wip: refactor toggleImportant functionality in storeProvider, refacto…

…red redundant id data attributes and improved recapitulationCard layout
kalkulacka-one · Jan 13, 2025 · 0dc8078 · 0dc8078
1 parent 4eaa2a6
commit 0dc8078
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 77 deletions.
diff --git a/apps/web/app/abc/[questionNumber]/page.tsx b/apps/web/app/abc/[questionNumber]/page.tsx
@@ -15,9 +15,16 @@ export default function Page() {
   const prevQuestion = useQuestionsStore((state) => state.prevQuestion);
   const skipQuestion = useQuestionsStore((state) => state.skipQuestion);
   const toggleImportant = useQuestionsStore((state) => state.toggleImportant);
+  const toggleImportantTest = useQuestionsStore(
+    (state) => state.toggleImportantTest,
+  );
   const answerYes = useQuestionsStore((state) => state.answerYes);
   const answerNo = useQuestionsStore((state) => state.answerNo);
 
+  const tglImp = () => {
+    toggleImportantTest(currentQuestion);
+  };
+
   const yesClick = () => {
     answerYes();
     skipQuestion();
@@ -56,7 +63,7 @@ export default function Page() {
               questions={questions}
               currentQuestion={currentQuestion}
               questionTotal={questions.length}
-              toggleImportant={toggleImportant}
+              toggleImportant={tglImp}
               yesClick={yesClick}
               noClick={noClick}
               starPressed={question.isImportant ? true : undefined}

diff --git a/apps/web/app/abc/navod/[guideNumber]/page.tsx b/apps/web/app/abc/navod/[guideNumber]/page.tsx
@@ -161,6 +161,7 @@ export default function Page() {
           <div
             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/1">
               <Button
                 fitContent

diff --git a/apps/web/app/abc/providers/storeProvider.tsx b/apps/web/app/abc/providers/storeProvider.tsx
@@ -19,17 +19,16 @@ type Guide = { contentBefore?: string; contentAfter?: string }[];
 type Store = {
   questions: ExtendedQuestions[];
   currentQuestion: number;
+  toggleImportant: (currentQuestion: number) => void;
   prevQuestion: () => void;
   skipQuestion: () => void;
   nextGuide: () => void;
   prevGuide: () => void;
-  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;
   guideNumber: number;
   guide: Guide;
@@ -51,6 +50,20 @@ export const StoreProvider = ({ children, questions }: StoreProviderProps) => {
     storeRef.current = createStore<Store>((set) => ({
       questions,
       currentQuestion: 1,
+      toggleImportant: (currentQuestion) =>
+        set((state) => {
+          const updatedQuestion = state.questions.map((question) => {
+            if (questions[currentQuestion - 1]?.id === question.id) {
+              return {
+                ...question,
+                isImportant: !question.isImportant,
+              };
+            }
+            return { ...question };
+          });
+          return { ...state, questions: updatedQuestion };
+        }),
+      // add edge cases
       prevQuestion: () =>
         set((state) => ({ currentQuestion: state.currentQuestion - 1 })),
       skipQuestion: () =>
@@ -61,19 +74,6 @@ export const StoreProvider = ({ children, questions }: StoreProviderProps) => {
       nextGuide: () => {
         set((state) => ({ guideNumber: state.guideNumber + 1 }));
       },
-      toggleImportant: () =>
-        set((state) => {
-          const updatedQuestions = state.questions.map((question, index) => {
-            if (index + 1 === state.currentQuestion) {
-              return {
-                ...question,
-                isImportant: !question.isImportant,
-              };
-            }
-            return { ...question };
-          });
-          return { ...state, questions: updatedQuestions };
-        }),
       answerYes: () =>
         set((state) => {
           const updatedQuestions = state.questions.map((question, index) => {
@@ -127,19 +127,6 @@ export const StoreProvider = ({ children, questions }: StoreProviderProps) => {
           });
           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 };
-        }),
     }));
   }
 

diff --git a/apps/web/app/abc/rekapitulace/page.tsx b/apps/web/app/abc/rekapitulace/page.tsx
@@ -6,46 +6,54 @@ import {
 } from "@repo/design-system/icons";
 import { Blobs, Button, RecapitulationCard } from "@repo/design-system/ui";
 import { useQuestionsStore } from "../providers/storeProvider";
+import Link from "next/link";
 
 export default function Page() {
   const questions = useQuestionsStore((state) => state.questions);
-  const handleAnswer = () => {
-    alert("Clicked!");
-  };
+  const toggleImportant = useQuestionsStore((state) => state.toggleImportant);
+
   return (
     <>
       <Blobs />
       {/* header */}
       <header className="sticky top-0 grid grid-cols-[auto_1fr_auto] items-center gap-8 bg-white p-4 sm:justify-center sm:p-8">
-        <Button
-          hasIcon
-          icon={ArrowIconLeft}
-          iconPosition="left"
-          kind="link"
-          fitContent
-          size="auto"
-        />
+        {/* fix link wrap, should be link in style of a button! */}
+        {/*Link to the last question "current quesiton" */}
+        <Link href="/abc/1">
+          <Button
+            hasIcon
+            icon={ArrowIconLeft}
+            iconPosition="left"
+            kind="link"
+            fitContent
+            size="auto"
+          />
+        </Link>
+
         {/* replace with typo compoment */}
         <h2 className="text-5xl  font-bold tracking-snug text-neutral-strong sm:mr-auto">
           Rekapitulace
         </h2>
         {/* twmerge button fix here */}
         <div className="hidden sm:block">
-          <Button
-            hasIcon
-            kind="filled"
-            size="default"
-            color="primary"
-            iconPosition="right"
-            fitContent
-            icon={ArrowIconRight}
-          >
-            <div className="flex">
-              {/* margin or gap? */}
-              <PercentageIcon className="mr-4 size-6" />
-              Zobrazit výsledky
-            </div>
-          </Button>
+          {/* fix link wrap, should be link in style of a button! */}
+          <Link href="/abc/vysledky">
+            <Button
+              hasIcon
+              kind="filled"
+              size="default"
+              color="primary"
+              iconPosition="right"
+              fitContent
+              icon={ArrowIconRight}
+            >
+              <div className="flex">
+                {/* margin or gap? */}
+                <PercentageIcon className="mr-4 size-6" />
+                Zobrazit výsledky
+              </div>
+            </Button>
+          </Link>
         </div>
       </header>
       <main className="grid grid-cols-[clamp(32rem,50vw,48rem)] justify-center gap-4 p-4">
@@ -63,24 +71,35 @@ export default function Page() {
                 currentQuestion={currentQuestion}
                 questionCount={questions.length}
                 question={question}
-                onClick={handleAnswer}
+                onClick={(buttonType) => {
+                  if (buttonType === "toggleImportant") {
+                    toggleImportant(index + 1);
+                  } else if (buttonType === "Yes") {
+                    alert("Yes");
+                  } else if (buttonType === "No") {
+                    alert("No");
+                  }
+                }}
               />
             );
           })}
         </div>
       </main>
       {/* bottom bar */}
       <div className="sticky bottom-0 bg-white p-4 sm:hidden">
-        <Button
-          hasIcon
-          kind="filled"
-          size="default"
-          color="primary"
-          iconPosition="right"
-          icon={ArrowIconRight}
-        >
-          Zobrazit výsledky
-        </Button>
+        {/* fix link wrap, should be link in style of a button! */}
+        <Link href="/abc/vysledky">
+          <Button
+            hasIcon
+            kind="filled"
+            size="default"
+            color="primary"
+            iconPosition="right"
+            icon={ArrowIconRight}
+          >
+            Zobrazit výsledky
+          </Button>
+        </Link>
       </div>
     </>
   );

diff --git a/apps/web/app/abc/vysledky/page.tsx b/apps/web/app/abc/vysledky/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>Výsledky</h1>;
+}
diff --git a/packages/design-system/src/ui/layout/bottomBar.tsx b/packages/design-system/src/ui/layout/bottomBar.tsx
@@ -6,7 +6,7 @@ import type { ExtendedQuestions } from "../../../../../apps/web/app/xyz/store";
 type Props = {
   // solve unused button type eslint (no-unused-vars) problem
   starPressed?: boolean;
-  toggleImportant: () => void;
+  toggleImportant: (currentQuestion: number) => void;
   yesClick: () => void;
   noClick: () => void;
   questions: ExtendedQuestions[];

diff --git a/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx b/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx
@@ -18,7 +18,7 @@ export interface Props {
   question: ExtendedQuestions;
   currentQuestion: number;
   questionCount: number;
-  onClick: (event, buttonType) => void;
+  onClick: (buttonType: string) => void;
   starPressed?: boolean;
 }
 
@@ -37,7 +37,7 @@ export function RecapitulationCard({
     setDetailToggled((prevState) => !prevState);
   }
 
-  function switchButton(answerType) {
+  function switchButton(answerType: true | false | null | undefined) {
     switch (answerType) {
       case true: {
         return (
@@ -82,17 +82,17 @@ export function RecapitulationCard({
       data-card-id={id}
       corner="topLeft"
       color="white"
-      className="k1-flex k1-flex-col k1-py-4"
+      // add custom calculated padding
+      className="k1-flex k1-flex-col k1-py-4 k1-gap-6"
     >
       <div className="k1-items-center k1-grid k1-grid-cols-[min-content_1fr_min-content_min-content] k1-gap-x-6">
         {/* toggle star */}
         {/* icon edit large icon size and wrapper */}
         <StarIconButton
           iconSize="large"
-          iconWrapper="large"
-          data-buttonCardId={id}
+          iconWrapper="default"
           starPressed={isImportant ? true : false}
-          onClick={(event) => onClick(event, "Togglerecimportant")}
+          onClick={() => onClick("toggleImportant")}
         />
 
         <div className="k1-mr-auto k1-flex k1-flex-col">
@@ -133,8 +133,7 @@ export function RecapitulationCard({
               icon={YesIcon}
               compactable
               wider
-              data-buttonCardId={id}
-              onClick={(event) => onClick(event, "Yes")}
+              onClick={() => onClick("Yes")}
             >
               Ano
             </Button>
@@ -146,8 +145,7 @@ export function RecapitulationCard({
               icon={NoIcon}
               compactable
               wider
-              data-buttonCardId={id}
-              onClick={(event) => onClick(event, "No")}
+              onClick={() => onClick("No")}
             >
               Ne
             </Button>