refactor: rename testQuestions to questions for clarity and consisten…

…cy, added todos
kalkulacka-one · Jan 6, 2025 · 5a180e2 · 5a180e2
1 parent 54d1ded
commit 5a180e2
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 15 deletions.
diff --git a/apps/web/app/xyz/KalkulackaInitializer.tsx b/apps/web/app/xyz/KalkulackaInitializer.tsx
@@ -5,16 +5,13 @@ import { useQuestionsStore } from "./store";
 import type { ExtendedQuestions } from "./store";
 
 type Props = {
-  testQuestions: any;
+  questions: any;
   children: React.ReactNode;
 };
 
-export default function KalkulackaInitializer({
-  testQuestions,
-  children,
-}: Props) {
+export default function KalkulackaInitializer({ questions, children }: Props) {
   useQuestionsStore.setState(() => {
-    const updatedTestQuestions = testQuestions.map(
+    const updatedTestQuestions = questions.map(
       (question: ExtendedQuestions) => {
         return {
           ...question,
@@ -28,3 +25,7 @@ export default function KalkulackaInitializer({
 
   return children;
 }
+
+// TODOS:
+// 1. Solve warning: Cannot update a component (`useQuestionsStoreProvider`) while rendering a different component (`KalkulackaInitializer`). To locate the bad setState() call inside `KalkulackaInitializer`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
+// see: https://github.com/facebook/react/issues/18147#issuecomment-592267650
diff --git a/apps/web/app/xyz/[number]/page.tsx b/apps/web/app/xyz/[number]/page.tsx
@@ -11,10 +11,8 @@ export default function Page() {
   const params = useParams();
   const router = useRouter();
   // cleanup and better naming
-  // const testQuestions = useQuestionsStore((state) => state.testQuestions);
   const questions = useQuestionsStore((state) => state.questions);
   const currentQuestion = useQuestionsStore((state) => state.currentQuestion);
-  const questionTotal = useQuestionsStore((state) => state.questionTotal);
   const prevQuestion = useQuestionsStore((state) => state.prevQuestion);
   const skipQuestion = useQuestionsStore((state) => state.skipQuestion);
   const toggleImportant = useQuestionsStore((state) => state.toggleImportant);
@@ -95,7 +93,7 @@ export default function Page() {
               key={`Bottom bar id:${question.id}`}
               questions={questions}
               currentQuestion={currentQuestion}
-              questionTotal={questionTotal}
+              questionTotal={questions.length}
               toggleImportant={toggleImportant}
               yesClick={yesClick}
               noClick={noClick}

diff --git a/apps/web/app/xyz/layout.tsx b/apps/web/app/xyz/layout.tsx
@@ -18,11 +18,11 @@ export default async function RootLayout({
     return data;
   }
 
-  const testQuestions = await fetchQuestions();
+  const questions = await fetchQuestions();
   return (
     <html lang="en">
       <body>
-        <KalkulackaInitializer testQuestions={testQuestions}>
+        <KalkulackaInitializer questions={questions}>
           {children}
         </KalkulackaInitializer>
       </body>

diff --git a/apps/web/app/xyz/store.ts b/apps/web/app/xyz/store.ts
@@ -9,7 +9,6 @@ type ExtendedQuestions = Question & {
 type QuestionsStore = {
   questions: ExtendedQuestions[];
   currentQuestion: number;
-  questionTotal: number;
   skipQuestion: () => void;
   prevQuestion: () => void;
   toggleImportant: () => void;
@@ -30,6 +29,7 @@ type GuideStore = {
   prevStep: () => void;
 };
 
+// guide content as HTML rather than plain text in object ???
 export const useGuideStore = create<GuideStore>((set) => ({
   guide: [
     {
@@ -55,12 +55,9 @@ export const useGuideStore = create<GuideStore>((set) => ({
   prevStep: () => set((state) => ({ currentStep: state.currentStep - 1 })),
 }));
 
-// swtich off debug mode
-
 export const useQuestionsStore = create<QuestionsStore>((set) => ({
   questions: [],
   currentQuestion: 0,
-  questionTotal: 4,
   skipQuestion: () =>
     set((state) => ({ currentQuestion: state.currentQuestion + 1 })),
   prevQuestion: () =>
@@ -147,3 +144,8 @@ export const useQuestionsStore = create<QuestionsStore>((set) => ({
 }));
 
 export type { ExtendedQuestions };
+
+// TODOS:
+// 1. Use Immer for better performance and cleaner code for updating state
+// 2. Fix reduntant function
+// 3. Fix no unused vars error