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,102 +1,100 @@
-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 theme = useTheme();
-  const params = Number(useParams().quizId);
+    const [isExpanded, setIsExpanded] = useState(false);
-  const theme = useTheme();
+    const { quiz, updateQuiz } = useCurrentQuiz();
-  const upMd = useMediaQuery(theme.breakpoints.up("md"));
-  const upSm = useMediaQuery(theme.breakpoints.up("sm"));
-  const [isExpanded, setIsExpanded] = useState(false);
 
-  const expandedHC = (bool: boolean) => {
+    const expandedHC = (bool: boolean) => {
-    setIsExpanded(bool);
+        setIsExpanded(bool);
-  };
+    };
-  const mutationOrgMetaHC = (event: ChangeEvent<HTMLInputElement>) => {
+
-    let SPageClone = listQuizes[params].config;
+    const mutationOrgMetaHC = (event: ChangeEvent<HTMLInputElement>) => {
-    SPageClone.meta = event.target.value;
+        updateQuiz(quiz => {
-    updateQuizesList(params, { config: SPageClone });
+            quiz.config.meta = event.target.value;
-  };
+        });
-  return (
+    };
-    <Box
+
-      sx={{
+    return (
-        width: "100%",
+        <Box
-        paddingBottom: "15px",
+            sx={{
-        overflow: "hidden",
+                width: "100%",
-        boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
+                paddingBottom: "15px",
+                overflow: "hidden",
+                boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
                             0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
                             0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
                             0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
                             0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 
                             0px 2.76726px 8.55082px rgba(210, 208, 225, 0.067
                               4749)`,
-      }}
+            }}
-    >
-      <Box
-        sx={{
-          width: "100%",
-          backgroundColor: "transparent",
-        }}
-      >
-        <Box
-          onClick={() => expandedHC(!isExpanded)}
-          sx={{
-            paddingTop: "15px",
-            paddingRight: "20px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            cursor: "pointer",
-            userSelect: "none",
-          }}
         >
-          <Link
+            <Box
-            sx={{
+                sx={{
-              mt: "20px",
+                    width: "100%",
-              fontSize: "16px",
+                    backgroundColor: "transparent",
-              lineHeight: "19px",
+                }}
-              color: theme.palette.brightPurple.main,
-              textDecorationColor: theme.palette.brightPurple.main,
-            }}
-          >
-            Дополнительно
-          </Link>
-        </Box>
-        {isExpanded && (
-          <Box
-            sx={{
-              backgroundColor: "transparent",
-              gap: "15px",
-              paddingTop: "15px",
-            }}
-          >
-            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
-              Mета заголовок
-            </Typography>
-            <CustomTextField
-              placeholder="Текст-заполнитель — это текст, который "
-              text={listQuizes[params].config.meta}
-              onChange={mutationOrgMetaHC}
-            />
-            <Typography
-              sx={{
-                mt: "20px",
-                fontSize: "16px",
-                lineHeight: "19px",
-                maxWidth: "80%",
-                color: theme.palette.grey3.main,
-              }}
             >
-              Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет
+                <Box
-              Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет
+                    onClick={() => expandedHC(!isExpanded)}
-              Текст-заполнитель
+                    sx={{
-            </Typography>
+                        paddingTop: "15px",
-          </Box>
+                        paddingRight: "20px",
-        )}
+                        display: "flex",
-      </Box>
+                        alignItems: "center",
-    </Box>
+                        justifyContent: "space-between",
-  );
+                        cursor: "pointer",
+                        userSelect: "none",
+                    }}
+                >
+                    <Link
+                        sx={{
+                            mt: "20px",
+                            fontSize: "16px",
+                            lineHeight: "19px",
+                            color: theme.palette.brightPurple.main,
+                            textDecorationColor: theme.palette.brightPurple.main,
+                        }}
+                    >
+                        Дополнительно
+                    </Link>
+                </Box>
+                {isExpanded && quiz && (
+                    <Box
+                        sx={{
+                            backgroundColor: "transparent",
+                            gap: "15px",
+                            paddingTop: "15px",
+                        }}
+                    >
+                        <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
+                            Mета заголовок
+                        </Typography>
+                        <CustomTextField
+                            placeholder="Текст-заполнитель — это текст, который "
+                            text={quiz.config.meta}
+                            onChange={mutationOrgMetaHC}
+                        />
+                        <Typography
+                            sx={{
+                                mt: "20px",
+                                fontSize: "16px",
+                                lineHeight: "19px",
+                                maxWidth: "80%",
+                                color: theme.palette.grey3.main,
+                            }}
+                        >
+                            Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет
+                            Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет
+                            Текст-заполнитель
+                        </Typography>
+                    </Box>
+                )}
+            </Box>
+        </Box>
+    );
 }

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

@@ -1,139 +1,139 @@
 import {
-  Box,
+    Box,
-  Button,
+    Button,
-  Paper,
+    Paper,
-  Typography,
+    Typography,
-  useTheme,
+    useMediaQuery,
-  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 theme = useTheme();
-  const { listQuizes } = quizStore();
+    const { quiz } = useCurrentQuiz();
-  const question = listQuizes[quizId];
+    const isTablet = useMediaQuery(theme.breakpoints.down(630));
-  const theme = useTheme();
-  const isTablet = useMediaQuery(theme.breakpoints.down(630));
-  const isMediaFileExist =
-    (question.config.startpage.background.type === "image" &&
-      question.config.startpage.background.desktop) ||
-    (question.config.startpage.background.type === "video" &&
-      question.config.startpage.background.video);
 
-  return (
+    if (!quiz) return null;
-    <Paper className="quiz-preview-draghandle" sx={{ height: "100%" }}>
+
-      <Box
+    const isMediaFileExist =
-        sx={{
+        (quiz.config.startpage.background.type === "image" &&
-          display: "flex",
+            quiz.config.startpage.background.desktop) ||
-          flexDirection:
+        (quiz.config.startpage.background.type === "video" &&
-            question.config.startpage.position === "ltr"
+            quiz.config.startpage.background.video);
-              ? "row"
+
-              : "row-reverse",
+    return (
-          flexGrow: 1,
+        <Paper className="quiz-preview-draghandle" sx={{ height: "100%" }}>
-          height: "100%",
+            <Box
-          "&::-webkit-scrollbar": { width: 0 },
+                sx={{
-        }}
+                    display: "flex",
-      >
+                    flexDirection:
-        <Box
+                        quiz.config.startpage.position === "left"
-          sx={{
+                            ? "row"
-            width: isMediaFileExist && !isTablet ? "40%" : "100%",
+                            : "row-reverse",
-            padding: "16px",
+                    flexGrow: 1,
-            display: "flex",
+                    height: "100%",
-            flexDirection: "column",
+                    "&::-webkit-scrollbar": { width: 0 },
-            alignItems: isMediaFileExist && !isTablet ? "flex-start" : "center",
+                }}
-          }}
-        >
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              gap: "20px",
-            }}
-          >
-            {question.config.startpage.background.type === "image" &&
-              question.config.startpage.background.desktop && (
-                <img
-                  src={question.config.startpage.background.desktop}
-                  style={{
-                    height: "30px",
-                    maxWidth: "50px",
-                    objectFit: "cover",
-                  }}
-                  alt=""
-                />
-              )}
-            <Typography sx={{ fontSize: "12px" }}>
-              {question.config.info.orgname}
-            </Typography>
-          </Box>
-          <Box
-            sx={{
-              flexGrow: 1,
-              display: "flex",
-              gap: "10px",
-              flexDirection: "column",
-              justifyContent: "center",
-            }}
-          >
-            <Typography sx={{ fontWeight: "bold" }}>{question.name}</Typography>
-            <Typography sx={{ fontSize: "12px" }}>
-              {question.config.startpage.description}
-            </Typography>
-            <Box>
-              {question.config.startpage.button && (
-                <Button
-                  variant="contained"
-                  sx={{
-                    fontSize: "16px",
-                    padding: "10px 15px",
-                  }}
-                >
-                  {question.config.startpage.button}
-                </Button>
-              )}
-            </Box>
-          </Box>
-          <Box>
-            <Typography
-              sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}
             >
-              {question.config.info.phonenumber}
+                <Box
-            </Typography>
+                    sx={{
-            <Typography sx={{ fontSize: "12px" }}>
+                        width: isMediaFileExist && !isTablet ? "40%" : "100%",
-              {question.config.info.law}
+                        padding: "16px",
-            </Typography>
+                        display: "flex",
-          </Box>
+                        flexDirection: "column",
-        </Box>
+                        alignItems: isMediaFileExist && !isTablet ? "flex-start" : "center",
-        {!isTablet && isMediaFileExist && (
+                    }}
-          <Box sx={{ width: "60%" }}>
+                >
-            {question.config.startpage.background.type === "image" &&
+                    <Box
-              question.config.startpage.background.desktop && (
+                        sx={{
-                <img
+                            display: "flex",
-                  src={question.config.startpage.background.desktop}
+                            alignItems: "center",
-                  alt=""
+                            gap: "20px",
-                  style={{
+                        }}
-                    width: "100%",
+                    >
-                    height: "100%",
+                        {quiz.config.startpage.background.type === "image" &&
-                    objectFit: "cover",
+                            quiz.config.startpage.background.desktop && (
-                  }}
+                                <img
-                />
+                                    src={quiz.config.startpage.background.desktop}
-              )}
+                                    style={{
-            {question.config.startpage.background.type === "video" &&
+                                        height: "30px",
-              question.config.startpage.background.video && (
+                                        maxWidth: "50px",
-                <video
+                                        objectFit: "cover",
-                  src={question.config.startpage.background.video}
+                                    }}
-                  style={{
+                                    alt=""
-                    width: "100%",
+                                />
-                    height: "100%",
+                            )}
-                    objectFit: "cover",
+                        <Typography sx={{ fontSize: "12px" }}>
-                  }}
+                            {quiz.config.info.orgname}
-                />
+                        </Typography>
-              )}
+                    </Box>
-          </Box>
+                    <Box
-        )}
+                        sx={{
-      </Box>
+                            flexGrow: 1,
-    </Paper>
+                            display: "flex",
-  );
+                            gap: "10px",
+                            flexDirection: "column",
+                            justifyContent: "center",
+                        }}
+                    >
+                        <Typography sx={{ fontWeight: "bold" }}>{quiz.name}</Typography>
+                        <Typography sx={{ fontSize: "12px" }}>
+                            {quiz.config.startpage.description}
+                        </Typography>
+                        <Box>
+                            {quiz.config.startpage.button && (
+                                <Button
+                                    variant="contained"
+                                    sx={{
+                                        fontSize: "16px",
+                                        padding: "10px 15px",
+                                    }}
+                                >
+                                    {quiz.config.startpage.button}
+                                </Button>
+                            )}
+                        </Box>
+                    </Box>
+                    <Box>
+                        <Typography
+                            sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}
+                        >
+                            {quiz.config.info.phonenumber}
+                        </Typography>
+                        <Typography sx={{ fontSize: "12px" }}>
+                            {quiz.config.info.law}
+                        </Typography>
+                    </Box>
+                </Box>
+                {!isTablet && isMediaFileExist && (
+                    <Box sx={{ width: "60%" }}>
+                        {quiz.config.startpage.background.type === "image" &&
+                            quiz.config.startpage.background.desktop && (
+                                <img
+                                    src={quiz.config.startpage.background.desktop}
+                                    alt=""
+                                    style={{
+                                        width: "100%",
+                                        height: "100%",
+                                        objectFit: "cover",
+                                    }}
+                                />
+                            )}
+                        {quiz.config.startpage.background.type === "video" &&
+                            quiz.config.startpage.background.video && (
+                                <video
+                                    src={quiz.config.startpage.background.video}
+                                    style={{
+                                        width: "100%",
+                                        height: "100%",
+                                        objectFit: "cover",
+                                    }}
+                                />
+                            )}
+                    </Box>
+                )}
+            </Box>
+        </Paper>
+    );
 }

src/ui_kit/Stepper.tsx

@@ -3,59 +3,59 @@ import MobileStepper from "@mui/material/MobileStepper";
 import { QuizSetupStep, maxDisplayQuizSetupSteps, quizSetupSteps } from "@model/quizSettings";
 
 interface Props {
-  activeStep: QuizSetupStep;
+    activeStep: QuizSetupStep;
 }
 
 export default function ProgressMobileStepper({
-  activeStep,
+    activeStep,
 }: Props) {
-  const theme = useTheme();
+    const theme = useTheme();
-  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
 
-  return (
+    return (
-    <Box
+        <Box
-      sx={{
+            sx={{
-        maxWidth: isTablet ? "800px" : "100%",
+                maxWidth: isTablet ? "800px" : "100%",
-        display: "flex",
+                display: "flex",
-        justifyContent: "center",
+                justifyContent: "center",
-        flexDirection: "column",
+                flexDirection: "column",
-        height: "73px",
+                height: "73px",
-        borderRadius: "13px",
+                borderRadius: "13px",
-        border: "solid #7E2AEA 1px",
+                border: "solid #7E2AEA 1px",
-        padding: "0 0 20px 0",
+                padding: "0 0 20px 0",
-        overflow: "hidden",
+                overflow: "hidden",
-      }}
+            }}
-    >
-      <MobileStepper
-        variant="progress"
-        steps={maxDisplayQuizSetupSteps}
-        position="static"
-        activeStep={activeStep - 1}
-        sx={{
-          width: "100%",
-          flexGrow: 1,
-          padding: "8px 0",
-          "& .css-1ej0n1q-MuiLinearProgress-root-MuiMobileStepper-progress": {
-            height: "10px",
-            background: "#ffffff",
-            width: "100%",
-          },
-          "& .css-1v0msyf-MuiLinearProgress-bar1": {
-            background: "#7e2aea",
-          },
-        }}
-        nextButton={<></>}
-        backButton={<></>}
-      />
-      <Box sx={{ padding: "3px 3px 3px 20px" }}>
-        <Typography
-          sx={{ fontWeight: 400, fontSize: "12px", lineHeight: "14.22px" }}
         >
-          {" "}
+            <MobileStepper
-          Шаг {quizSetupSteps[activeStep].displayStep} из {maxDisplayQuizSetupSteps}
+                variant="progress"
-        </Typography>
+                steps={maxDisplayQuizSetupSteps}
-        <Typography>{quizSetupSteps[activeStep].text}</Typography>
+                position="static"
-      </Box>
+                activeStep={quizSetupSteps[activeStep].displayStep - 1}
-    </Box>
+                sx={{
-  );
+                    width: "100%",
+                    flexGrow: 1,
+                    padding: "8px 0",
+                    "& .css-1ej0n1q-MuiLinearProgress-root-MuiMobileStepper-progress": {
+                        height: "10px",
+                        background: "#ffffff",
+                        width: "100%",
+                    },
+                    "& .css-1v0msyf-MuiLinearProgress-bar1": {
+                        background: "#7e2aea",
+                    },
+                }}
+                nextButton={<></>}
+                backButton={<></>}
+            />
+            <Box sx={{ padding: "3px 3px 3px 20px" }}>
+                <Typography
+                    sx={{ fontWeight: 400, fontSize: "12px", lineHeight: "14.22px" }}
+                >
+                    {" "}
+                    Шаг {quizSetupSteps[activeStep].displayStep} из {maxDisplayQuizSetupSteps}
+                </Typography>
+                <Typography>{quizSetupSteps[activeStep].text}</Typography>
+            </Box>
+        </Box>
+    );
 }