wip: refactor recapitulation layout and button states, continuing fix…

…ing minor interactivity issues
kalkulacka-one · Jan 25, 2025 · aaad4c2 · aaad4c2
1 parent 6402304
commit aaad4c2
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 33 deletions.
diff --git a/apps/web/app/abc/rekapitulace/page.tsx b/apps/web/app/abc/rekapitulace/page.tsx
@@ -7,18 +7,13 @@ import {
 import { Button, RecapitulationCard } from "@repo/design-system/ui";
 import { useQuestionsStore } from "../providers/storeProvider";
 import Link from "next/link";
-import { useEffect } from "react";
 
 export default function Page() {
   const questions = useQuestionsStore((state) => state.questions);
   const toggleImportant = useQuestionsStore((state) => state.toggleImportant);
   const answerYes = useQuestionsStore((state) => state.answerYes);
   const answerNo = useQuestionsStore((state) => state.answerNo);
 
-  useEffect(() => {
-    // rerender on change of answertype of isImportant
-  }, [questions]);
-
   return (
     <div className="flex min-h-screen flex-col">
       {/* rekapitulace header */}
@@ -84,9 +79,6 @@ export default function Page() {
                 currentQuestion={currentQuestion}
                 questionCount={questions.length}
                 question={question}
-                yesPressed={question.answerType === true ? true : undefined}
-                noPressed={question.answerType === false ? true : undefined}
-                starPressed={question.isImportant ? true : undefined}
                 onClick={(buttonType) => {
                   if (buttonType === "toggleImportant") {
                     toggleImportant(index + 1);
@@ -120,6 +112,3 @@ export default function Page() {
     </div>
   );
 }
-
-// TODO:
-// 1. ButtonToggle does not rerender state
diff --git a/apps/web/app/abc/utils/getQuestions.tsx b/apps/web/app/abc/utils/getQuestions.tsx
@@ -5,7 +5,7 @@ export default async function getQuestions(baseUrl: string) {
   const res = await fetch(baseUrl);
   const data = await res.json();
   const questions = await data.map((question: Question) => {
-    return { ...question, answerType: null, isImportant: null };
+    return { ...question, answerType: null, isImportant: false };
   });
   return questions;
 }
diff --git a/apps/web/app/abc/utils/urlUpdater.tsx b/apps/web/app/abc/utils/urlUpdater.tsx
@@ -24,7 +24,6 @@ export default function UrlUpdater({ children }: Props) {
 
   // Location setter
   useEffect(() => {
-    console.log("Location setter UE");
     if (path.includes("rekapitulace")) {
       setIsRekapitulace(true);
       setCurrentLocation("rekapitulace");
@@ -34,6 +33,7 @@ export default function UrlUpdater({ children }: Props) {
     } else if (path.includes("navod")) {
       setCurrentLocation("navod");
     }
+    console.log(`Current question ${currentQuestion}`);
   }, [path]);
 
   // Url updater
@@ -56,6 +56,8 @@ export default function UrlUpdater({ children }: Props) {
       } else if (currentLocation === "navod") {
         // refactor title structure
         document.title = `Návod ${guideNumber}`;
+      } else if (currentLocation === "rekapitulace") {
+        document.title = `Rekapitulace`;
       }
     }
     changeTitle();

diff --git a/packages/design-system/src/ui/button/noToggleButton.tsx b/packages/design-system/src/ui/button/noToggleButton.tsx
@@ -9,6 +9,7 @@ type Props = {
   VariantProps<typeof buttonVariants>;
 
 export function NoToggleButton({ pressed, onClick }: Props) {
+  // console.log("NoToggleButton pressed:", pressed);
   return (
     <ToggleButton
       kind="inverse"

diff --git a/packages/design-system/src/ui/button/yesToggleButton.tsx b/packages/design-system/src/ui/button/yesToggleButton.tsx
@@ -9,6 +9,7 @@ type Props = {
   VariantProps<typeof buttonVariants>;
 
 export function YesToggleButton({ pressed, onClick }: Props) {
+  // console.log("YesToggleButton pressed:", pressed);
   return (
     <ToggleButton
       kind="inverse"

diff --git a/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx b/packages/design-system/src/ui/recapitulationCard/recapitulationCard.tsx
@@ -17,25 +17,18 @@ type ExtendedQuestions = Question & {
   answerType: true | false | null | undefined;
 };
 
-// type answerType: true || false || null || undefined;
-
 export interface Props {
-  yesPressed?: boolean | null;
-  noPressed?: boolean | null;
   question: ExtendedQuestions;
   currentQuestion: number;
   questionCount: number;
   onClick: (buttonType: string) => void;
-  starPressed?: boolean;
 }
 
 export function RecapitulationCard({
   question,
   currentQuestion,
   questionCount,
   onClick,
-  yesPressed,
-  noPressed,
 }: Props) {
   const { id, statement, detail, tags, title, answerType, isImportant } =
     question;
@@ -65,9 +58,9 @@ export function RecapitulationCard({
             fitContent
             kind="filled"
             color="secondary"
-            className="xs:k1-px-6"
+            className="k1-pointer-events-none xs:k1-px-6"
           >
-            <NoIcon className="k1-pointer-events-none k1-size-6" />
+            <NoIcon className="k1-size-6" />
           </Button>
         );
       }
@@ -77,9 +70,9 @@ export function RecapitulationCard({
             fitContent
             kind="inverse"
             color="neutral"
-            className="xs:k1-px-6"
+            className="k1-pointer-events-none  xs:k1-px-6"
           >
-            <NeutralIcon className="k1-pointer-events-none k1-size-6" />
+            <NeutralIcon className="k1-size-6" />
           </Button>
         );
       }
@@ -89,9 +82,9 @@ export function RecapitulationCard({
             fitContent
             kind="inverse"
             color="neutral"
-            className="xs:k1-px-6"
+            className="k1-pointer-events-none xs:k1-px-6"
           >
-            <NeutralIcon className="k1-pointer-events-none k1-size-6" />
+            <NeutralIcon className="k1-size-6" />
           </Button>
         );
       }
@@ -112,7 +105,7 @@ export function RecapitulationCard({
         <StarIconButton
           iconSize="large"
           iconWrapper="default"
-          starPressed={isImportant ? true : false}
+          starPressed={isImportant ? true : undefined}
           onClick={() => onClick("toggleImportant")}
         />
 
@@ -139,26 +132,28 @@ export function RecapitulationCard({
           </div>
         </div>
         <div className={`${detailToggled ? "k1-invisible" : "k1-block"}`}>
+          {/* rendering buttons here */}
           {switchButton(answerType)}
         </div>
         <DetailIconButton onClick={toggleDetail} />
       </div>
       {detailToggled && (
-        <>
+        // detail wrapper
+        <div>
           <div className="k1-flex k1-w-full k1-gap-4">
             <YesToggleButton
+              pressed={answerType === true ? true : undefined}
               onClick={() => onClick("Yes")}
-              pressed={yesPressed ? true : undefined}
             />
             <NoToggleButton
+              pressed={answerType === false ? true : undefined}
               onClick={() => onClick("No")}
-              pressed={noPressed ? true : undefined}
             />
           </div>
           <p className="k1-text-base k1-font-normal k1-text-neutral">
             {detail}
           </p>
-        </>
+        </div>
       )}
     </Card>
   );

diff --git a/packages/design-system/src/ui/toggleButton/toggleButton.tsx b/packages/design-system/src/ui/toggleButton/toggleButton.tsx
@@ -1,6 +1,6 @@
 import { Button, buttonVariants } from "@repo/design-system/ui";
 import { VariantProps } from "class-variance-authority";
-import React, { ComponentProps, useState } from "react";
+import React, { ComponentProps, useEffect, useState } from "react";
 
 type Props = {
   toggleButtonPressed?: boolean;
@@ -17,6 +17,10 @@ const ToggleButton = React.forwardRef<React.ElementRef<typeof Button>, Props>(
       }
     }
 
+    useEffect(() => {
+      setIsPressed(toggleButtonPressed);
+    }, [toggleButtonPressed]);
+
     return (
       <Button
         onClick={handlePressed}

diff --git a/packages/design-system/src/ui/toggleIconButton/toggleIconButton.tsx b/packages/design-system/src/ui/toggleIconButton/toggleIconButton.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentProps, ReactHTMLElement } from "react";
+import React, { ComponentProps, ReactHTMLElement, useEffect } from "react";
 import { IconButton } from "@repo/design-system/ui";
 
 type Props = {
@@ -25,6 +25,10 @@ const ToggleIconButton = React.forwardRef<
       }
     }
 
+    useEffect(() => {
+      setIsPressed(togglePressed);
+    }, [togglePressed]);
+
     return (
       <IconButton
         pressed={isPressed}