refactor questions store

src/stores/questions/actions.ts

@@ -1,32 +1,21 @@
 import { questionApi } from "@api/question";
 import { devlog } from "@frontend/kitui";
+import { Question } from "@model/question/question";
 import { produce } from "immer";
-import { Question } from "model/question/question";
 import { enqueueSnackbar } from "notistack";
-import { isAxiosCanceledError } from "utils/isAxiosCanceledError";
-import { create } from "zustand";
-import { devtools } from "zustand/middleware";
+import { isAxiosCanceledError } from "../../utils/isAxiosCanceledError";
+import { QuestionsStore, useQuestionsStore } from "./store";
 
 
-type QuestionsStore = {
-    questionsById: Record<number, Question | undefined>;
-};
+export const setQuestions = (quizes: Question[] | null) => setProducedState(state => {
+    state.questionsById = {};
+    if (quizes === null) return;
 
-const initialState: QuestionsStore = {
-    questionsById: {},
-};
-
-export const useQuestionsStore = create<QuestionsStore>()(
-    devtools(
-        () => initialState,
-        {
-            name: "QuestionsStore",
-            enabled: process.env.NODE_ENV === "development",
-        }
-    )
-);
-
-export const setQuestions = (questions: QuestionsStore["questionsById"]) => useQuestionsStore.setState({ questionsById: questions });
+    quizes.forEach(question => state.questionsById[question.id] = question);
+}, {
+    type: "setQuizes",
+    quizes,
+});
 
 export const setQuestion = (question: Question) => setProducedState(state => {
     state.questionsById[question.id] = question;
@@ -72,7 +61,6 @@ export const setQuestionFieldOptimistic = async <T extends keyof Question>(
     setQuestion(currentUpdatedQuestion);
     try {
         const { updated } = await questionApi.edit(currentUpdatedQuestion, controller.signal);
-        // await new Promise((resolve, reject) => setTimeout(reject, 2000, new Error("Api rejected")));
 
         setQuestionField(question.id, "version", updated);
         controller = null;
@@ -107,9 +95,11 @@ export const updateQuestionWithFn = (
     updateFn: updateFn.toString(),
 });
 
-export const createQuestion = async () => {
+export const createQuestion = async (quizId: number) => {
     try {
-        const question = await questionApi.create();
+        const question = await questionApi.create({
+            quiz_id: quizId,
+        });
 
         setQuestion(question);
     } catch (error) {

src/stores/questions/hooks.ts

@@ -0,0 +1,8 @@
+import { useQuestionsStore } from "./store";
+
+
+export function useQuestionArray() {
+    const questions = useQuestionsStore(state => state.questionsById);
+
+    return Object.values(questions).flatMap(question => question ? [question] : []);
+}

src/stores/questions/store.ts

@@ -0,0 +1,22 @@
+import { Question } from "@model/question/question";
+import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+
+
+export type QuestionsStore = {
+    questionsById: Record<number, Question | undefined>;
+};
+
+const initialState: QuestionsStore = {
+    questionsById: {},
+};
+
+export const useQuestionsStore = create<QuestionsStore>()(
+    devtools(
+        () => initialState,
+        {
+            name: "QuestionsStore",
+            enabled: process.env.NODE_ENV === "development",
+        }
+    )
+);