From ac0104620c1bd6bba2c269830f8414fc70b25ece Mon Sep 17 00:00:00 2001 From: nflnkr Date: Tue, 14 Nov 2023 16:37:20 +0300 Subject: [PATCH] remove quiz id from url when editing --- src/App.tsx | 2 +- src/pages/createQuize/QuizCard.tsx | 5 +++-- src/pages/startPage/stepOne.tsx | 6 ++---- src/pages/startPage/steptwo.tsx | 8 +++----- src/stores/quizes/actions.ts | 17 ++++++++--------- src/stores/quizes/hooks.ts | 12 +++++------- src/stores/quizes/store.ts | 2 ++ 7 files changed, 24 insertions(+), 28 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 88333692..7b818cae 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -56,7 +56,7 @@ export default function App() { {routeslink.map((e, i) => ( } /> ))} - } /> + } /> } /> } /> } /> diff --git a/src/pages/createQuize/QuizCard.tsx b/src/pages/createQuize/QuizCard.tsx index b25ffb40..7de6d989 100755 --- a/src/pages/createQuize/QuizCard.tsx +++ b/src/pages/createQuize/QuizCard.tsx @@ -11,7 +11,7 @@ import { useMediaQuery, useTheme, } from "@mui/material"; -import { deleteQuiz } from "@root/quizes/actions"; +import { deleteQuiz, setEditQuizId } from "@root/quizes/actions"; import { useNavigate } from "react-router-dom"; @@ -33,7 +33,8 @@ export default function QuizCard({ const navigate = useNavigate(); function handleEditClick() { - navigate(`/setting/${quiz.id}`); + setEditQuizId(quiz.id); + navigate("/settings"); } return ( diff --git a/src/pages/startPage/stepOne.tsx b/src/pages/startPage/stepOne.tsx index 4c7083d2..918a3961 100755 --- a/src/pages/startPage/stepOne.tsx +++ b/src/pages/startPage/stepOne.tsx @@ -1,6 +1,5 @@ import { Box, Button } from "@mui/material"; import CreationCard from "@ui_kit/CreationCard"; -import { useNavigate } from "react-router-dom"; import quizCreationImage1 from "../../assets/quiz-creation-1.png"; import quizCreationImage2 from "../../assets/quiz-creation-2.png"; import { setQuizType } from "@root/quizes/actions"; @@ -8,7 +7,6 @@ import { useCurrentQuiz } from "@root/quizes/hooks"; export default function StepOne() { - const navigate = useNavigate(); const { quiz } = useCurrentQuiz(); const config = quiz?.config; @@ -34,7 +32,7 @@ export default function StepOne() { variant="text" data-cy="create-quiz-card" onClick={() => { - setQuizType(quiz.id, "quiz", navigate); + setQuizType(quiz.id, "quiz"); }} > { - setQuizType(quiz.id, "form", navigate); + setQuizType(quiz.id, "form"); }} > { - setQuizStartpageType(quiz.id, "standard", navigate); + setQuizStartpageType(quiz.id, "standard"); }} > { - setQuizStartpageType(quiz.id, "expanded", navigate); + setQuizStartpageType(quiz.id, "expanded"); }} > { - setQuizStartpageType(quiz.id, "centered", navigate); + setQuizStartpageType(quiz.id, "centered"); }} > setProducedState(state => { + state.editQuizId = quizId; +}); + export const setQuizes = (quizes: RawQuiz[] | null) => setProducedState(state => { state.quizById = {}; if (quizes === null) return; @@ -98,7 +102,8 @@ export const createQuiz = async (navigate: NavigateFunction) => { }); setQuiz(rawQuizToQuiz(quiz)); - navigate(`/setting/${quiz.id}`); + setEditQuizId(quiz.id); + navigate("/settings"); } catch (error) { devlog("Error creating quiz", error); @@ -123,29 +128,25 @@ export const deleteQuiz = async (quizId: number) => { export const setQuizType = ( quizId: number, quizType: QuizConfig["type"], - navigate: NavigateFunction, ) => { updateQuizWithFnOptimistic( quizId, quiz => { quiz.config.type = quizType; }, - navigate, ); incrementCurrentStep(); }; export const setQuizStartpageType = ( - quizId: number | undefined, + quizId: number | null, startpageType: QuizConfig["startpageType"], - navigate: NavigateFunction, ) => { updateQuizWithFnOptimistic( quizId, quiz => { quiz.config.startpageType = startpageType; }, - navigate, ); incrementCurrentStep(); }; @@ -154,9 +155,8 @@ let savedOriginalQuiz: Quiz | null = null; let controller: AbortController | null = null; export const updateQuizWithFnOptimistic = async ( - quizId: number | undefined, + quizId: number | null, updateFn: (quiz: Quiz) => void, - navigate: NavigateFunction, rollbackOnError = true, ) => { if (!quizId) return; @@ -176,7 +176,6 @@ export const updateQuizWithFnOptimistic = async ( // await new Promise((resolve, reject) => setTimeout(reject, 2000, new Error("Api rejected"))); setQuizField(quiz.id, "id", newId); - navigate(`/setting/${newId}`, { replace: true }); controller = null; savedOriginalQuiz = null; diff --git a/src/stores/quizes/hooks.ts b/src/stores/quizes/hooks.ts index b3b0b548..4a782de6 100644 --- a/src/stores/quizes/hooks.ts +++ b/src/stores/quizes/hooks.ts @@ -1,8 +1,7 @@ import { Quiz } from "@model/quiz/quiz"; -import { useNavigate, useParams } from "react-router-dom"; -import { useQuizStore } from "./store"; import { useCallback } from "react"; import { updateQuizWithFnOptimistic } from "./actions"; +import { useQuizStore } from "./store"; export function useQuizArray(): Quiz[] { @@ -12,13 +11,12 @@ export function useQuizArray(): Quiz[] { } export function useCurrentQuiz() { - const navigate = useNavigate(); - const quizId = parseInt(useParams().quizId ?? ""); - const quiz = useQuizStore(state => state.quizById[quizId]); + const quizId = useQuizStore(state => state.editQuizId); + const quiz = useQuizStore(state => state.quizById[quizId ?? -1]); const updateQuiz = useCallback((updateFn: (quiz: Quiz) => void) => { - updateQuizWithFnOptimistic(quizId, updateFn, navigate); - }, [navigate, quizId]); + updateQuizWithFnOptimistic(quizId, updateFn); + }, [quizId]); return { quiz, updateQuiz }; } diff --git a/src/stores/quizes/store.ts b/src/stores/quizes/store.ts index 07cd8aff..a641cb7f 100644 --- a/src/stores/quizes/store.ts +++ b/src/stores/quizes/store.ts @@ -6,11 +6,13 @@ import { devtools } from "zustand/middleware"; export type QuizStore = { quizById: Record; + editQuizId: number | null; currentStep: QuizSetupStep; }; const initialState: QuizStore = { quizById: {}, + editQuizId: null, currentStep: 1, };