diff --git a/apps/web/app/xyz/KalkulackaInitializer.tsx b/apps/web/app/xyz/KalkulackaInitializer.tsx index 58fd882..61c9664 100644 --- 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 index 2a2b361..6dcb5e8 100644 --- 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 index c387ddd..1dd2ec6 100644 --- 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 ( - + {children} diff --git a/apps/web/app/xyz/store.ts b/apps/web/app/xyz/store.ts index 6b91f8c..0681260 100644 --- 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((set) => ({ guide: [ { @@ -55,12 +55,9 @@ export const useGuideStore = create((set) => ({ prevStep: () => set((state) => ({ currentStep: state.currentStep - 1 })), })); -// swtich off debug mode - export const useQuestionsStore = create((set) => ({ questions: [], currentQuestion: 0, - questionTotal: 4, skipQuestion: () => set((state) => ({ currentQuestion: state.currentQuestion + 1 })), prevQuestion: () => @@ -147,3 +144,8 @@ export const useQuestionsStore = create((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