complete replace of old stores

src/pages/ContactFormPage/ContactFormPage.tsx

@@ -1,32 +1,19 @@
-import React from "react";
-import { Box, Button, IconButton, Typography, Paper, useTheme, Link, SxProps, Theme, TextField } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { Box, Button, IconButton, Link, Paper, SxProps, TextField, Theme, Typography, useTheme } from "@mui/material";
+import { incrementCurrentStep } from "@root/quizes/actions";
 import CustomTextField from "@ui_kit/CustomTextField";
+import React from "react";
+import InfoIcon from "../../assets/icons/InfoIcon";
 import { OneIcon } from "../../assets/icons/questionsPage/OneIcon";
 import AddPlus from "../../assets/icons/questionsPage/addPlus";
 import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
-import InfoIcon from "../../assets/icons/InfoIcon";
 import ButtonSettingForms from "./ButtonSettingForms";
-import SwitchContactForm from "./switchContactForm";
 import DrawerNewField from "./DrawerParent";
-import WindowNewField from "./NewField/WindowNewField";
 import WindowMessengers from "./Massengers/WindowMessengers";
-import { quizStore } from "@root/quizes";
+import WindowNewField from "./NewField/WindowNewField";
-import { useParams } from "react-router-dom";
+import SwitchContactForm from "./switchContactForm";
 
 export default function ContactFormPage() {
-  const { listQuizes, updateQuizesList } = quizStore();
-  const params = Number(useParams().quizId);
-  const handleNext = () => {
-    updateQuizesList(params, { step: listQuizes[params].step + 1 });
-  };
-
-  const [activeStep, setActiveStep] = React.useState(4);
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-
   const [drawerNewField, setDrawerNewField] = React.useState(false);
   const [drawerMessenger, setDrawerMessenger] = React.useState(false);
 
@@ -139,7 +126,7 @@ export default function ContactFormPage() {
           <Button variant="outlined">
             <ArrowLeft />
           </Button>
-          <Button variant="contained" sx={{ padding: "10px 20px" }} onClick={handleNext}>
+          <Button variant="contained" sx={{ padding: "10px 20px" }} onClick={incrementCurrentStep}>
             Установка квиза
           </Button>
         </Box>

src/pages/InstallQuiz/InstallQuiz.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { useParams } from "react-router-dom";
 import {
   Box,
   Button,
@@ -19,7 +18,6 @@ import {
   Tooltip,
   useTheme,
 } from "@mui/material";
-import { quizStore } from "@root/quizes";
 import LinkIcon from "../../assets/icons/LinkIcon";
 import InfoIcon from "../../assets/icons/InfoIcon";
 import ArrowDown from "../../assets/icons/ArrowDownIcon";
@@ -43,6 +41,7 @@ import InBodyInstall from "./InBodyInstall";
 import AutoOpenInstall from "./AutoOpenInstall";
 import VidjetInstall from "./VidjetInstall";
 import InstallQzCode from "./InstallQzCode";
+import { incrementCurrentStep } from "@root/quizes/actions";
 
 type BackgroundType = "text" | "video";
 
@@ -72,7 +71,6 @@ export default function InstallQuiz() {
   ];
 
   const [display, setDisplay] = React.useState("1");
-  const quizId = Number(useParams().quizId);
   const handleChange = (event: SelectChangeEvent) => {
     setDisplay(event.target.value);
   };
@@ -88,11 +86,6 @@ export default function InstallQuiz() {
   const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
 
   const theme = useTheme();
-  const { listQuizes, updateQuizesList } = quizStore();
-
-  const handleNext = () => {
-    updateQuizesList(quizId, { step: listQuizes[quizId].step + 1 });
-  };
 
   return (
     <>
@@ -413,7 +406,7 @@ export default function InstallQuiz() {
         >
           <ArrowLeft />
         </Button>
-        <Button variant="contained" onClick={handleNext}>Запустить рекламу</Button>
+        <Button variant="contained" onClick={incrementCurrentStep}>Запустить рекламу</Button>
       </Box>
 
       <Modal

src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx

@@ -1,10 +1,9 @@
-import { memo } from "react";
-import { useParams } from "react-router-dom";
-import { Draggable } from "react-beautiful-dnd";
 import { Box, ListItem, Typography, useTheme } from "@mui/material";
-import QuestionsPageCard from "./QuestionPageCard";
+import { updateQuestionWithFnOptimistic } from "@root/questions/actions";
-import { updateQuestionsList } from "@root/questions";
+import { memo } from "react";
+import { Draggable } from "react-beautiful-dnd";
 import { AnyQuizQuestion, QuizQuestionBase } from "../../../../model/questionTypes/shared";
+import QuestionsPageCard from "./QuestionPageCard";
 
 
 type FormDraggableListItemProps = {
@@ -15,7 +14,6 @@ type FormDraggableListItemProps = {
 
 export default memo(
     ({ question, questionIndex, questionData }: FormDraggableListItemProps) => {
-        const quizId = Number(useParams().quizId);
         const theme = useTheme();
 
         return (
@@ -48,9 +46,8 @@ export default memo(
                                 </Typography>
                                 <Typography
                                     onClick={() => {
-                                        updateQuestionsList<QuizQuestionBase>(quizId, questionIndex, {
+                                        updateQuestionWithFnOptimistic(question.id, question => {
-                                            ...questionData,
+                                            question.deleted = false;
-                                            deleted: false,
                                         });
                                     }}
                                     sx={{

src/pages/QuestionsMap/index.tsx

@@ -1,16 +1,9 @@
 import { Box, Typography, Button, useTheme } from "@mui/material";
-import { useParams } from "react-router-dom";
-
 import { Graph } from "./graph";
-
-import { quizStore } from "@root/quizes";
-
 import ArrowLeft from "@icons/questionsPage/arrowLeft";
+import { decrementCurrentStep, incrementCurrentStep } from "@root/quizes/actions";
 
 export const QuestionsMap = () => {
-  const { listQuizes, updateQuizesList } = quizStore();
-  const quizId = Number(useParams().quizId);
-  const quize = listQuizes[quizId];
   const theme = useTheme();
 
   return (
@@ -28,7 +21,7 @@ export const QuestionsMap = () => {
             height: "44px",
             marginLeft: "auto",
           }}
-          onClick={() => updateQuizesList(quizId, { step: quize.step - 1 })}
+          onClick={decrementCurrentStep}
         >
           <ArrowLeft />
         </Button>
@@ -41,7 +34,7 @@ export const QuestionsMap = () => {
             background: theme.palette.brightPurple.main,
             fontSize: "18px",
           }}
-          onClick={() => updateQuizesList(quizId, { step: quize.step + 1 })}
+          onClick={incrementCurrentStep}
         >
           Следующий шаг
         </Button>

src/pages/Result/Result.tsx

@@ -1,19 +1,13 @@
-import { useParams } from "react-router-dom";
+import { Box, Button, Tooltip } from "@mui/material";
-import { Box, Button, Tooltip, useTheme } from "@mui/material";
 import CreationFullCard from "./CreationFullCard";
 
 import Info from "../../assets/icons/Info";
 
 import image from "../../assets/Rectangle 110.png";
-import { quizStore } from "@root/quizes";
+import { incrementCurrentStep } from "@root/quizes/actions";
 
 export const Result = () => {
-  const { listQuizes, updateQuizesList } = quizStore();
+
-  const params = Number(useParams().quizId);
-  const handleNext = () => {
-    updateQuizesList(params, { createResult: true });
-  };
-  const theme = useTheme();
   return (
     <Box component="section">
       <CreationFullCard
@@ -25,7 +19,7 @@ export const Result = () => {
         <Button
           variant="contained"
           sx={{ mr: "15px", minWidth: "258px" }}
-          onClick={handleNext}
+          onClick={incrementCurrentStep}
         >
           Создать результаты
         </Button>

src/pages/Result/Setting.tsx

@@ -1,23 +1,16 @@
-import { Box, Button, Typography, useTheme } from "@mui/material";
+import IconPlus from "@icons/IconPlus";
-import { SettingForm } from "./SettingForm";
+import Info from "@icons/Info";
+import Plus from "@icons/Plus";
+import ArrowLeft from "@icons/questionsPage/arrowLeft";
+import { Box, Button, Typography } from "@mui/material";
+import { incrementCurrentStep } from "@root/quizes/actions";
+import CustomWrapper from "@ui_kit/CustomWrapper";
 import { DescriptionForm } from "./DescriptionForm/DescriptionForm";
 import { ResultListForm } from "./ResultListForm";
-import CustomWrapper from "@ui_kit/CustomWrapper";
+import { SettingForm } from "./SettingForm";
-import Plus from "@icons/Plus";
-import Info from "@icons/Info";
-import IconPlus from "@icons/IconPlus";
-import ArrowLeft from "@icons/questionsPage/arrowLeft";
-import React from "react";
-import { quizStore } from "@root/quizes";
-import { useParams } from "react-router-dom";
 
 export const Setting = () => {
-  const { listQuizes, updateQuizesList } = quizStore();
+  
-  const params = Number(useParams().quizId);
-  const handleNext = () => {
-    updateQuizesList(params, { step: listQuizes[params].step + 1 });
-  };
-  const theme = useTheme();
   return (
     <Box sx={{ maxWidth: "796px" }}>
       <Box sx={{ display: "flex", alignItems: "center", mb: "40px" }}>
@@ -104,7 +97,7 @@ export const Setting = () => {
           >
             <ArrowLeft />
           </Button>
-          <Button variant="contained" sx={{ ml: "10px" }} onClick={handleNext}>
+          <Button variant="contained" sx={{ ml: "10px" }} onClick={incrementCurrentStep}>
             Настроить форму
           </Button>
         </Typography>

src/pages/startPage/extra.tsx

@@ -1,25 +1,23 @@
-import { Box, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Box, Link, Typography, useTheme } from "@mui/material";
-import React, { ChangeEvent, useState } from "react";
+import { useCurrentQuiz } from "@root/quizes/hooks";
 import CustomTextField from "@ui_kit/CustomTextField";
-import { quizStore } from "@root/quizes";
+import { ChangeEvent, useState } from "react";
-import { useParams } from "react-router-dom";
 
 export default function Extra() {
-  const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
-  const params = Number(useParams().quizId);
     const theme = useTheme();
-  const upMd = useMediaQuery(theme.breakpoints.up("md"));
-  const upSm = useMediaQuery(theme.breakpoints.up("sm"));
     const [isExpanded, setIsExpanded] = useState(false);
+    const { quiz, updateQuiz } = useCurrentQuiz();
 
     const expandedHC = (bool: boolean) => {
         setIsExpanded(bool);
     };
+
     const mutationOrgMetaHC = (event: ChangeEvent<HTMLInputElement>) => {
-    let SPageClone = listQuizes[params].config;
+        updateQuiz(quiz => {
-    SPageClone.meta = event.target.value;
+            quiz.config.meta = event.target.value;
-    updateQuizesList(params, { config: SPageClone });
+        });
     };
+
     return (
         <Box
             sx={{
@@ -65,7 +63,7 @@ export default function Extra() {
                         Дополнительно
                     </Link>
                 </Box>
-        {isExpanded && (
+                {isExpanded && quiz && (
                     <Box
                         sx={{
                             backgroundColor: "transparent",
@@ -78,7 +76,7 @@ export default function Extra() {
                         </Typography>
                         <CustomTextField
                             placeholder="Текст-заполнитель — это текст, который "
-              text={listQuizes[params].config.meta}
+                            text={quiz.config.meta}
                             onChange={mutationOrgMetaHC}
                         />
                         <Typography

src/stores/questions.ts

@@ -28,6 +28,7 @@ interface QuestionStore {
 
 let isFirstPartialize = true;
 
+/** @deprecated */
 export const questionStore = create<QuestionStore>()(
     persist(
         devtools(
@@ -104,6 +105,8 @@ export const questionStore = create<QuestionStore>()(
         }
     )
 );
+
+/** @deprecated */
 export const updateQuestionsList = <T = AnyQuizQuestion>(
     quizId: number,
     index: number,
@@ -117,6 +120,7 @@ export const updateQuestionsList = <T = AnyQuizQuestion>(
     questionStore.setState({ listQuestions: questionListClone });
 };
 
+/** @deprecated */
 export const updateQuestion = <T extends AnyQuizQuestion>(
     quizId: number,
     questionIndex: number,
@@ -132,10 +136,12 @@ export const updateQuestion = <T extends AnyQuizQuestion>(
     recipe,
 });
 
+/** @deprecated */
 export const removeQuestionsByQuizId = (quizId: number) => setProducedState(state => {
     delete state.listQuestions[quizId];
 }, "removeQuestionsByQuizId");
 
+/** @deprecated */
 export const setVariantImageUrl = (
     quizId: number,
     questionIndex: number,
@@ -160,6 +166,7 @@ export const setVariantImageUrl = (
     url,
 });
 
+/** @deprecated */
 export const setVariantOriginalImageUrl = (
     quizId: number,
     questionIndex: number,
@@ -184,6 +191,7 @@ export const setVariantOriginalImageUrl = (
     url,
 });
 
+/** @deprecated */
 export const setPageQuestionPicture = (
     quizId: number,
     questionIndex: number,
@@ -200,6 +208,7 @@ export const setPageQuestionPicture = (
     question.content.picture = url;
 });
 
+/** @deprecated */
 export const setPageQuestionOriginalPicture = (
     quizId: number,
     questionIndex: number,
@@ -214,6 +223,7 @@ export const setPageQuestionOriginalPicture = (
     question.content.originalPicture = url;
 });
 
+/** @deprecated */
 export const setQuestionBackgroundImage = (
     quizId: number,
     questionIndex: number,
@@ -229,6 +239,7 @@ export const setQuestionBackgroundImage = (
     question.content.back = url;
 })
 
+/** @deprecated */
 export const setQuestionOriginalBackgroundImage = (
     quizId: number,
     questionIndex: number,
@@ -242,6 +253,7 @@ export const setQuestionOriginalBackgroundImage = (
     question.content.originalBack = url;
 })
 
+/** @deprecated */
 export const updateQuestionsListDragAndDrop = (
     quizId: number,
     updatedQuestions: AnyQuizQuestion[]
@@ -253,6 +265,7 @@ export const updateQuestionsListDragAndDrop = (
 };
 
 
+/** @deprecated */
 export const reorderVariants = (
     quizId: number,
     questionIndex: number,
@@ -274,6 +287,7 @@ export const reorderVariants = (
     destinationIndex,
 });
 
+/** @deprecated */
 export const createQuestion = (
     quizId: number,
     questionType: QuestionType = "variant",
@@ -312,6 +326,7 @@ export const createQuestion = (
     }
 };
 
+/** @deprecated */
 export const copyQuestion = (quizId: number, copiedQuestionIndex: number) => {
     const listQuestions = { ...questionStore.getState()["listQuestions"] };
 
@@ -324,6 +339,7 @@ export const copyQuestion = (quizId: number, copiedQuestionIndex: number) => {
     questionStore.setState({ listQuestions });
 };
 
+/** @deprecated */
 export const removeQuestionForce = (quizId: number, removedId: number) => {
     const questionListClone = { ...questionStore.getState()["listQuestions"] };
     const removedItemIndex = questionListClone[quizId].findIndex(
@@ -333,12 +349,14 @@ export const removeQuestionForce = (quizId: number, removedId: number) => {
     questionStore.setState({ listQuestions: questionListClone });
 };
 
+/** @deprecated */
 export const removeQuestion = (quizId: number, index: number) => {
     const questionListClone = { ...questionStore.getState()["listQuestions"] };
     questionListClone[quizId][index].deleted = true;
     questionStore.setState({ listQuestions: questionListClone });
 };
 
+/** @deprecated */
 export const findQuestionById = (quizId: number) => {
     let found = null;
     questionStore

src/stores/quizes.ts

@@ -65,6 +65,7 @@ export interface Quizes {
     }
 }
 
+/** @deprecated */
 export const quizStore = create<QuizStore>()(
     persist(
         (set, get) => ({

src/stores/quizes/actions.ts

@@ -69,20 +69,6 @@ export const setQuizField = <T extends keyof Quiz>(
     value,
 });
 
-export const updateQuiz = (
-    quizId: number,
-    updateFn: (quiz: Quiz) => void,
-) => setProducedState(state => {
-    const quiz = state.quizById[quizId];
-    if (!quiz) return;
-
-    updateFn(quiz);
-}, {
-    type: "updateQuiz",
-    quizId,
-    updateFn: updateFn.toString(),
-});
-
 export const incrementCurrentStep = () => setProducedState(state => {
     state.currentStep = Math.min(
         maxQuizSetupSteps, state.currentStep + 1

src/ui_kit/Header/Header.tsx

@@ -1,28 +1,15 @@
-import { Box, Button, Container, FormControl, IconButton, TextField, useMediaQuery, useTheme } from "@mui/material";
 import BackArrowIcon from "@icons/BackArrowIcon";
 import EyeIcon from "@icons/EyeIcon";
+import { Box, Button, Container, FormControl, IconButton, TextField, useMediaQuery, useTheme } from "@mui/material";
+import { decrementCurrentStep } from "@root/quizes/actions";
+import PenaLogo from "../PenaLogo";
 import CustomAvatar from "./Avatar";
 import NavMenuItem from "./NavMenuItem";
-import PenaLogo from "../PenaLogo";
-import { quizStore } from "@root/quizes";
-import { useParams } from "react-router-dom";
 
 export default function Header() {
-  const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
-  const params = Number(useParams().quizId);
-  const activeStep = listQuizes[params].step;
   const theme = useTheme();
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
 
-  const handleNext = () => {
-    updateQuizesList(params, { step: listQuizes[params].step + 1 });
-  };
-
-  const handleBack = () => {
-    let result = listQuizes[params].step - 1;
-    updateQuizesList(params, { step: result ? result : 0 });
-  };
-
   return (
     <Container
       component="nav"
@@ -46,7 +33,7 @@ export default function Header() {
           ml: "37px",
         }}
       >
-        <IconButton sx={{ p: "6px" }} onClick={() => handleBack()}>
+        <IconButton sx={{ p: "6px" }} onClick={decrementCurrentStep}>
           <BackArrowIcon />
         </IconButton>
         <FormControl fullWidth variant="standard">

src/ui_kit/QuizPreview/QuizPreviewLayout.tsx

@@ -1,5 +1,5 @@
 import { Box, Button, LinearProgress, Paper, Typography } from "@mui/material";
-import { questionStore } from "@root/questions";
+import { useQuestionsStore } from "@root/questions/store";
 import {
     decrementCurrentQuestionIndex,
     incrementCurrentQuestionIndex,
@@ -7,7 +7,6 @@ import {
 } from "@root/quizPreview";
 import { AnyQuizQuestion } from "model/questionTypes/shared";
 import { useEffect } from "react";
-import { useParams } from "react-router-dom";
 import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
 import Date from "./QuizPreviewQuestionTypes/Date";
 import Emoji from "./QuizPreviewQuestionTypes/Emoji";
@@ -20,17 +19,16 @@ import Select from "./QuizPreviewQuestionTypes/Select";
 import Text from "./QuizPreviewQuestionTypes/Text";
 import Variant from "./QuizPreviewQuestionTypes/Variant";
 import Varimg from "./QuizPreviewQuestionTypes/Varimg";
+import { notReachable } from "../../utils/notReachable";
 
 
 export default function QuizPreviewLayout() {
-    const quizId = useParams().quizId ?? 0;
+    const questions = useQuestionsStore(state => state.questions);
-    const listQuestions = questionStore((state) => state.listQuestions);
     const currentQuizStep = useQuizPreviewStore(
         (state) => state.currentQuestionIndex
     );
 
-    const quizQuestions = listQuestions[quizId] ?? [];
+    const nonDeletedQuizQuestions = questions.filter(
-    const nonDeletedQuizQuestions = quizQuestions.filter(
         (question) => !question.deleted
     );
     const maxCurrentQuizStep =
@@ -155,6 +153,6 @@ function QuestionPreviewComponent({ question }: {
         case "file": return <File question={question} />;
         case "page": return <Page question={question} />;
         case "rating": return <Rating question={question} />;
-        default: throw new Error("Unknown question type");
+        default: notReachable(question);
     }
 }

src/ui_kit/Sidebar.tsx

@@ -1,32 +1,27 @@
-import { useState } from "react";
-import { useParams } from "react-router-dom";
-import {
-    Container,
-    Box,
-    useTheme,
-    List,
-    Typography,
-    IconButton,
-} from "@mui/material";
-
-import { quizStore } from "@root/quizes";
-
-import MegaphoneIcon from "@icons/MegaphoneIcon";
-import QuestionIcon from "@icons/QuestionIcon";
-import QuestionsMapIcon from "@icons/QuestionsMapIcon";
 import ChartPieIcon from "@icons/ChartPieIcon";
+import CollapseMenuIcon from "@icons/CollapseMenuIcon";
 import ContactBookIcon from "@icons/ContactBookIcon";
 import FlowArrowIcon from "@icons/FlowArrowIcon";
-import CollapseMenuIcon from "@icons/CollapseMenuIcon";
-import TagIcon from "@icons/TagIcon";
-import PencilCircleIcon from "@icons/PencilCircleIcon";
-import PuzzlePieceIcon from "@icons/PuzzlePieceIcon";
 import GearIcon from "@icons/GearIcon";
 import LayoutIcon from "@icons/LayoutIcon";
-import MenuItem from "./MenuItem";
+import MegaphoneIcon from "@icons/MegaphoneIcon";
+import PencilCircleIcon from "@icons/PencilCircleIcon";
+import PuzzlePieceIcon from "@icons/PuzzlePieceIcon";
+import QuestionIcon from "@icons/QuestionIcon";
+import QuestionsMapIcon from "@icons/QuestionsMapIcon";
+import TagIcon from "@icons/TagIcon";
 import { quizSetupSteps } from "@model/quizSettings";
-import { useQuizStore } from "@root/quizes/store";
+import {
+    Box,
+    IconButton,
+    List,
+    Typography,
+    useTheme
+} from "@mui/material";
 import { setCurrentStep } from "@root/quizes/actions";
+import { useQuizStore } from "@root/quizes/store";
+import { useState } from "react";
+import MenuItem from "./MenuItem";
 
 const createQuizMenuItems = [
     [LayoutIcon, "Стартовая страница"],

src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx

@@ -3,24 +3,24 @@ import {
     Button,
     Paper,
     Typography,
-  useTheme,
     useMediaQuery,
+    useTheme,
 } from "@mui/material";
-import { useParams } from "react-router-dom";
+import { useCurrentQuiz } from "@root/quizes/hooks";
 
-import { quizStore } from "@root/quizes";
 
 export default function QuizPreviewLayout() {
-  const quizId = Number(useParams().quizId);
-  const { listQuizes } = quizStore();
-  const question = listQuizes[quizId];
     const theme = useTheme();
+    const { quiz } = useCurrentQuiz();
     const isTablet = useMediaQuery(theme.breakpoints.down(630));
+
+    if (!quiz) return null;
+
     const isMediaFileExist =
-    (question.config.startpage.background.type === "image" &&
+        (quiz.config.startpage.background.type === "image" &&
-      question.config.startpage.background.desktop) ||
+            quiz.config.startpage.background.desktop) ||
-    (question.config.startpage.background.type === "video" &&
+        (quiz.config.startpage.background.type === "video" &&
-      question.config.startpage.background.video);
+            quiz.config.startpage.background.video);
 
     return (
         <Paper className="quiz-preview-draghandle" sx={{ height: "100%" }}>
@@ -28,7 +28,7 @@ export default function QuizPreviewLayout() {
                 sx={{
                     display: "flex",
                     flexDirection:
-            question.config.startpage.position === "ltr"
+                        quiz.config.startpage.position === "left"
                             ? "row"
                             : "row-reverse",
                     flexGrow: 1,
@@ -52,10 +52,10 @@ export default function QuizPreviewLayout() {
                             gap: "20px",
                         }}
                     >
-            {question.config.startpage.background.type === "image" &&
+                        {quiz.config.startpage.background.type === "image" &&
-              question.config.startpage.background.desktop && (
+                            quiz.config.startpage.background.desktop && (
                                 <img
-                  src={question.config.startpage.background.desktop}
+                                    src={quiz.config.startpage.background.desktop}
                                     style={{
                                         height: "30px",
                                         maxWidth: "50px",
@@ -65,7 +65,7 @@ export default function QuizPreviewLayout() {
                                 />
                             )}
                         <Typography sx={{ fontSize: "12px" }}>
-              {question.config.info.orgname}
+                            {quiz.config.info.orgname}
                         </Typography>
                     </Box>
                     <Box
@@ -77,12 +77,12 @@ export default function QuizPreviewLayout() {
                             justifyContent: "center",
                         }}
                     >
-            <Typography sx={{ fontWeight: "bold" }}>{question.name}</Typography>
+                        <Typography sx={{ fontWeight: "bold" }}>{quiz.name}</Typography>
                         <Typography sx={{ fontSize: "12px" }}>
-              {question.config.startpage.description}
+                            {quiz.config.startpage.description}
                         </Typography>
                         <Box>
-              {question.config.startpage.button && (
+                            {quiz.config.startpage.button && (
                                 <Button
                                     variant="contained"
                                     sx={{
@@ -90,7 +90,7 @@ export default function QuizPreviewLayout() {
                                         padding: "10px 15px",
                                     }}
                                 >
-                  {question.config.startpage.button}
+                                    {quiz.config.startpage.button}
                                 </Button>
                             )}
                         </Box>
@@ -99,19 +99,19 @@ export default function QuizPreviewLayout() {
                         <Typography
                             sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}
                         >
-              {question.config.info.phonenumber}
+                            {quiz.config.info.phonenumber}
                         </Typography>
                         <Typography sx={{ fontSize: "12px" }}>
-              {question.config.info.law}
+                            {quiz.config.info.law}
                         </Typography>
                     </Box>
                 </Box>
                 {!isTablet && isMediaFileExist && (
                     <Box sx={{ width: "60%" }}>
-            {question.config.startpage.background.type === "image" &&
+                        {quiz.config.startpage.background.type === "image" &&
-              question.config.startpage.background.desktop && (
+                            quiz.config.startpage.background.desktop && (
                                 <img
-                  src={question.config.startpage.background.desktop}
+                                    src={quiz.config.startpage.background.desktop}
                                     alt=""
                                     style={{
                                         width: "100%",
@@ -120,10 +120,10 @@ export default function QuizPreviewLayout() {
                                     }}
                                 />
                             )}
-            {question.config.startpage.background.type === "video" &&
+                        {quiz.config.startpage.background.type === "video" &&
-              question.config.startpage.background.video && (
+                            quiz.config.startpage.background.video && (
                                 <video
-                  src={question.config.startpage.background.video}
+                                    src={quiz.config.startpage.background.video}
                                     style={{
                                         width: "100%",
                                         height: "100%",

src/ui_kit/Stepper.tsx

@@ -30,7 +30,7 @@ export default function ProgressMobileStepper({
                 variant="progress"
                 steps={maxDisplayQuizSetupSteps}
                 position="static"
-        activeStep={activeStep - 1}
+                activeStep={quizSetupSteps[activeStep].displayStep - 1}
                 sx={{
                     width: "100%",
                     flexGrow: 1,