wip: enhance question handling with new answer types and toggle funct…

…ionality, updated layout and components (needs refactor)
kalkulacka-one · Jan 10, 2025 · 36662dd · 36662dd
1 parent e9130cd
commit 36662dd
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 45 deletions.
diff --git a/apps/web/app/abc/[questionNumber]/mockupPage.tsx b/apps/web/app/abc/[questionNumber]/mockupPage.tsx
@@ -1,36 +1,36 @@
-"use client";
+// "use client";
 
-import { BottomBar, QuestionWrapper } from "@repo/design-system/ui";
-import { useQuestionsStore } from "../providers/storeProvider";
-import { Question } from "@repo/schema/dist";
+// import { BottomBar, QuestionWrapper } from "@repo/design-system/ui";
+// import { useQuestionsStore } from "../providers/storeProvider";
+// import { Question } from "@repo/schema/dist";
 
-type ExtendedQuestions = Question & {
-  isImportant: true | false | null;
-  answerType: true | false | null;
-};
+// type ExtendedQuestions = Question & {
+//   isImportant: true | false | null;
+//   answerType: true | false | null;
+// };
 
-export default function Page() {
-  const questions = useQuestionsStore((state) => state.questions);
-  const currentQuestion = useQuestionsStore((state) => state.currentQuestion);
-  const prevQuestion = useQuestionsStore((state) => state.prevQuestion);
-  const skipQuestion = useQuestionsStore((state) => state.skipQuestion);
-  return (
-    <main className="flex min-h-screen flex-col items-center p-24">
-      <div className="bg-red-200">
-        <h2>Collection</h2>
-        {questions?.map((item: Question, index) => {
-          if (currentQuestion === index + 1) {
-            return (
-              <div key={index} className="m-4 bg-red-400">
-                <span>{item.statement}</span>
-              </div>
-            );
-          }
-        })}
-      </div>
+// export default function Page() {
+//   const questions = useQuestionsStore((state) => state.questions);
+//   const currentQuestion = useQuestionsStore((state) => state.currentQuestion);
+//   const prevQuestion = useQuestionsStore((state) => state.prevQuestion);
+//   const skipQuestion = useQuestionsStore((state) => state.skipQuestion);
+//   return (
+//     <main className="flex min-h-screen flex-col items-center p-24">
+//       <div className="bg-red-200">
+//         <h2>Collection</h2>
+//         {questions?.map((item: Question, index) => {
+//           if (currentQuestion === index + 1) {
+//             return (
+//               <div key={index} className="m-4 bg-red-400">
+//                 <span>{item.statement}</span>
+//               </div>
+//             );
+//           }
+//         })}
+//       </div>
 
-      <button onClick={skipQuestion}>Skip question</button>
-      <button onClick={prevQuestion}>Prev question</button>
-    </main>
-  );
-}
+//       <button onClick={skipQuestion}>Skip question</button>
+//       <button onClick={prevQuestion}>Prev question</button>
+//     </main>
+//   );
+// }
diff --git a/apps/web/app/abc/[questionNumber]/page.tsx b/apps/web/app/abc/[questionNumber]/page.tsx
@@ -14,9 +14,23 @@ export default function Page() {
   const currentQuestion = useQuestionsStore((state) => state.currentQuestion);
   const prevQuestion = useQuestionsStore((state) => state.prevQuestion);
   const skipQuestion = useQuestionsStore((state) => state.skipQuestion);
+  const toggleImportant = useQuestionsStore((state) => state.toggleImportant);
+  const answerYes = useQuestionsStore((state) => state.answerYes);
+  const answerNo = useQuestionsStore((state) => state.answerNo);
+
+  const yesClick = () => {
+    answerYes();
+    skipQuestion();
+  };
+
+  const noClick = () => {
+    answerNo();
+    skipQuestion();
+  };
+
   return (
-    <main className="flex min-h-screen flex-col items-center p-24">
-      <div>
+    <>
+      <main className="relative flex min-h-dvh flex-col justify-center ">
         {/* questions wrapper */}
         {questions.map((question: ExtendedQuestions, index) => {
           if (currentQuestion === index + 1) {
@@ -32,8 +46,25 @@ export default function Page() {
             );
           }
         })}
-      </div>
-    </main>
+      </main>
+      {/* Bottom bar wrapper */}
+      {questions.map((question: ExtendedQuestions, index) => {
+        if (currentQuestion === index + 1) {
+          return (
+            <BottomBar
+              key={question.id}
+              questions={questions}
+              currentQuestion={currentQuestion}
+              questionTotal={questions.length}
+              toggleImportant={toggleImportant}
+              yesClick={yesClick}
+              noClick={noClick}
+              starPressed={question.isImportant ? true : undefined}
+            />
+          );
+        }
+      })}
+    </>
   );
 }
 

diff --git a/apps/web/app/abc/layout.tsx b/apps/web/app/abc/layout.tsx
@@ -5,14 +5,10 @@ import { StoreProvider } from "./providers/storeProvider";
 import UrlUpdater from "./utils/urlUpdater";
 import getQuestions from "./utils/getQuestions";
 
-// const baseUrl = "https://dummyjson.com/c/7ee4-a7f4-4977-bb54";
-
-const baseUrlKalk =
+const baseUrl =
   "https://www.volebnikalkulacka.cz/data/instance/volebnikalkulacka.cz/krajske-2024/10-jihomoravsky/questions.json";
 
-const questions = await getQuestions(baseUrlKalk);
-
-console.log(questions);
+const questions = await getQuestions(baseUrl);
 
 export default async function RootLayout({
   children,
@@ -23,7 +19,12 @@ export default async function RootLayout({
     <html lang="en">
       <StoreProvider questions={questions}>
         <UrlUpdater>
-          <body>{children}</body>
+          <body>
+            <header className="flex h-10 items-center justify-center bg-primary">
+              Header
+            </header>
+            {children}
+          </body>
         </UrlUpdater>
       </StoreProvider>
     </html>

diff --git a/apps/web/app/abc/providers/storeProvider.tsx b/apps/web/app/abc/providers/storeProvider.tsx
@@ -21,6 +21,14 @@ type Store = {
   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: { message: string }[];
 };
@@ -51,6 +59,85 @@ 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) => {
+            if (index + 1 === state.currentQuestion) {
+              return {
+                ...question,
+                answerType: true,
+              };
+            }
+            return { ...question };
+          });
+          return { ...state, questions: updatedQuestions };
+        }),
+      answerNo: () =>
+        set((state) => {
+          const updatedQuestions = state.questions.map((question, index) => {
+            if (index + 1 === state.currentQuestion) {
+              return {
+                ...question,
+                answerType: false,
+              };
+            }
+            return { ...question };
+          });
+          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 };
+        }),
+      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/packages/design-system/src/ui/layout/bottomBar.tsx b/packages/design-system/src/ui/layout/bottomBar.tsx
@@ -25,7 +25,7 @@ export function BottomBar({
 }: Props) {
   return (
     // main wrapper
-    <div className="k1-sticky k1-bottom-0 k1-bg-white">
+    <div className="k1-bottom-0 k1-bg-white k1-sticky">
       {/* count status wrapper */}
       <div>
         <StepProgressFancy

diff --git a/packages/design-system/src/ui/layout/questionWrapper.tsx b/packages/design-system/src/ui/layout/questionWrapper.tsx
@@ -28,7 +28,7 @@ export function QuestionWrapper({
     <>
       {/* content */}
       {/* mobile arrow bar */}
-      <div className="k1-flex k1-justify-between sm:k1-hidden">
+      <div className="k1-absolute k1-top-0 k1-w-dvw k1-flex k1-justify-between sm:k1-hidden">
         <Button
           hasIcon
           icon={ArrowIconLeft}
@@ -50,6 +50,7 @@ export function QuestionWrapper({
           {currentQuestion >= questionCount ? "Rekapitulace" : "Přeskočit"}
         </Button>
       </div>
+
       <div className="xs:k1-flex xs:k1-flex-col xs:k1-gap-2 min-[701px]:k1-grid min-[701px]:k1-grid-cols-[1fr_clamp(32rem,_50vw,_48rem)_1fr] sm:k1-grid sm:k1-grid-cols-[1fr_clamp(32rem,_50vw,_48rem)_1fr] sm:k1-gap-8">
         {/* desktop grid content */}
         {/* Place button end with flex ok? */}