From b85c3070ea652efae013b92d11a0fc79033fbce3 Mon Sep 17 00:00:00 2001
From: mewdev <michal.wierzgon@gmail.com>
Date: Sat, 21 Dec 2024 21:03:14 +0100
Subject: [PATCH] wip: answer yes/no working

---
 apps/web/app/xyz/page.tsx | 26 ++++++++++++++++++++++-
 apps/web/app/xyz/store.ts | 43 ++++++++++++++++++++++++++++++++++-----
 2 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/xyz/page.tsx b/apps/web/app/xyz/page.tsx
index 1472e4a9..0664e455 100644
--- a/apps/web/app/xyz/page.tsx
+++ b/apps/web/app/xyz/page.tsx
@@ -8,11 +8,13 @@ export default function Page() {
   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);
 
   return (
     <div>
       {/* questions wrapper */}
-      <div className="flex flex-col gap-2 bg-blue-500 p-5">
+      <div className="flex flex-col gap-2 bg-purple-200 p-5">
         {questions.map((question, index) => {
           const currentStep = index + 1;
           if (currentStep === currentQuestion) {
@@ -51,6 +53,28 @@ export default function Page() {
             );
           }
         })}
+        {/* bottom bar wrapper */}
+        {questions.map((question, index) => {
+          const currentStep = index + 1;
+          if (currentStep === currentQuestion) {
+            return (
+              <div key={question.id} className="h-auto bg-rose-300">
+                <button
+                  onClick={answerYes}
+                  className={`border-4 border-blue-800 ${question.answerType === true ? "bg-blue-400" : "bg-blue-100"} px-4 py-2`}
+                >
+                  Yes
+                </button>
+                <button
+                  onClick={answerNo}
+                  className={`border-4 border-blue-800 ${question.answerType === false ? "bg-rose-400" : "bg-rose-100"} px-4 py-2`}
+                >
+                  No
+                </button>
+              </div>
+            );
+          }
+        })}
       </div>
     </div>
   );
diff --git a/apps/web/app/xyz/store.ts b/apps/web/app/xyz/store.ts
index 779fcac2..1b9dfab7 100644
--- a/apps/web/app/xyz/store.ts
+++ b/apps/web/app/xyz/store.ts
@@ -2,7 +2,8 @@ import { create } from "zustand";
 import { Question } from "@repo/schema/dist";
 
 type ExtendedQuestions = Question & {
-  isImportant: boolean;
+  isImportant: true | false | null;
+  answerType: true | false | null | undefined;
 };
 
 type QuestionsStore = {
@@ -12,6 +13,8 @@ type QuestionsStore = {
   skipQuestion: () => void;
   prevQuestion: () => void;
   toggleImportant: () => void;
+  answerYes: () => void;
+  answerNo: () => void;
 };
 
 export const useQuestionsStore = create<QuestionsStore>((set) => ({
@@ -24,7 +27,8 @@ export const useQuestionsStore = create<QuestionsStore>((set) => ({
       detail:
         "V ČR studuje na všeobecných oborech 30 % žáků, zatímco v Evropě je tento podíl 50 %. Zastánci chtějí připravit studenty/ky na proměnlivý pracovní trh a zlepšit šance i na další, vyšší vzdělávání, odpůrci argumentují potřebou odborných škol pro naplnění poptávky po specializovaných pracovních místech.",
       tags: ["Vzdělání"],
-      isImportant: true,
+      isImportant: null,
+      answerType: null,
     },
     {
       id: "36079500-1556-4330-81c6-defe94472c99",
@@ -34,7 +38,8 @@ export const useQuestionsStore = create<QuestionsStore>((set) => ({
       detail:
         "Investice do veřejné dopravy jsou klíčové pro všechny kraje, zejména pro venkovské a méně rozvinuté oblasti.",
       tags: ["Veřejná doprava"],
-      isImportant: false,
+      isImportant: null,
+      answerType: null,
     },
     {
       id: "0908ae4c-c4bc-4908-8032-8bc96ae8ca49",
@@ -44,7 +49,8 @@ export const useQuestionsStore = create<QuestionsStore>((set) => ({
       detail:
         "Obnovitelné zdroje pomáhají snížit uhlíkovou stopu kraje. Zastánci argumentují, že to přispívá k boji proti změně klimatu, kritici varují před vysokými počátečními investicemi a technickými obtížemi.",
       tags: ["Obnovitelná energie"],
-      isImportant: true,
+      isImportant: null,
+      answerType: null,
     },
     {
       id: "fcdf48ac-3831-4efe-a859-a7a34c446e1c",
@@ -53,7 +59,8 @@ export const useQuestionsStore = create<QuestionsStore>((set) => ({
       detail:
         "Kraje mohou předkládat zákony parlamentu. Zastánci volají po častějším využívání této možnosti, kritici poukazují na nedostatek odborné kapacity pro legislativní práci.",
       tags: ["Legislativní iniciativa"],
-      isImportant: false,
+      isImportant: null,
+      answerType: null,
     },
   ],
   currentQuestion: 1,
@@ -75,4 +82,30 @@ export const useQuestionsStore = create<QuestionsStore>((set) => ({
       });
       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 };
+    }),
 }));