refactor store & hooks

src/pages/startPage/StartPage.tsx

@@ -42,7 +42,7 @@ export default function StartPage() {
         },
     });
     const theme = useTheme();
-    const quiz = useCurrentQuiz();
+    const { quiz } = useCurrentQuiz();
     const currentStep = useQuizStore(state => state.currentStep);
     const isTablet = useMediaQuery(theme.breakpoints.down(1000));
     const isMobile = useMediaQuery(theme.breakpoints.down(660));

src/pages/startPage/stepOne.tsx

@@ -9,10 +9,10 @@ import { useCurrentQuiz } from "@root/quizes/hooks";
 
 export default function StepOne() {
     const navigate = useNavigate();
-    const quiz = useCurrentQuiz();
+    const { quiz } = useCurrentQuiz();
     const config = quiz?.config;
 
-    if (!config) return null;
+    if (!config) return null; // TODO throw and catch with error boundary
 
     return (
         <Box
@@ -51,7 +51,7 @@ export default function StepOne() {
                 <Button
                     variant="text"
                     onClick={() => {
-                        setQuizType(quiz.id,"form", navigate);
+                        setQuizType(quiz.id, "form", navigate);
                     }}
                 >
                     <CreationCard

src/pages/startPage/steptwo.tsx

@@ -18,11 +18,11 @@ export default function Steptwo() {
     const navigate = useNavigate();
     const theme = useTheme();
     const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1300));
-    const quiz = useCurrentQuiz();
+    const { quiz } = useCurrentQuiz();
 
     const config = quiz?.config;
 
-    if (!config) return null;
+    if (!config) return null; // TODO throw and catch with error boundary
 
     return (
         <Box sx={{ mt: "60px" }}>

src/stores/quizes/actions.ts

@@ -42,7 +42,13 @@ export const setQuizField = <T extends keyof Quiz>(
     const quiz = state.quizById[quizId];
     if (!quiz) return;
 
+    const oldId = quiz.id;
     quiz[field] = value;
+
+    if (field === "id") {
+        delete state.quizById[oldId];
+        state.quizById[value as number] = quiz;
+    }
 }, {
     type: "setQuizField",
     quizId,
@@ -68,12 +74,16 @@ export const incrementCurrentStep = () => setProducedState(state => {
     state.currentStep = Math.min(
         maxQuizSetupSteps, state.currentStep + 1
     ) as QuizSetupStep;
+}, {
+    type: "incrementCurrentStep",
 });
 
 export const decrementCurrentStep = () => setProducedState(state => {
     state.currentStep = Math.max(
         1, state.currentStep - 1
     ) as QuizSetupStep;
+}, {
+    type: "decrementCurrentStep",
 });
 
 export const setCurrentStep = (step: number) => setProducedState(state => {
@@ -126,7 +136,7 @@ export const setQuizType = (
 };
 
 export const setQuizStartpageType = (
-    quizId: number,
+    quizId: number | undefined,
     startpageType: QuizConfig["startpageType"],
     navigate: NavigateFunction,
 ) => {
@@ -144,11 +154,13 @@ let savedOriginalQuiz: Quiz | null = null;
 let controller: AbortController | null = null;
 
 export const updateQuizWithFnOptimistic = async (
-    quizId: number,
+    quizId: number | undefined,
     updateFn: (quiz: Quiz) => void,
     navigate: NavigateFunction,
     rollbackOnError = true,
 ) => {
+    if (!quizId) return;
+
     const quiz = useQuizStore.getState().quizById[quizId] ?? null;
     if (!quiz) return;
 
@@ -160,11 +172,11 @@ export const updateQuizWithFnOptimistic = async (
 
     setQuiz(currentUpdatedQuiz);
     try {
-        const { updated } = await quizApi.edit(quizToEditQuizRequest(currentUpdatedQuiz), controller.signal);
+        const { updated: newId } = await quizApi.edit(quizToEditQuizRequest(currentUpdatedQuiz), controller.signal);
         // await new Promise((resolve, reject) => setTimeout(reject, 2000, new Error("Api rejected")));
 
-        setQuizField(quiz.id, "version", updated);
+        setQuizField(quiz.id, "id", newId);
-        navigate(`/setting/${quizId}`, { replace: true });
+        navigate(`/setting/${newId}`, { replace: true });
 
         controller = null;
         savedOriginalQuiz = null;

src/stores/quizes/hooks.ts

@@ -1,6 +1,8 @@
 import { Quiz } from "@model/quiz/quiz";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { useQuizStore } from "./store";
+import { useCallback } from "react";
+import { updateQuizWithFnOptimistic } from "./actions";
 
 
 export function useQuizArray(): Quiz[] {
@@ -10,8 +12,13 @@ export function useQuizArray(): Quiz[] {
 }
 
 export function useCurrentQuiz() {
+    const navigate = useNavigate();
     const quizId = parseInt(useParams().quizId ?? "");
     const quiz = useQuizStore(state => state.quizById[quizId]);
 
-    return quiz;
+    const updateQuiz = useCallback((updateFn: (quiz: Quiz) => void) => {
+        updateQuizWithFnOptimistic(quizId, updateFn, navigate);
+    }, [navigate, quizId]);
+
+    return { quiz, updateQuiz };
 }

src/stores/quizes/store.ts

@@ -20,6 +20,7 @@ export const useQuizStore = create<QuizStore>()(
         {
             name: "QuizStore",
             enabled: process.env.NODE_ENV === "development",
+            trace: process.env.NODE_ENV === "development",
         }
     )
 );