wip: update toggle button logic and props handling for better state m…

…anagement
kalkulacka-one · Jan 19, 2025 · 2ecfdbd · 2ecfdbd
1 parent e16439a
commit 2ecfdbd
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git a/apps/web/app/abc/providers/storeProvider.tsx b/apps/web/app/abc/providers/storeProvider.tsx
@@ -95,7 +95,10 @@ export const StoreProvider = ({ children, questions }: StoreProviderProps) => {
         // understand this function  with current invoke better
         // better way how to solve this?
         const isRekapitulace = storeRef.current?.getState().isRekapitulace;
-        if (!isRekapitulace) {
+        const answerType =
+          storeRef.current?.getState().questions[currentQuestion - 1]
+            ?.answerType;
+        if (!isRekapitulace && answerType === true) {
           storeRef.current?.getState().skipQuestion();
         }
       },
@@ -128,7 +131,10 @@ export const StoreProvider = ({ children, questions }: StoreProviderProps) => {
         // understand this function  with current invoke better
         // better way how to solve this?
         const isRekapitulace = storeRef.current?.getState().isRekapitulace;
-        if (!isRekapitulace) {
+        const answerType =
+          storeRef.current?.getState().questions[currentQuestion - 1]
+            ?.answerType;
+        if (!isRekapitulace && answerType === false) {
           storeRef.current?.getState().skipQuestion();
         }
       },

diff --git a/packages/design-system/src/ui/button/noToggleButton.tsx b/packages/design-system/src/ui/button/noToggleButton.tsx
@@ -2,7 +2,7 @@ import { ToggleButton } from "@repo/design-system/ui";
 import { NoIcon } from "@repo/design-system/icons";
 
 type Props = {
-  pressed?: boolean | null;
+  pressed?: boolean;
   onClick: () => void;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
@@ -17,6 +17,7 @@ export function NoToggleButton({ pressed, onClick }: Props) {
       fitContent
       wider
       onClick={onClick}
+      toggleButtonPressed={pressed}
       data-pressed={pressed ? true : undefined}
     >
       Ne

diff --git a/packages/design-system/src/ui/button/yesToggleButton.tsx b/packages/design-system/src/ui/button/yesToggleButton.tsx
@@ -3,7 +3,7 @@ import { YesIcon } from "@repo/design-system/icons";
 
 type Props = {
   onClick: () => void;
-  pressed?: boolean | null;
+  pressed?: boolean;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export function YesToggleButton({ pressed, onClick }: Props) {
@@ -17,6 +17,7 @@ export function YesToggleButton({ pressed, onClick }: Props) {
       onClick={onClick}
       fitContent
       wider
+      toggleButtonPressed={pressed}
       data-pressed={pressed ? true : undefined}
     >
       Ano

diff --git a/packages/design-system/src/ui/layout/bottomBar.tsx b/packages/design-system/src/ui/layout/bottomBar.tsx
@@ -58,9 +58,13 @@ export function BottomBar({
           <ButtonAgainst onClick={noClick} /> */}
           <YesToggleButton
             onClick={yesClick}
-            pressed={yesPressed ? true : null}
+            // null worked
+            pressed={yesPressed ? true : undefined}
+          />
+          <NoToggleButton
+            onClick={noClick}
+            pressed={noPressed ? true : undefined}
           />
-          <NoToggleButton onClick={noClick} pressed={noPressed ? true : null} />
         </div>
       </div>
     </div>

diff --git a/packages/design-system/src/ui/toggleButton/toggleButton.tsx b/packages/design-system/src/ui/toggleButton/toggleButton.tsx
@@ -3,13 +3,16 @@ import { VariantProps } from "class-variance-authority";
 import React, { ComponentProps, useState } from "react";
 import { buttonVariants } from "..";
 
-type Props = VariantProps<typeof buttonVariants> &
+type Props = {
+  toggleButtonPressed?: boolean;
+} & VariantProps<typeof buttonVariants> &
   ComponentProps<typeof Button>;
 const ToggleButton = React.forwardRef<React.ElementRef<typeof Button>, Props>(
-  ({ onClick, ...props }, ref) => {
-    const [isPressed, setIsPressed] = useState(false);
+  ({ toggleButtonPressed, onClick, ...props }, ref) => {
+    const [isPressed, setIsPressed] = useState(toggleButtonPressed);
     function handlePressed(event: React.MouseEvent<HTMLButtonElement>) {
       setIsPressed((prevState) => !prevState);
+      console.log(`From toggleButton: ${isPressed}`);
       if (onClick) {
         onClick(event);
       }