fix some types

remove some ts-ignore's
refactor stores

src/api/quizRelase.ts

@@ -1,7 +1,7 @@
+import { GetQuizDataResponse } from "@model/api/getQuizData";
 import axios from "axios";
 
 import type { AxiosError } from "axios";
-import type { GetDataResponse } from "../model/settingsData";
 
 let SESSIONS = "";
 
@@ -19,7 +19,7 @@ export const publicationMakeRequest = ({ url, body }: any) => {
 };
 
 export async function getData(quizId: string): Promise<{
-  data: GetDataResponse | null;
+  data: GetQuizDataResponse | null;
   isRecentlyCompleted: boolean;
   error?: string;
 }> {
@@ -29,7 +29,7 @@ export async function getData(quizId: string): Promise<{
       : "ef836ff8-35b1-4031-9acf-af5766bac2b2";
 
   try {
-    const { data, headers } = await axios<GetDataResponse>(
+    const { data, headers } = await axios<GetQuizDataResponse>(
       `https://s.hbpn.link/answer/settings`,
       {
         method: "POST",

src/model/api/getQuizData.ts

@@ -0,0 +1,55 @@
+import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
+import { QuizSettings } from "@model/settingsData";
+
+export interface GetQuizDataResponse {
+    cnt: number;
+    settings: {
+        fp: boolean;
+        rep: boolean;
+        name: string;
+        cfg: string;
+        lim: number;
+        due: number;
+        delay: number;
+        pausable: boolean;
+    };
+    items: {
+        id: number;
+        title: string;
+        desc: string;
+        typ: string;
+        req: boolean;
+        p: number;
+        c: string;
+    }[];
+}
+
+export function parseQuizData(quizDataResponse: GetQuizDataResponse, quizId: string): QuizSettings {
+    const items: QuizSettings["items"] = quizDataResponse.items.map((item) => {
+        const content = JSON.parse(item.c);
+
+        return {
+            description: item.desc,
+            id: item.id,
+            page: item.p,
+            required: item.req,
+            title: item.title,
+            type: item.typ,
+            content
+        } as unknown as AnyTypedQuizQuestion;
+    });
+
+    const settings: QuizSettings["settings"] = {
+        qid: quizId,
+        fp: quizDataResponse.settings.fp,
+        rep: quizDataResponse.settings.rep,
+        name: quizDataResponse.settings.name,
+        cfg: JSON.parse(quizDataResponse?.settings.cfg),
+        lim: quizDataResponse.settings.lim,
+        due: quizDataResponse.settings.due,
+        delay: quizDataResponse.settings.delay,
+        pausable: quizDataResponse.settings.pausable
+    };
+
+    return { cnt: quizDataResponse.cnt, settings, items };
+}

src/model/settingsData.ts

@@ -1,5 +1,4 @@
-import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
+import { AnyTypedQuizQuestion } from "./questionTypes/shared";
-// import { QuizConfig } from "@model/quizSettings";
 
 export type QuizStartpageType = "standard" | "expanded" | "centered" | null;
 
@@ -9,55 +8,50 @@ export type QuizType = "quiz" | "form";
 
 export type QuizResultsType = true | null;
 
+export type QuizTheme =
+    | "StandardTheme"
+    | "StandardDarkTheme"
+    | "PinkTheme"
+    | "PinkDarkTheme"
+    | "BlackWhiteTheme"
+    | "OliveTheme"
+    | "YellowTheme"
+    | "GoldDarkTheme"
+    | "PurpleTheme"
+    | "BlueTheme"
+    | "BlueDarkTheme";
+
 export type FCField = {
-    text: string
+    text: string;
-    innerText: string
+    innerText: string;
-    key: string
+    key: string;
-    required: boolean
+    required: boolean;
-    used: boolean
+    used: boolean;
-}
+};
-export interface GetDataResponse {
+
-    cnt: number;
+export type QuizSettings = {
+    items: AnyTypedQuizQuestion[];
     settings: {
+        qid: string;
         fp: boolean;
         rep: boolean;
         name: string;
-        cfg: string;
         lim: number;
         due: number;
         delay: number;
         pausable: boolean;
+        cfg: QuizConfig;
     };
-    items: GetItems[];
-} 
-
-
-
-export type QuestionsStore = {
-    items: (AnyTypedQuizQuestion)[];
-    settings: Settings;
     cnt: number;
 };
 
-export interface Settings {
-
-    fp: boolean; 
-    rep: boolean;
-    name: string; 
-    lim: number; 
-    due: number; 
-    delay: number; 
-    pausable: boolean; 
-    cfg: QuizConfig
-}
-
 export interface QuizConfig {
     type: QuizType;
     noStartPage: boolean;
     startpageType: QuizStartpageType;
     results: QuizResultsType;
     haveRoot: string;
-    theme: "StandardTheme" | "StandardDarkTheme" | "PinkTheme" | "PinkDarkTheme" | "BlackWhiteTheme" | "OliveTheme" | "YellowTheme" | "GoldDarkTheme" | "PurpleTheme" | "BlueTheme" | "BlueDarkTheme";
+    theme: QuizTheme;
     resultInfo: {
         when: "email" | "";
         share: boolean;
@@ -84,7 +78,6 @@ export interface QuizConfig {
             cycle: boolean;
         };
     };
-
     formContact: {
         title: string;
         desc: string;
@@ -93,7 +86,7 @@ export interface QuizConfig {
         phone: FCField;
         text: FCField;
         address: FCField;
-        button: string
+        button: string;
     };
     info: {
         phonenumber: string;
@@ -105,26 +98,12 @@ export interface QuizConfig {
     meta: string;
 }
 
-export interface GetItems {
-    id: number;
-    title: string;
-    desc: string;
-    typ: string;
-    req: boolean;
-    p: number;
-    c: string;
-}
-
 export interface QuizItems {
-
     description: string;
     id: number;
     page: number;
     required: boolean;
     title: string;
     type: string;
-        content: QuizItemsContent
+    content: unknown;
-}
-export interface QuizItemsContent {
-
 } 

src/pages/ViewPublicationPage/ContactForm.tsx

@@ -1,27 +1,34 @@
-import { Box, Typography, Button, useMediaQuery, TextField, Link, InputAdornment, useTheme } from "@mui/material";
+import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
-import NameIcon from "@icons/ContactFormIcon/NameIcon";
 import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
+import NameIcon from "@icons/ContactFormIcon/NameIcon";
 import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
 import TextIcon from "@icons/ContactFormIcon/TextIcon";
-import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
+import { Box, Button, InputAdornment, Link, TextField as MuiTextField, TextFieldProps, Typography, useMediaQuery, useTheme } from "@mui/material";
-import { useDebouncedCallback } from "use-debounce";
+
 
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
-import { useEffect, useRef, useState } from "react";
+import { FC, useRef, useState } from "react";
-import { useQuestionsStore } from "@stores/quizData/store";
 
-import { checkEmptyData } from "./tools/checkEmptyData";
-import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
-import { enqueueSnackbar } from "notistack";
 import { sendFC } from "@api/quizRelase";
 import { NameplateLogo } from "@icons/NameplateLogo";
-import { modes } from "../../utils/themes/Publication/themePublication";
 import { QuizQuestionResult } from "@model/questionTypes/result";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
+import { enqueueSnackbar } from "notistack";
 import { ApologyPage } from "./ApologyPage";
+import { checkEmptyData } from "./tools/checkEmptyData";
+import { useQuestionsStore } from "@stores/quizData/store";
 
 
+const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
 
-const EMAIL_REGEXP = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu;
+const EMAIL_REGEXP = /^(([^<>()[\].,:\s@"]+(\.[^<>()[\].,:\s@"]+)*)|(".+"))@(([^<>()[\].,:\s@"]+\.)+[^<>()[\].,:\s@"]{2,})$/iu;
+
+type ContactType =
+    | "name"
+    | "email"
+    | "phone"
+    | "text"
+    | "adress";
 
 type ContactFormProps = {
     currentQuestion: any;
@@ -30,14 +37,6 @@ type ContactFormProps = {
     setShowResultForm: (show: boolean) => void;
 };
 
-const icons = [
-  { type: "name", icon: NameIcon, defaultText: "Введите имя", defaultTitle: "имя", backendName: "name" },
-  { type: "email", icon: EmailIcon, defaultText: "Введите Email", defaultTitle: "Email", backendName: "email" },
-  { type: "phone", icon: PhoneIcon, defaultText: "Введите номер телефона", defaultTitle: "номер телефона", backendName: "phone" },
-  { type: "text", icon: TextIcon, defaultText: "Введите фамилию", defaultTitle: "фамилию", backendName: "adress" },
-  { type: "address", icon: AddressIcon, defaultText: "Введите адрес", defaultTitle: "адрес", backendName: "adress" },
-]
-
 export const ContactForm = ({
     currentQuestion,
     showResultForm,
@@ -58,49 +57,36 @@ export const ContactForm = ({
     const [fire, setFire] = useState(false)
     const isMobile = useMediaQuery(theme.breakpoints.down(850));
 
-  const followNextForm = () => {
+    const resultQuestion: QuizQuestionResult = items.find((question): question is QuizQuestionResult => {
-    setShowContactForm(false);
-    setShowResultForm(true);
-  };
-  const mode = modes;
-  //@ts-ignore
-  const resultQuestion: QuizQuestionResult = items.find((question) => {
         if (settings?.cfg.haveRoot) { //ветвимся
             return (
                 question.type === "result" &&
-        //@ts-ignore
                 question.content.rule.parentId === currentQuestion.content.id
-      )
+            );
         } else {// не ветвимся
             return (
                 question.type === "result" &&
                 question.content.rule.parentId === "line"
-      )
-    }
-
-  }
             );
+        }
+    })!;
 
     const inputHC = async () => {
+        if (!settings) return;
 
-    const body = {}
+        const body: Partial<Record<ContactType, string>> = {};
-    //@ts-ignore
+
-    if (name.length > 0) body.name = name
+        if (name.length > 0) body.name = name;
-    //@ts-ignore
+        if (email.length > 0) body.email = email;
-    if (email.length > 0) body.email = email
+        if (phone.length > 0) body.phone = phone;
-    //@ts-ignore
+        if (text.length > 0) body.text = text;
-    if (phone.length > 0) body.phone = phone
+        if (adress.length > 0) body.adress = adress;
-    //@ts-ignore
-    if (text.length > 0) body.text = text
-    //@ts-ignore
-    if (adress.length > 0) body.adress = adress
 
         if (Object.keys(body).length > 0) {
             try {
                 await sendFC({
                     questionId: resultQuestion?.id,
                     body: body,
-          //@ts-ignore
                     qid: settings.qid
                 })
 
@@ -111,19 +97,19 @@ export const ContactForm = ({
         }
     }
     //@ts-ignore
-  let FCcopy: any = settings?.cfg.formContact.fields || settings?.cfg.formContact;
+    const FCcopy: any = settings?.cfg.formContact.fields || settings?.cfg.formContact;
 
-  let filteredFC: any = {}
+    const filteredFC: any = {};
-  for (let i in FCcopy) {
+    for (const i in FCcopy) {
-    let field = FCcopy[i]
+        const field = FCcopy[i];
-      console.log(filteredFC)
+        console.log(filteredFC);
         if (field.used) {
-      filteredFC[i] = field
+            filteredFC[i] = field;
         }
     }
-  let isWide = Object.keys(filteredFC).length > 2
+    const isWide = Object.keys(filteredFC).length > 2;
-  console.log(isWide)
 
+    if (!settings) throw new Error("settings is null");
     if (!resultQuestion) return <ApologyPage message="не получилось найти результат для этой ветки :(" />
 
     return (
@@ -292,13 +278,11 @@ export const ContactForm = ({
                     >
                         <NameplateLogo style={{
                             fontSize: "34px",
-              //@ts-ignore
+                            color: quizThemes[settings.cfg.theme].isLight ? "#151515" : "#FFFFFF"
-              color: mode[settings.cfg.theme] ? "#151515" : "#FFFFFF"
                         }} />
                         <Typography sx={{
                             fontSize: "20px",
-              //@ts-ignore
+                            color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF", whiteSpace: "nowrap"
-              color: mode[settings.cfg.theme] ? "#4D4D4D" : "#F5F7FF", whiteSpace: "nowrap"
                         }}>
                             Сделано на PenaQuiz
                         </Typography>
@@ -316,10 +300,8 @@ const Inputs = ({
     text, setText,
     adress, setAdress
 }: any) => {
-  const { settings, items } = useQuestionsStore()
+    const { settings } = useQuestionsStore()
 
-  console.log("______________________EMAIL_REGEXP.test(email)")
-  console.log(EMAIL_REGEXP.test(email))
 
     //@ts-ignore
     const FC: any = settings?.cfg.formContact.fields || settings?.cfg.formContact
@@ -361,8 +343,9 @@ const Inputs = ({
 const CustomInput = ({ title, desc, Icon, onChange }: any) => {
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down(600));
-  //@ts-ignore
+
-  return <Box m="15px 0">
+    return (
+        <Box m="15px 0">
             <Typography mb="7px" color={theme.palette.text.primary}>{title}</Typography>
 
             <TextField
@@ -376,4 +359,5 @@ const CustomInput = ({ title, desc, Icon, onChange }: any) => {
                 }}
             />
         </Box>
+    )
 }

src/pages/ViewPublicationPage/Footer.tsx

@@ -1,18 +1,16 @@
-import { useState, useEffect } from "react";
 import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { useCallback, useMemo, useState } from "react";
 
-import type { AnyTypedQuizQuestion, QuizQuestionBase } from "../../model/questionTypes/shared";
-import { useQuestionsStore } from "@stores/quizData/store";
 import { getQuestionById } from "@stores/quizData/actions";
-import { useQuizViewStore } from "@stores/quizView/store";
-import { enqueueSnackbar } from "notistack";
-import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
-import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
 
-import { modes } from "../../utils/themes/Publication/themePublication";
+import { enqueueSnackbar } from "notistack";
+import type { AnyTypedQuizQuestion, QuizQuestionBase } from "../../model/questionTypes/shared";
+
 import { checkEmptyData } from "./tools/checkEmptyData";
 
 import type { QuizQuestionResult } from "@model/questionTypes/result";
+import { useQuestionsStore } from "@stores/quizData/store";
+import { useQuizViewStore } from "@stores/quizView/store";
 
 type FooterProps = {
     setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
@@ -25,99 +23,17 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
     const theme = useTheme();
 
     const { settings, items } = useQuestionsStore();
-  const { answers } = useQuizViewStore();
+    const answers = useQuizViewStore(state => state.answers);
-
-  const mode = modes;
 
     const [stepNumber, setStepNumber] = useState(1);
-  const [disablePreviousButton, setDisablePreviousButton] = useState<boolean>(false);
-  const [disableNextButton, setDisableNextButton] = useState<boolean>(false);
 
     const isMobileMini = useMediaQuery(theme.breakpoints.down(382));
-  const linear = !items.find(({ content }) => content.rule.parentId === "root");
+    const isLinear = !items.some(({ content }) => content.rule.parentId === "root");
 
-  useEffect(() => {
+    const getNextQuestionId = useCallback(() => {
-    // Логика для аргумента disabled у кнопки "Назад"
+        console.log("Смотрим какой вопрос будет дальше. Что у нас сегодня вкусненького? Щя покажу от какого вопроса мы ищем следующий шаг");
-    if (linear) {
+        console.log(question);
-      const questionIndex = items.findIndex(({ id }) => id === question.id);
+        console.log("От вот этого /|");
-
-      const previousQuestion = items[questionIndex - 1];
-
-      if (previousQuestion) {
-        setDisablePreviousButton(false);
-      } else {
-        setDisablePreviousButton(true);
-      }
-    } else {
-      if (question?.content.rule.parentId === "root") {
-        setDisablePreviousButton(true);
-      } else {
-        setDisablePreviousButton(false);
-      }
-    }
-
-    // Логика для аргумента disabled у кнопки "Далее"
-    const answer = answers.find(({ questionId }) => questionId === question.id);
-
-    if ("required" in question.content && question.content.required && answer) {
-      setDisableNextButton(false);
-
-      return;
-    }
-
-    if ("required" in question.content && question.content.required && !answer) {
-      setDisableNextButton(true);
-
-      return;
-    }
-
-    if (linear) {
-      return;
-    }
-
-    const nextQuestionId = getNextQuestionId();
-    if (nextQuestionId) {
-      setDisableNextButton(false);
-    } else {
-      const nextQuestion = getQuestionById(question.content.rule.default);
-
-      if (nextQuestion?.type) {
-        setDisableNextButton(false);
-      }
-    }
-  }, [question, answers]);
-
-  const showResult = (nextQuestion: QuizQuestionResult) => {
-    const isEmpty = checkEmptyData({ resultData: nextQuestion })
-    console.log("isEmpty", isEmpty)
-
-    if (nextQuestion) {
-      if (nextQuestion && settings?.cfg.resultInfo.showResultForm === "before") {
-        if (isEmpty) {
-          setShowContactForm(true); //до+пустая = кидать на ФК
-
-        } else {
-          setShowResultForm(true); //до+заполнена = показать
-
-        }
-      }
-      if (nextQuestion && settings?.cfg.resultInfo.showResultForm === "after") {
-        if (isEmpty) {
-          setShowContactForm(true); //после+пустая
-
-        } else {
-          setShowContactForm(true); //после+заполнена = показать ФК
-
-        }
-      }
-    }
-
-  };
-
-  const getNextQuestionId = () => {
-    console.log("Смотрим какой вопрос будет дальше. Что у нас сегодня вкусненького? Щя покажу от какого вопроса мы ищем следующий шаг")
-    console.log(question)
-    console.log("От вот этого /|")
         let readyBeNextQuestion = "";
 
         //вопрос обязателен, анализируем ответ и условия ветвления
@@ -126,13 +42,13 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
 
 
             (question as QuizQuestionBase).content.rule.main.forEach(({ next, rules }) => {
-        let longerArray = Math.max(
+                const longerArray = Math.max(
                     rules[0].answers.length,
                     answer?.answer && Array.isArray(answer?.answer) ? answer?.answer.length : [answer?.answer].length
                 );
 
                 for (
-          var i = 0;
+                    let i = 0;
                     i < longerArray;
                     i++ // Цикл по всем эле­мен­там бОльшего массива
                 ) {
@@ -154,9 +70,9 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
         }
 
         if (!question.required) {//вопрос не обязателен и не нашли совпадений между ответами и условиями ветвления
-      console.log("вопрос не обязателен ищем дальше")
+            console.log("вопрос не обязателен ищем дальше");
-      const defaultQ = question.content.rule.default
+            const defaultQ = question.content.rule.default;
-      if (defaultQ.length > 1 && defaultQ !== " ") return defaultQ
+            if (defaultQ.length > 1 && defaultQ !== " ") return defaultQ;
             //Вопросы типа страница, ползунок, своё поле для ввода и дата не могут иметь больше 1 ребёнка. Пользователь не может настроить там дефолт
             //Кинуть на ребёнка надо даже если там нет дефолта
             if (
@@ -164,27 +80,93 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
                     question?.type === "text" ||
                     question?.type === "number" ||
                     question?.type === "page") && question.content.rule.children.length === 1
-      ) return question.content.rule.children[0]
+            ) return question.content.rule.children[0];
 
 
         }
         //ничё не нашли, ищем резулт 
-    console.log("ничё не нашли, ищем резулт ")
+        console.log("ничё не нашли, ищем резулт ");
         return items.find(q => {
-      console.log('q.type === "result"', q.type === "result")
+            console.log('q.type === "result"', q.type === "result");
-      console.log('q.content.rule.parentId', q.content.rule.parentId)
+            console.log('q.content.rule.parentId', q.content.rule.parentId);
-      //@ts-ignore
+            console.log('question.content.id', question.content.id);
-      console.log('question.content.id', question.content.id)
+            return q.type === "result" && q.content.rule.parentId === question.content.id;
-      //@ts-ignore
+        })?.id;
-      return q.type === "result" && q.content.rule.parentId === question.content.id
-    })?.id
 
+    }, [answers, items, question]);
+
+    const isPreviousButtonDisabled = useMemo(() => {
+        // Логика для аргумента disabled у кнопки "Назад"
+        if (isLinear) {
+            const questionIndex = items.findIndex(({ id }) => id === question.id);
+
+            const previousQuestion = items[questionIndex - 1];
+
+            return previousQuestion ? false : true;
+        } else {
+            return question?.content.rule.parentId === "root" ? true : false;
+        }
+    }, [items, isLinear, question?.content.rule.parentId, question.id]);
+
+    const isNextButtonDisabled = useMemo(() => {
+        // Логика для аргумента disabled у кнопки "Далее"
+        const answer = answers.find(({ questionId }) => questionId === question.id);
+
+        if ("required" in question.content && question.content.required && answer) {
+            return false;
+        }
+
+        if ("required" in question.content && question.content.required && !answer) {
+            return true;
+        }
+
+        if (isLinear) {
+            return false;
+        }
+
+        const nextQuestionId = getNextQuestionId();
+        if (nextQuestionId) {
+            return false;
+        } else {
+            const nextQuestion = getQuestionById(question.content.rule.default);
+
+            if (nextQuestion?.type) {
+                return false;
+            }
+        }
+    }, [answers, getNextQuestionId, isLinear, question.content, question.id]);
+
+    const showResult = (nextQuestion: QuizQuestionResult) => {
+        if (!settings) return;
+        if (!nextQuestion) return;
+
+        const isEmpty = checkEmptyData({ resultData: nextQuestion });
+
+        if (nextQuestion) {
+            if (nextQuestion && settings?.cfg.resultInfo.showResultForm === "before") {
+                if (isEmpty) {
+                    setShowContactForm(true); //до+пустая = кидать на ФК
+
+                } else {
+                    setShowResultForm(true); //до+заполнена = показать
+
+                }
+            }
+            if (nextQuestion && settings?.cfg.resultInfo.showResultForm === "after") {
+                if (isEmpty) {
+                    setShowContactForm(true); //после+пустая
+
+                } else {
+                    setShowContactForm(true); //после+заполнена = показать ФК
+
+                }
+            }
+        }
     };
 
-
     const followPreviousStep = () => {
-    if (linear) {
+        if (isLinear) {
-      setStepNumber(q => q - 1)
+            setStepNumber(q => q - 1);
 
             const questionIndex = items.findIndex(({ id }) => id === question.id);
 
@@ -210,8 +192,8 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
     };
 
     const followNextStep = () => {
-    if (linear) {
+        if (isLinear) {
-      setStepNumber(q => q + 1)
+            setStepNumber(q => q + 1);
 
             const questionIndex = items.findIndex(({ id }) => id === question.id);
             const nextQuestion = items[questionIndex + 1];
@@ -227,11 +209,9 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
         }
 
         const nextQuestionId = getNextQuestionId();
-    console.log(nextQuestionId)
 
         if (nextQuestionId) {
             const nextQuestion = getQuestionById(nextQuestionId);
-      console.log(nextQuestion)
 
             if (nextQuestion?.type && nextQuestion.type === "result") {
                 showResult(nextQuestion);
@@ -242,7 +222,6 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
         } else {
             enqueueSnackbar("не могу получить последующий вопрос");
         }
-
     };
 
     return (
@@ -252,8 +231,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
                 padding: "15px 0",
                 borderTop: `1px solid ${theme.palette.grey[400]}`,
                 height: '75px',
-
+                display: "flex",
-        display: "flex"
             }}
         >
             <Box
@@ -272,8 +250,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
                 {/*):(*/}
                 {/*    <NameplateLogoFQDark style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
                 {/*)}*/}
-        {linear &&
+                {isLinear &&
-          <>
                     <Box
                         sx={{
                             display: "flex",
@@ -304,7 +281,6 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
                             {items.filter(q => q.type !== "result").length}
                         </Typography>
                     </Box>
-          </>
                 }
 
                 <Box
@@ -338,7 +314,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
           </Typography> */}
                 </Box>
                 <Button
-          disabled={disablePreviousButton}
+                    disabled={isPreviousButtonDisabled}
                     variant="contained"
                     sx={{ fontSize: "16px", padding: "10px 15px", }}
                     onClick={followPreviousStep}
@@ -348,11 +324,9 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
                     ) : (
                         "← Назад"
                     )}
-
-
                 </Button>
                 <Button
-          disabled={disableNextButton}
+                    disabled={isNextButtonDisabled}
                     variant="contained"
                     sx={{ fontSize: "16px", padding: "10px 15px" }}
                     onClick={followNextStep}
@@ -362,5 +336,4 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
             </Box>
         </Box>
     );
-
 };

src/pages/ViewPublicationPage/Question.tsx

@@ -1,57 +1,41 @@
-import { useState, useEffect } from "react";
 import { Box, useMediaQuery, useTheme } from "@mui/material";
+import { useEffect, useState } from "react";
 
-import { useQuestionsStore } from "@stores/quizData/store"
 import { getQuestionById } from "@stores/quizData/actions";
 
-import { Variant } from "./questions/Variant";
+import { ContactForm } from "./ContactForm";
-import { Images } from "./questions/Images";
+import { Footer } from "./Footer";
-import { Varimg } from "./questions/Varimg";
+import { ResultForm } from "./ResultForm";
-import { Emoji } from "./questions/Emoji";
-import { Text } from "./questions/Text";
-import { Select } from "./questions/Select";
 import { Date } from "./questions/Date";
-import { Number } from "./questions/Number";
+import { Emoji } from "./questions/Emoji";
 import { File } from "./questions/File";
+import { Images } from "./questions/Images";
+import { Number } from "./questions/Number";
 import { Page } from "./questions/Page";
 import { Rating } from "./questions/Rating";
-import { Footer } from "./Footer";
+import { Select } from "./questions/Select";
-import { ContactForm } from "./ContactForm";
+import { Text } from "./questions/Text";
-import { ResultForm } from "./ResultForm";
+import { Variant } from "./questions/Variant";
+import { Varimg } from "./questions/Varimg";
 
-import type { QuestionType } from "@model/questionTypes/shared";
 import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
 
 import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
 import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
-import {modes} from "../../utils/themes/Publication/themePublication";
+import { QuizQuestionResult } from "@model/questionTypes/result";
+import { useQuestionsStore } from "@stores/quizData/store";
+import { notReachable } from "@utils/notReachable";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
 
-type QuestionProps = {
+export const Question = () => {
-  questions: AnyTypedQuizQuestion[];
+    const theme = useTheme();
-};
+    const settings = useQuestionsStore(state => state.settings);
-
+    const questions = useQuestionsStore(state => state.items);
-const QUESTIONS_MAP: any = {
-  variant: Variant,
-  images: Images,
-  varimg: Varimg,
-  emoji: Emoji,
-  text: Text,
-  select: Select,
-  date: Date,
-  number: Number,
-  file: File,
-  page: Page,
-  rating: Rating,
-};
-
-export const Question = ({ questions }: QuestionProps) => {
-  const { settings } = useQuestionsStore()
-  const theme = useTheme();  const isMobile = useMediaQuery(theme.breakpoints.down(650));
     const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>();
     const [showContactForm, setShowContactForm] = useState<boolean>(false);
     const [showResultForm, setShowResultForm] = useState<boolean>(false);
-  const mode = modes;
+    const isMobile = useMediaQuery(theme.breakpoints.down(650));
-  console.log("currentQuestion ", currentQuestion)
+
     useEffect(() => {
 
         if (settings?.cfg.haveRoot) {//ветвимся
@@ -68,10 +52,8 @@ export const Question = ({ questions }: QuestionProps) => {
 
     }, []);
 
-  if (!currentQuestion) return <>не смог отобразить вопрос</>;
+    if (!settings) throw new Error("settings is null");
-
+    if (!currentQuestion || currentQuestion.type === "result") return "не смог отобразить вопрос";
-  const QuestionComponent =
-    QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
 
     return (
         <Box
@@ -79,7 +61,6 @@ export const Question = ({ questions }: QuestionProps) => {
                 backgroundColor: theme.palette.background.default,
                 height: isMobile ? undefined : "100vh"
             }}
-
         >
             {!showContactForm && !showResultForm && (
                 <Box
@@ -95,8 +76,8 @@ export const Question = ({ questions }: QuestionProps) => {
                         justifyContent: "space-between"
                     }}
                 >
-          <QuestionComponent currentQuestion={currentQuestion} />
+                    <QuestionByType question={currentQuestion} />
-          {mode[settings?.cfg.theme] ? (
+                    {quizThemes[settings.cfg.theme].isLight ? (
                         <NameplateLogoFQ style={{ fontSize: "34px", width: "200px", height: "auto" }} />
                     ) : (
                         <NameplateLogoFQDark style={{ fontSize: "34px", width: "200px", height: "auto" }} />
@@ -137,5 +118,23 @@ export const Question = ({ questions }: QuestionProps) => {
             )}
         </Box>
     );
-
 };
+
+function QuestionByType({ question }: {
+    question: Exclude<AnyTypedQuizQuestion, QuizQuestionResult>;
+}) {
+    switch (question.type) {
+        case "variant": return <Variant currentQuestion={question} />;
+        case "images": return <Images currentQuestion={question} />;
+        case "varimg": return <Varimg currentQuestion={question} />;
+        case "emoji": return <Emoji currentQuestion={question} />;
+        case "text": return <Text currentQuestion={question} />;
+        case "select": return <Select currentQuestion={question} />;
+        case "date": return <Date currentQuestion={question} />;
+        case "number": return <Number currentQuestion={question} />;
+        case "file": return <File currentQuestion={question} />;
+        case "page": return <Page currentQuestion={question} />;
+        case "rating": return <Rating currentQuestion={question} />;
+        default: return notReachable(question);
+    }
+}

src/pages/ViewPublicationPage/ResultForm.tsx

@@ -1,19 +1,20 @@
 import {
     Box,
-  Typography,
     Button,
+    Typography,
     useMediaQuery,
     useTheme,
 } from "@mui/material";
 
-import { useQuestionsStore } from "@stores/quizData/store";
-
-import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
 import { NameplateLogo } from "@icons/NameplateLogo";
-import { modes } from "../../utils/themes/Publication/themePublication";
+import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
 
+import { useQuestionsStore } from "@stores/quizData/store";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
+import { useCallback, useEffect, useMemo } from "react";
 import type { QuizQuestionResult } from "../../model/questionTypes/result";
 
+
 type ResultFormProps = {
     currentQuestion: any;
     showContactForm: boolean;
@@ -29,40 +30,42 @@ export const ResultForm = ({
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down(650));
     const { settings, items } = useQuestionsStore();
-  const mode = modes;
+    if (!settings) throw new Error("settings is null");
 
-  const searchResult = (): QuizQuestionResult => {
+    const resultQuestion = useMemo(() => {
-    if (Boolean(settings?.cfg.haveRoot)) {
+        if (settings?.cfg.haveRoot) {
             //ищём для ветвления
             return (items.find(
-        (question) =>
+                (question): question is QuizQuestionResult =>
                     question.type === "result" &&
                     question.content.rule.parentId === currentQuestion.content.id
-      ) ||
+            ) || items.find(
-        items.find(
+                (question): question is QuizQuestionResult =>
-          (question) =>
                     question.type === "result" &&
                     question.content.rule.parentId === "line"
-        )) as QuizQuestionResult;
+            ));
         } else {
             return items.find(
-        (question) =>
+                (question): question is QuizQuestionResult =>
                     question.type === "result" &&
                     question.content.rule.parentId === "line"
-      ) as QuizQuestionResult;
+            );
         }
-  };
+    }, [currentQuestion.content.id, items, settings?.cfg.haveRoot]);
-  const resultQuestion = searchResult();
 
-  const followNextForm = () => {
+    const followNextForm = useCallback(() => {
         setShowResultForm(false);
         setShowContactForm(true);
-  };
+    },[setShowContactForm, setShowResultForm]);
-  console.log(resultQuestion);
+
-  if (resultQuestion === null || resultQuestion === undefined) {
+    useEffect(() => {
+        if (!resultQuestion) {
             followNextForm();
-    return <></>;
+        }
-  } else {
+    }, [followNextForm, resultQuestion]);
+
+    if (!resultQuestion) return null;
+
     return (
         <Box
             sx={{
@@ -86,11 +89,8 @@ export const ResultForm = ({
                 }}
             >
                 {
-            //@ts-ignore
+                    !resultQuestion?.content.useImage && resultQuestion.content.video && (
-            !resultQuestion?.content.useImage &&
-              resultQuestion.content.video && (
                         <YoutubeEmbedIframe
-                  //@ts-ignore
                             videoUrl={resultQuestion.content.video}
                             containerSX={{
                                 width: isMobile ? "100%" : "490px",
@@ -100,7 +100,6 @@ export const ResultForm = ({
                     )
                 }
                 {
-            //@ts-ignore
                     resultQuestion?.content.useImage && resultQuestion.content.back && (
                         <Box
                             component="img"
@@ -136,9 +135,7 @@ export const ResultForm = ({
                 </Typography>
 
                 {
-            //@ts-ignore
                     resultQuestion.content.text !== "" &&
-              //@ts-ignore
                     resultQuestion.content.text !== " " && (
                         <Typography
                             sx={{
@@ -148,7 +145,6 @@ export const ResultForm = ({
                             }}
                         >
                             {
-                    //@ts-ignore
                                 resultQuestion.content.text
                             }
                         </Typography>
@@ -176,14 +172,13 @@ export const ResultForm = ({
                         <NameplateLogo
                             style={{
                                 fontSize: "34px",
-                  color: mode[settings.cfg.theme] ? "#000000" : "#F5F7FF",
+                                color: quizThemes[settings.cfg.theme].isLight ? "#000000" : "#F5F7FF",
                             }}
                         />
                         <Typography
                             sx={{
                                 fontSize: "20px",
-                  //@ts-ignore
+                                color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF",
-                  color: mode[settings.cfg.theme] ? "#4D4D4D" : "#F5F7FF",
                                 whiteSpace: "nowrap",
                             }}
                         >
@@ -230,5 +225,4 @@ export const ResultForm = ({
             </Box>
         </Box>
     );
-  }
 };

src/pages/ViewPublicationPage/StartPageViewPublication.tsx

@@ -1,11 +1,12 @@
 import { Box, Button, ButtonBase, Link, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
 import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
-import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
 import { notReachable } from "../../utils/notReachable";
 import { useUADevice } from "../../utils/hooks/useUADevice";
-import { useQuestionsStore } from "@stores/quizData/store";
+
 import { NameplateLogo } from "@icons/NameplateLogo";
-import { modes } from "../../utils/themes/Publication/themePublication";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
+import { QuizStartpageAlignType, QuizStartpageType } from "@model/settingsData";
+import { useQuestionsStore } from "@stores/quizData/store";
 
 
 interface Props {
@@ -14,15 +15,11 @@ interface Props {
 
 export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
     const theme = useTheme();
-  const { settings } = useQuestionsStore()
+    const { settings } = useQuestionsStore();
-  const mode = modes;
     const { isMobileDevice } = useUADevice();
     const isMobile = useMediaQuery(theme.breakpoints.down(650));
-  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
 
-  if (!settings) return null;
+    if (!settings) throw new Error("settings is null");
-
-  console.log(settings);
 
     const handleCopyNumber = () => {
         navigator.clipboard.writeText(settings.cfg.info.phonenumber);
@@ -221,7 +218,8 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                                         {settings.cfg.info.phonenumber}
                                     </Typography>
                                 )}
-                <Typography sx={{ width: "100%",
+                                <Typography sx={{
+                                    width: "100%",
                                     overflowWrap: "break-word",
                                     fontSize: "12px", textAlign: "end",
                                     color:
@@ -240,8 +238,8 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                                     gap: "15px"
                                 }}
                             >
-                <NameplateLogo style={{ fontSize: "34px", color: settings.cfg.startpageType === "expanded" && !isMobile ? "#FFFFFF" : (mode[settings.cfg.theme] ? "#151515" : "#FFFFFF") }} />
+                                <NameplateLogo style={{ fontSize: "34px", color: settings.cfg.startpageType === "expanded" && !isMobile ? "#FFFFFF" : (quizThemes[settings.cfg.theme].isLight ? "#151515" : "#FFFFFF") }} />
-                <Typography sx={{ fontSize: "20px", color: settings.cfg.startpageType === "expanded" && !isMobile ? "#F5F7FF" : (mode[settings.cfg.theme] ? "#4D4D4D" : "#F5F7FF"), whiteSpace: "nowrap", }}>
+                                <Typography sx={{ fontSize: "20px", color: settings.cfg.startpageType === "expanded" && !isMobile ? "#F5F7FF" : (quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF"), whiteSpace: "nowrap", }}>
                                     Сделано на PenaQuiz
                                 </Typography>
                             </Box>
@@ -317,7 +315,7 @@ function QuizPreviewLayoutByType({
                     {backgroundBlock}
                 </Box>
             </Box>
-    )
+        );
     }
 
 

src/pages/ViewPublicationPage/index.tsx

@@ -1,123 +1,84 @@
+import { getData } from "@api/quizRelase";
+import { QuizSettings } from "@model/settingsData";
+import { Box, ThemeProvider } from "@mui/material";
+import { setQuizData } from "@stores/quizData/actions";
+import { useQuestionsStore } from "@stores/quizData/store";
+import LoadingSkeleton from "@ui_kit/LoadingSkeleton";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
+import { enqueueSnackbar } from "notistack";
 import { useEffect, useState } from "react";
-import { Box, Skeleton, ThemeProvider } from "@mui/material";
+import useSWR from "swr";
-
+import { ApologyPage } from "./ApologyPage";
-import { StartPageViewPublication } from "./StartPageViewPublication";
 import { Question } from "./Question";
-import { ApologyPage } from "./ApologyPage"
+import { StartPageViewPublication } from "./StartPageViewPublication";
-
-import { useQuestionsStore } from "@stores/quizData/store"
-import { getData } from "@api/quizRelase"
-
-import type { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
-import { useGetSettings } from "../../utils/hooks/useGetSettings";
-import { themesPublication } from "../../utils/themes/Publication/themePublication";
 import { replaceSpacesToEmptyLines } from "./tools/replaceSpacesToEmptyLines";
+import { parseQuizData } from "@model/api/getQuizData";
 
 
 const QID =
-  process.env.NODE_ENV === "production" ?
+    import.meta.env.PROD ?
         window.location.pathname.replace(/\//g, '')
         :
-    "0bed8483-3016-4bca-b8e0-a72c3146f18b"
+        "0bed8483-3016-4bca-b8e0-a72c3146f18b";
 
 
 export const ViewPage = () => {
-  const { settings, cnt, items } = useQuestionsStore()
+    const { isLoading, error } = useSWR(["quizData", QID], params => getQuizData(params[1]), {
-  console.log("КВИЗ ", settings)
+        onSuccess: setQuizData,
-  console.log("ВОПРОСЫ ", items)
+    });
-
+    const { settings, items, recentlyСompleted } = useQuestionsStore();
-
     const [visualStartPage, setVisualStartPage] = useState<boolean>();
-  const [errormessage, setErrormessage] = useState<string>("");
-
-  useEffect(() => {
-    async function get() {
-      try {
-        let data = await getData(QID)
-
-        console.log(data)
-          //@ts-ignore
-        const settings = data.settings
-
-        console.log(data)
-        //@ts-ignore
-        data.settings = {
-          //@ts-ignore
-          qid: QID,
-          fp: settings.fp,
-          rep: settings.rep,
-          name: settings.name,
-          //@ts-ignore
-          cfg: JSON.parse(data?.settings.cfg),
-          lim: settings.lim,
-          due: settings.due,
-          delay: settings.delay,
-          pausable: settings.pausable
-        }
-        console.log(data)
-        //@ts-ignore
-        data.items = data.items.map((item) => {
-          const content = JSON.parse(item.c)
-          return {
-            description: item.desc,
-            id: item.id,
-            page: item.p,
-            required: item.req,
-            title: item.title,
-            type: item.typ,
-            content
-          }
-        }),
-        console.log(data)
-        console.log(JSON.stringify({data: data}).replaceAll(/\\\" \\\"/g, '""').replaceAll(/\" \"/g, '""'))
-        console.log(JSON.parse(JSON.stringify({data: data}).replaceAll(/\\\" \\\"/g, '""').replaceAll(/\" \"/g, '""')).data)
-
-        data = replaceSpacesToEmptyLines(data)
-
-        useQuestionsStore.setState(JSON.parse(JSON.stringify({data: data}).replaceAll(/\\\" \\\"/g, '""').replaceAll(/\" \"/g, '""')).data)
-
-      } catch (e) {
-
-        //@ts-ignore
-        if (e?.response?.status === 423) setErrormessage("квиз не активирован")
-      }
-    }
-    get()
-  }, [])
-
 
     useEffect(() => {//установка фавиконки
-    if (Object.values(settings).length > 0) {
+        if (!settings) return;
 
         const link = document.querySelector('link[rel="icon"]');
-      if (link && settings?.cfg.startpage.favIcon) {
+        if (link && settings.cfg.startpage.favIcon) {
             link.setAttribute("href", settings?.cfg.startpage.favIcon);
         }
 
-      setVisualStartPage(!settings?.cfg.noStartPage);
+        setVisualStartPage(!settings.cfg.noStartPage);
-    }
     }, [settings]);
 
+    const questionsCount = items.filter(({ type }) => type !== null && type !== "result").length;
 
-  const filteredQuestions = (
+    if (error) {
-    items.filter(({ type }) => type) as AnyTypedQuizQuestion[]
+        console.log(error);
-  ).sort((previousItem, item) => previousItem.page - item.page);
+        return <ApologyPage message="Что-то пошло не так" />;
-
-
-  if (errormessage) return <ApologyPage message={errormessage} />
-  if (visualStartPage === undefined) return <Skeleton sx={{ bgcolor: 'grey', width: "100vw", height: "100vh" }} variant="rectangular" />;
-  if (cnt === 0 || (cnt === 1 && items[0].type === "result")) return <ApologyPage message="Нет созданных вопросов" />
-  return (
-    <ThemeProvider theme={themesPublication?.[settings?.cfg.theme || "StandardTheme"]}>
-      <Box>
-        {
-          visualStartPage ?
-            <StartPageViewPublication setVisualStartPage={setVisualStartPage} />
-            :
-            <Question questions={filteredQuestions} />
     }
-      </Box>
+    if (isLoading || !settings) return <LoadingSkeleton />;
-    </ThemeProvider>
+    if (questionsCount === 0) return <ApologyPage message="Нет созданных вопросов" />;
 
+    return (
+        <ThemeProvider theme={quizThemes[settings.cfg.theme || "StandardTheme"]}>
+            {recentlyСompleted ? (
+                <ApologyPage message="Вы уже прошли этот опрос" />
+            ) : (
+                <Box>
+                    {visualStartPage ? (
+                        <StartPageViewPublication setVisualStartPage={setVisualStartPage} />
+                    ) : (
+                        <Question />
+                    )}
+                </Box>
+            )}
+        </ThemeProvider>
     );
 };
+
+async function getQuizData(quizId: string) {
+    const response = await getData(quizId);
+    const quizDataResponse = response.data;
+
+    if (response.error) {
+        enqueueSnackbar(response.error);
+        throw new Error(response.error);
+    }
+    if (!quizDataResponse) {
+        throw new Error("Quiz not found");
+    }
+
+    const quizSettings = replaceSpacesToEmptyLines(parseQuizData(quizDataResponse, quizId));
+
+    return JSON.parse(JSON.stringify({ data: quizSettings }).replaceAll(/\\" \\"/g, '""').replaceAll(/" "/g, '""')).data as QuizSettings & { recentlyСompleted: boolean; };
+}

src/pages/ViewPublicationPage/questions/Date.tsx

@@ -1,7 +1,6 @@
 import dayjs from "dayjs";
 import { DatePicker } from "@mui/x-date-pickers";
 import { Box, Typography, useTheme } from "@mui/material";
-import { modes } from "../../../utils/themes/Publication/themePublication";
 
 import { useQuizViewStore, updateAnswer } from "@stores/quizView/store";
 
@@ -9,6 +8,8 @@ import type { QuizQuestionDate } from "../../../model/questionTypes/date";
 import CalendarIcon from "@icons/CalendarIcon";
 import { enqueueSnackbar } from "notistack";
 import { sendAnswer } from "@api/quizRelase";
+ 
+import { quizThemes } from "@utils/themes/Publication/themePublication";
 import { useQuestionsStore } from "@stores/quizData/store";
 
 type DateProps = {
@@ -17,7 +18,6 @@ type DateProps = {
 
 export const Date = ({ currentQuestion }: DateProps) => {
   const theme = useTheme();
-  const mode = modes;
 
   const { settings } = useQuestionsStore();
   const { answers } = useQuizViewStore();
@@ -26,6 +26,8 @@ export const Date = ({ currentQuestion }: DateProps) => {
   )?.answer as string;
   const [day, month, year] = answer?.split(".") || [];
 
+  if (!settings) throw new Error("settings is null");
+
   return (
     <Box>
       <Typography variant="h5" color={theme.palette.text.primary}>
@@ -41,7 +43,6 @@ export const Date = ({ currentQuestion }: DateProps) => {
       >
         <DatePicker
           slots={{
-            //@ts-ignore
             openPickerIcon: () => (
               <CalendarIcon
                 sx={{
@@ -72,7 +73,6 @@ export const Date = ({ currentQuestion }: DateProps) => {
                     day: "2-digit",
                   }
                 ),
-                //@ts-ignore
                 qid: settings.qid,
               });
 
@@ -103,7 +103,7 @@ export const Date = ({ currentQuestion }: DateProps) => {
           }}
           sx={{
             "& .MuiInputBase-root": {
-              backgroundColor: mode[settings.cfg.theme]
+              backgroundColor: quizThemes[settings.cfg.theme].isLight
                 ? "white"
                 : theme.palette.background.default,
               borderRadius: "10px",

src/pages/ViewPublicationPage/questions/Emoji.tsx

@@ -1,24 +1,23 @@
 import {
     Box,
-  Typography,
+    FormControl,
-  RadioGroup,
     FormControlLabel,
     Radio,
-  useTheme,
+    RadioGroup,
-  FormControl,
+    Typography,
-  useMediaQuery
+    useTheme
 } from "@mui/material";
-import { modes } from "../../../utils/themes/Publication/themePublication";
 
-import { useQuizViewStore, updateAnswer, deleteAnswer } from "@stores/quizView/store";
+import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView/store";
 
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
 
-import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
-import { enqueueSnackbar } from "notistack";
 import { sendAnswer } from "@api/quizRelase";
-import { useQuestionsStore } from "@stores/quizData/store"
+ 
+import { enqueueSnackbar } from "notistack";
+import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
+import { useQuestionsStore } from "@stores/quizData/store";
 
 type EmojiProps = {
   currentQuestion: QuizQuestionEmoji;
@@ -26,9 +25,7 @@ type EmojiProps = {
 
 export const Emoji = ({ currentQuestion }: EmojiProps) => {
   const theme = useTheme();
-  const mode = modes;
   
-  const isMobile = useMediaQuery(theme.breakpoints.down(650));
   const { settings } = useQuestionsStore()
   const { answers } = useQuizViewStore();
   const { answer } =
@@ -36,6 +33,8 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
       ({ questionId }) => questionId === currentQuestion.id
     ) ?? {};
 
+    if (!settings) throw new Error("settings is null");
+
     return (
       <Box>
         <Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
@@ -45,7 +44,6 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
             ({ id }) => answer === id
           )}
           onChange={({ target }) =>{
-            console.log(currentQuestion.content.variants[Number(target.value)])
             updateAnswer(
               currentQuestion.id,
               currentQuestion.content.variants[Number(target.value)].answer
@@ -114,7 +112,6 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                       await sendAnswer({
                         questionId: currentQuestion.id,
                         body: currentQuestion.content.variants[index].answer,
-                        //@ts-ignore
                         qid: settings.qid
                       })
   
@@ -136,7 +133,6 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                         await sendAnswer({
                           questionId: currentQuestion.id,
                           body: "",
-                          //@ts-ignore
                           qid: settings.qid
                         })
     
@@ -147,7 +143,6 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                   }}
   
                   control={
-                    //@ts-ignore
                     <Radio checkedIcon={<RadioCheck color={theme.palette.primary.main}/>} icon={<RadioIcon />} />
                   }
                   label={

src/pages/ViewPublicationPage/questions/File.tsx

@@ -23,7 +23,7 @@ type FileProps = {
   currentQuestion: QuizQuestionFile;
 };
 
-export const UPLOAD_FILE_DESCRIPTIONS_MAP: Record<
+const UPLOAD_FILE_DESCRIPTIONS_MAP: Record<
   UploadFileType,
   { title: string; description: string }
 > = {
@@ -49,6 +49,8 @@ export const File = ({ currentQuestion }: FileProps) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(500));
   const uploadFile = async ({ target }: ChangeEvent<HTMLInputElement>) => {
+    if (!settings) return;
+    
     const file = target.files?.[0];
     if (file) {
 
@@ -60,7 +62,6 @@ export const File = ({ currentQuestion }: FileProps) => {
              file: `${file.name}|${URL.createObjectURL(file)}`,
              name: file.name
            },
-           //@ts-ignore
            qid: settings.qid
          })
 

src/pages/ViewPublicationPage/questions/Images.tsx

@@ -32,6 +32,8 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
   const isMobile = useMediaQuery(theme.breakpoints.down(500));
 
+  if (!settings) throw new Error("settings is null");
+
   return (
     <Box>
       <Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
@@ -77,7 +79,6 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                   await sendAnswer({
                     questionId: currentQuestion.id,
                     body: currentQuestion.content.variants[index].answer,
-                    //@ts-ignore
                     qid: settings.qid
                   })
 
@@ -98,7 +99,6 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                     await sendAnswer({
                       questionId: currentQuestion.id,
                       body: "",
-                      //@ts-ignore
                       qid: settings.qid
                     })
 
@@ -138,7 +138,6 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                 }}
                 value={index}
                 control={
-                  //@ts-ignore
                   <Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
                 }
                 label={variant.answer}

src/pages/ViewPublicationPage/questions/Number.tsx

@@ -10,8 +10,9 @@ import { useQuizViewStore, updateAnswer } from "@stores/quizView/store";
 import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
 import { enqueueSnackbar } from "notistack";
 import { sendAnswer } from "@api/quizRelase";
-import { useQuestionsStore } from "@stores/quizData/store"
+ 
-import { modes } from "../../../utils/themes/Publication/themePublication";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
+import { useQuestionsStore } from "@stores/quizData/store";
 
 type NumberProps = {
     currentQuestion: QuizQuestionNumber;
@@ -28,6 +29,8 @@ export const Number = ({ currentQuestion }: NumberProps) => {
 
 
     const updateMinRangeDebounced = useDebouncedCallback(async (value, crowded = false) => {
+        if (!settings) return null;
+        
         if (crowded) {
             setMinRange(maxRange);
         }
@@ -37,7 +40,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
             await sendAnswer({
                 questionId: currentQuestion.id,
                 body: value,
-        //@ts-ignore
                 qid: settings.qid
             })
 
@@ -50,6 +52,8 @@ export const Number = ({ currentQuestion }: NumberProps) => {
 
     }, 1000);
     const updateMaxRangeDebounced = useDebouncedCallback(async (value, crowded = false) => {
+        if (!settings) return null;
+        
         if (crowded) {
             setMaxRange(minRange);
         }
@@ -58,7 +62,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
             await sendAnswer({
                 questionId: currentQuestion.id,
                 body: value,
-        //@ts-ignore
                 qid: settings.qid
             })
 
@@ -71,7 +74,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
     }, 1000);
     const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer as string;
 
-  const mode = modes;
     const min = window.Number(currentQuestion.content.range.split("—")[0]);
     const max = window.Number(currentQuestion.content.range.split("—")[1]);
     const sliderValue = answer || currentQuestion.content.start + "—" + max;
@@ -88,6 +90,8 @@ export const Number = ({ currentQuestion }: NumberProps) => {
         }
     }, []);
 
+    if (!settings) throw new Error("settings is null");
+
     return (
         <Box>
             <Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
@@ -131,7 +135,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
                             setMaxRange(String(range[1]));
                         }
                     }}
-          //@ts-ignore
                     sx={{
                         color: theme.palette.primary.main,
                         "& .MuiSlider-valueLabel": {
@@ -156,7 +159,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
                             borderColor: theme.palette.text.primary,
                             "& .MuiInputBase-input": {
                                 textAlign: "center",
-                backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default,
+                                backgroundColor: quizThemes[settings.cfg.theme].isLight ? "white" : theme.palette.background.default,
                             },
                         }}
                     />
@@ -190,7 +193,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
                                 borderColor: theme.palette.text.primary,
                                 "& .MuiInputBase-input": {
                                     textAlign: "center",
-                  backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default,
+                                    backgroundColor: quizThemes[settings.cfg.theme].isLight ? "white" : theme.palette.background.default,
                                 },
                             }}
                         />
@@ -214,7 +217,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
                                 borderColor: theme.palette.text.primary,
                                 "& .MuiInputBase-input": {
                                     textAlign: "center",
-                  backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default,
+                                    backgroundColor: quizThemes[settings.cfg.theme].isLight ? "white" : theme.palette.background.default,
                                 },
                             }}
                         />

src/pages/ViewPublicationPage/questions/Rating.tsx

@@ -69,6 +69,8 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
     ({ name }) => name === currentQuestion.content.form
   );
 
+  if (!settings) throw new Error("settings is null");
+
   return (
     <Box>
       <Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
@@ -98,7 +100,6 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
                 await sendAnswer({
                   questionId: currentQuestion.id,
                   body: String(value),
-                  //@ts-ignore
                   qid: settings.qid
                 })
 

src/pages/ViewPublicationPage/questions/Select.tsx

@@ -23,6 +23,8 @@ export const Select = ({ currentQuestion }: SelectProps) => {
       ({ questionId }) => questionId === currentQuestion.id
     ) ?? {};
 
+  if (!settings) throw new Error("settings is null");
+
   return (
     <Box>
       <Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
@@ -38,10 +40,7 @@ export const Select = ({ currentQuestion }: SelectProps) => {
           placeholder={currentQuestion.content.default}
           activeItemIndex={answer ? Number(answer) : -1}
           items={currentQuestion.content.variants.map(({ answer }) => answer)}
-          //@ts-ignore
           colorMain={theme.palette.primary.main}
-          //@ts-ignore
-          color={theme.palette.primary.main}
           onChange={async(_, value) => {
             if (value < 0) {
               deleteAnswer(currentQuestion.id);
@@ -50,7 +49,6 @@ export const Select = ({ currentQuestion }: SelectProps) => {
                 await sendAnswer({
                   questionId: currentQuestion.id,
                   body: "",
-                  //@ts-ignore
                   qid: settings.qid
                 })
   
@@ -65,7 +63,6 @@ export const Select = ({ currentQuestion }: SelectProps) => {
               await sendAnswer({
                 questionId: currentQuestion.id,
                 body: String(currentQuestion.content.variants[Number(value)].answer),
-                //@ts-ignore
                 qid: settings.qid
               })
 

src/pages/ViewPublicationPage/questions/Text.tsx

@@ -21,12 +21,13 @@ export const Text = ({ currentQuestion }: TextProps) => {
   const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
 
   const inputHC = useDebouncedCallback(async (text) => {
+    if (!settings) return;
+    
     try {
 
       await sendAnswer({
         questionId: currentQuestion.id,
         body: text,
-        //@ts-ignore
         qid: settings.qid
       })
 

src/pages/ViewPublicationPage/questions/Variant.tsx

@@ -1,37 +1,39 @@
-import { useEffect } from "react";
 import {
     Box,
-  Typography,
-  RadioGroup,
-  FormGroup,
-  FormControlLabel,
-  Radio,
     Checkbox,
-  TextField,
+    FormControlLabel,
+    FormGroup,
+    Radio,
+    RadioGroup,
+    TextField as MuiTextField,
+    Typography,
     useTheme,
+    TextFieldProps,
 } from "@mui/material";
+import { FC, useEffect } from "react";
 
 import {
-  useQuizViewStore,
-  updateAnswer,
     deleteAnswer,
+    updateAnswer,
     updateOwnVariant,
-  deleteOwnVariant,
+    useQuizViewStore
 } from "@stores/quizView/store";
 
+import { CheckboxIcon } from "@icons/Checkbox";
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
-import { CheckboxIcon } from "@icons/Checkbox";
 
-import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
-import type { QuestionVariant } from "../../../model/questionTypes/shared";
-import { enqueueSnackbar } from "notistack";
 import { sendAnswer } from "@api/quizRelase";
-import { useQuestionsStore } from "@stores/quizData/store"
+
-import { modes } from "../../../utils/themes/Publication/themePublication";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
+import { enqueueSnackbar } from "notistack";
+import type { QuestionVariant } from "../../../model/questionTypes/shared";
+import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
+import { useQuestionsStore } from "@stores/quizData/store";
+
+const TextField = MuiTextField as unknown as FC<TextFieldProps>;
 
 type VariantProps = {
-  stepNumber: number;
     currentQuestion: QuizQuestionVariant;
 };
 
@@ -44,9 +46,8 @@ type VariantItemProps = {
 };
 
 export const Variant = ({ currentQuestion }: VariantProps) => {
-  const { settings } = useQuestionsStore()
+    const theme = useTheme();
     const { answers, ownVariants } = useQuizViewStore();
-  const mode = modes;
     const { answer } =
         answers.find(
             ({ questionId }) => questionId === currentQuestion.id
@@ -63,13 +64,12 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
         }
     }, []);
 
-  const theme = useTheme();
     return (
         <Box>
             <Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
             <Box sx={{ display: "flex" }}>
                 <Group
-          name={currentQuestion.id}
+                    name={currentQuestion.id.toString()}
                     value={currentQuestion.content.variants.findIndex(
                         ({ id }) => answer === id
                     )}
@@ -135,7 +135,8 @@ const VariantItem = ({
 }: VariantItemProps) => {
     const { settings } = useQuestionsStore()
     const theme = useTheme();
-  const mode = modes;
+
+    if (!settings) throw new Error("settings is null");
 
     return (
         <FormControlLabel
@@ -146,9 +147,10 @@ const VariantItem = ({
                 color: theme.palette.text.primary,
                 padding: "15px",
                 border: `1px solid`,
-        borderColor:
+                borderColor: answer === variant.id
-          answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
+                    ? theme.palette.primary.main
-        backgroundColor: mode[settings.cfg.theme]
+                    : "#9A9AAF",
+                backgroundColor: quizThemes[settings.cfg.theme].isLight
                     ? "white"
                     : theme.palette.background.default,
                 display: "flex",
@@ -166,18 +168,15 @@ const VariantItem = ({
             value={index}
             labelPlacement="start"
             control={
-        currentQuestion.content.multi ? (
+                currentQuestion.content.multi ?
                     <Checkbox
                         checked={!!answer?.includes(variant.id)}
                         checkedIcon={<CheckboxIcon checked color={theme.palette.primary.main} />}
                         icon={<CheckboxIcon />}
                     />
-        ) :
+                    :
-          //@ts-ignore
+                    <Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
-          (<Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
-          )
             }
-      //@ts-ignore
             label={own ? <TextField label="Другое..." /> : variant.answer}
             onClick={async (event) => {
                 event.preventDefault();
@@ -193,7 +192,6 @@ const VariantItem = ({
                             body: currentAnswer.includes(variantId)
                                 ? currentAnswer?.filter((item) => item !== variantId)
                                 : [...currentAnswer, variantId],
-              //@ts-ignore
                             qid: settings.qid
                         })
 
@@ -217,7 +215,6 @@ const VariantItem = ({
                     await sendAnswer({
                         questionId: currentQuestion.id,
                         body: currentQuestion.content.variants[index].answer,
-            //@ts-ignore
                         qid: settings.qid
                     })
 
@@ -233,7 +230,6 @@ const VariantItem = ({
                         await sendAnswer({
                             questionId: currentQuestion.id,
                             body: "",
-              //@ts-ignore
                             qid: settings.qid
                         })
 

src/pages/ViewPublicationPage/questions/Varimg.tsx

@@ -7,7 +7,6 @@ import {
   useTheme,
   useMediaQuery
 } from "@mui/material";
-import { modes } from "../../../utils/themes/Publication/themePublication";
 
 import gag from "./gag.png"
 
@@ -20,6 +19,7 @@ import RadioIcon from "@ui_kit/RadioIcon";
 import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
 import { enqueueSnackbar } from "notistack";
 import { sendAnswer } from "@api/quizRelase";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
 
 type VarimgProps = {
   currentQuestion: QuizQuestionVarImg;
@@ -30,7 +30,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
   const { answers } = useQuizViewStore();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(650));
-  const mode = modes;
+
   const { answer } =
     answers.find(
       ({ questionId }) => questionId === currentQuestion.id
@@ -38,6 +38,9 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
   const variant = currentQuestion.content.variants.find(
     ({ id }) => answer === id
   );
+
+  if (!settings) throw new Error("settings is null");
+
   return (
     <Box>
       <Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
@@ -70,7 +73,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                   borderRadius: "5px",
                   padding: "15px",
                   color: theme.palette.text.primary,
-                  backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default,
+                  backgroundColor: quizThemes[settings.cfg.theme].isLight ? "white" : theme.palette.background.default,
                   border: `1px solid`,
                   borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
                   display: "flex",
@@ -90,7 +93,6 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                     await sendAnswer({
                       questionId: currentQuestion.id,
                       body: currentQuestion.content.variants[index].answer,
-                      //@ts-ignore
                       qid: settings.qid
                     })
                 
@@ -110,7 +112,6 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                       await sendAnswer({
                         questionId: currentQuestion.id,
                         body: "",
-                        //@ts-ignore
                         qid: settings.qid
                       })
                   
@@ -121,7 +122,6 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                   }
                 }}
                 control={
-                  //@ts-ignore
                   <Radio checkedIcon={<RadioCheck color={theme.palette.primary.main}/>} icon={<RadioIcon />} />
                 }
                 label={variant.answer}

src/stores/quizData/actions.ts

@@ -1,9 +1,12 @@
 import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
 import { useQuestionsStore } from "./store";
+import { QuizSettings } from "@model/settingsData";
 
 
 export const getQuestionById = (questionId: string | null): AnyTypedQuizQuestion | null => {
     if (questionId === null) return null;
-    //@ts-ignore
+
     return useQuestionsStore.getState().items.find(q => q.id === questionId || q.content.id === questionId) || null;
 };
+
+export const setQuizData = (quizData: QuizSettings) => useQuestionsStore.setState(quizData);

src/stores/quizData/store.ts

@@ -1,25 +1,29 @@
-import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
+import { QuizSettings } from "@model/settingsData";
-import { Settings, QuestionsStore } from "@model/settingsData";
-import { QuizConfig } from "@model/quizSettings";
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 
-const initialState: QuestionsStore = {
+
-    //@ts-ignore
+type QuizDataStore = {
-    settings: {},
+    settings: QuizSettings["settings"] | null;
-    //@ts-ignore
+    items: QuizSettings["items"];
-    items:  [],
+    cnt: QuizSettings["cnt"];
-    cnt: 0
+    recentlyСompleted: boolean;
 };
 
-export const useQuestionsStore = create<QuestionsStore>()(
+const initialState: QuizDataStore = {
+    settings: null,
+    items: [],
+    cnt: 0,
+    recentlyСompleted: false,
+};
+
+export const useQuestionsStore = create<QuizDataStore>()(
     devtools(
         () => initialState,
         {
-            name: "QuestionsStore",
+            name: "QuizDataStore",
-            enabled: process.env.NODE_ENV === "development",
+            enabled: import.meta.env.DEV,
-            trace: process.env.NODE_ENV === "development",
+            trace: import.meta.env.DEV,
-            actionsBlacklist: "ignored",
         }
     )
 );

src/stores/quizView/store.ts

@@ -1,7 +1,9 @@
+import { QuestionVariant } from "@model/questionTypes/shared";
+import { produce } from "immer";
+import { nanoid } from "nanoid";
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 
-
 type Answer = {
     questionId: string;
     answer: string | string[];
@@ -9,7 +11,7 @@ type Answer = {
 
 type OwnVariant = {
     id: string;
-  variant: any;
+    variant: QuestionVariant;
 };
 
 interface QuizViewStore {
@@ -25,45 +27,48 @@ export const useQuizViewStore = create<QuizViewStore>()(
         }),
         {
             name: "quizView",
+            enabled: import.meta.env.DEV,
+            trace: import.meta.env.DEV,
         }
     )
 );
 
-export const updateAnswer = (questionId: string, answer: string | string[]) => {
+function setProducedState<A extends string | { type: string; }>(
-  const answers = [...useQuizViewStore.getState().answers];
+    recipe: (state: QuizViewStore) => void,
-  const answerIndex = answers.findIndex(
+    action: A,
-    (answer) => questionId === answer.questionId
+) {
-  );
+    useQuizViewStore.setState(state => produce(state, recipe), false, action);
-
-  if (answerIndex < 0) {
-    answers.push({ questionId, answer });
-  } else {
-    answers[answerIndex] = { questionId, answer };
 }
 
-  useQuizViewStore.setState({ answers });
+export const updateAnswer = (questionId: string, answer: string | string[]) => setProducedState(state => {
-};
+    const index = state.answers.findIndex(answer => questionId === answer.questionId);
 
-export const deleteAnswer = (questionId: string) => {
+    if (index < 0) {
-  const answers = [...useQuizViewStore.getState().answers];
+        state.answers.push({ questionId, answer });
-  const filteredItems = answers.filter(
+    } else {
-    (answer) => questionId !== answer.questionId
+        state.answers[index] = { questionId, answer };
-  );
+    }
+}, {
+    type: "updateAnswer",
+    questionId,
+    answer
+});
 
-  useQuizViewStore.setState({ answers: filteredItems });
+export const deleteAnswer = (questionId: string) => useQuizViewStore.setState(state => ({
-};
+    answers: state.answers.filter(answer => questionId !== answer.questionId)
+}), false, {
+    type: "deleteAnswer",
+    questionId
+});
 
-export const updateOwnVariant = (id: string, answer: string) => {
+export const updateOwnVariant = (id: string, answer: string) => setProducedState(state => {
-  const ownVariants = [...useQuizViewStore.getState().ownVariants];
+    const index = state.ownVariants.findIndex((variant) => variant.id === id);
-  const ownVariantIndex = ownVariants.findIndex(
-    (variant) => variant.id === id
-  );
 
-  if (ownVariantIndex < 0) {
+    if (index < 0) {
-    ownVariants.push({
+        state.ownVariants.push({
             id,
             variant: {
-        id: getRandom(),
+                id: nanoid(),
                 answer,
                 extendedText: "",
                 hints: "",
@@ -71,25 +76,17 @@ export const updateOwnVariant = (id: string, answer: string) => {
             },
         });
     } else {
-    ownVariants[ownVariantIndex].variant.answer = answer;
+        state.ownVariants[index].variant.answer = answer;
     }
+}, {
+    type: "updateOwnVariant",
+    id,
+    answer
+});
 
-  useQuizViewStore.setState({ ownVariants });
+export const deleteOwnVariant = (id: string) => useQuizViewStore.setState(state => ({
-};
+    ownVariants: state.ownVariants.filter((variant) => variant.id !== id)
-
+}), false, {
-export const deleteOwnVariant = (id: string) => {
+    type: "deleteOwnVariant",
-  const ownVariants = [...useQuizViewStore.getState().ownVariants];
+    id
-
+}); 
-  const filteredOwnVariants = ownVariants.filter(
-    (variant) => variant.id !== id
-  );
-
-  useQuizViewStore.setState({ ownVariants: filteredOwnVariants });
-};
-
-function getRandom() {
-  const min = Math.ceil(1000000);
-  const max = Math.floor(10000000);
-
-  return String(Math.floor(Math.random() * (max - min)) + min);
-}

src/ui_kit/CustomCheckbox.tsx

@@ -1,4 +1,4 @@
-import { FormControlLabel, Checkbox, useTheme, Box, useMediaQuery } from "@mui/material";
+import { Checkbox, FormControlLabel } from "@mui/material";
 import React from "react";
 
 import { CheckboxIcon } from "@icons/Checkbox";
@@ -15,8 +15,6 @@ interface Props {
 }
 
 export default function CustomCheckbox({ label, handleChange, checked, sx, dataCy, colorIcon }: Props) {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down(790));
 
   return (
     <FormControlLabel
@@ -25,7 +23,6 @@ export default function CustomCheckbox({ label, handleChange, checked, sx, dataC
           sx={{ padding: "0px 13px 1px 11px" }}
           disableRipple
           icon={<CheckboxIcon />}
-          //@ts-ignore
           checkedIcon={<CheckboxIcon checked color={colorIcon} />}
           onChange={handleChange}
           checked={checked}

src/ui_kit/LoadingSkeleton.tsx

@@ -0,0 +1,17 @@
+import { Skeleton } from "@mui/material";
+
+
+export default function LoadingSkeleton() {
+
+    return (
+        <Skeleton
+            component="div"
+            variant="rectangular"
+            sx={{
+                bgcolor: "grey",
+                width: "100%",
+                height: "100%",
+            }}
+        />
+    );
+}

src/utils/themes/Publication/themePublication.ts

@@ -1,7 +1,6 @@
-import { createTheme } from "@mui/material";
+import { QuizTheme } from "@model/settingsData";
+import { Theme, createTheme } from "@mui/material";
 import themePublic from "./genericPublication";
-import theme from "../generic";
-
 
 
 const StandardTheme = createTheme({
@@ -224,30 +223,16 @@ const BlueDarkTheme = createTheme({
     }
 })
 
-export const modes = {
+export const quizThemes: Record<QuizTheme, { theme: Theme; isLight: boolean; }> = {
-    StandardTheme: true,
+    StandardTheme: { theme: StandardTheme, isLight: true },
-    StandardDarkTheme: false,
+    StandardDarkTheme: { theme: StandardDarkTheme, isLight: false },
-    PinkTheme: true,
+    PinkTheme: { theme: PinkTheme, isLight: true },
-    PinkDarkTheme: false,
+    PinkDarkTheme: { theme: PinkDarkTheme, isLight: false },
-    BlackWhiteTheme: true,
+    BlackWhiteTheme: { theme: BlackWhiteTheme, isLight: true },
-    OliveTheme: true,
+    OliveTheme: { theme: OliveTheme, isLight: true },
-    YellowTheme: true,
+    YellowTheme: { theme: YellowTheme, isLight: true },
-    GoldDarkTheme: false,
+    GoldDarkTheme: { theme: GoldDarkTheme, isLight: false },
-    PurpleTheme: true,
+    PurpleTheme: { theme: PurpleTheme, isLight: true },
-    BlueTheme: true,
+    BlueTheme: { theme: BlueTheme, isLight: true },
-    BlueDarkTheme: false
+    BlueDarkTheme: { theme: BlueDarkTheme, isLight: false },
-}
+};
-
-export const themesPublication = {
-    StandardTheme,
-    StandardDarkTheme,
-    PinkTheme,
-    PinkDarkTheme,
-    BlackWhiteTheme,
-    OliveTheme,
-    YellowTheme,
-    GoldDarkTheme,
-    PurpleTheme,
-    BlueTheme,
-    BlueDarkTheme,
-}