Merge branch 'dev' into 'staging'

split widget and default App components

See merge request frontend/squzanswerer!50

package.json

@@ -27,6 +27,8 @@
         "notistack": "^3.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-error-boundary": "^4.0.12",
+        "react-router-dom": "^6.21.3",
         "swr": "^2.2.4",
         "typescript": "^5.2.2",
         "use-debounce": "^9.0.4",

src/App.tsx

@@ -1,56 +1,21 @@
-import { Box, CssBaseline, ThemeProvider } from "@mui/material";
+import { Box } from "@mui/material";
-import { LocalizationProvider } from "@mui/x-date-pickers";
+import { useParams } from "react-router-dom";
-import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+import QuizAnswerer from "./QuizAnswerer";
-import { ruRU } from '@mui/x-date-pickers/locales';
+import { QuizIdContext } from "./contexts/QuizIdContext";
-import moment from "moment";
-import { SnackbarProvider } from 'notistack';
-import { SWRConfig } from "swr";
-import { ViewPage } from "./pages/ViewPublicationPage/ViewPublicationPage";
-import lightTheme from "./utils/themes/light";
 
 
 const defaultQuizId = "ef836ff8-35b1-4031-9acf-af5766bac2b2";
 
-moment.locale("ru");
+export default function App() {
-const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
+    const quizId = useParams().quizId ?? defaultQuizId;
-
-interface Props {
-    widget?: boolean;
-    quizId?: string;
-}
-
-export default function App({ widget = false, quizId }: Props) {
-    quizId ??= defaultQuizId;
 
     return (
-        <SWRConfig value={{
+        <QuizIdContext.Provider value={quizId}>
-            revalidateOnFocus: false,
-            shouldRetryOnError: false,
-        }}>
-            <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="ru" localeText={localeText}>
-                <ThemeProvider theme={lightTheme}>
-                    <SnackbarProvider
-                        preventDuplicate={true}
-                        style={{ backgroundColor: lightTheme.palette.brightPurple.main }}
-                    >
-                        <CssBaseline />
-                        {widget ? (
-                            <Box sx={{
-                                width: "100%",
-                                height: "100%",
-                            }}>
-                                <ViewPage quizId={quizId} />
-                            </Box>
-                        ) : (
             <Box sx={{
                 height: "100dvh",
             }}>
-                                <ViewPage quizId={quizId} />
+                <QuizAnswerer />
             </Box>
-                        )}
+        </QuizIdContext.Provider>
-                    </SnackbarProvider>
-                </ThemeProvider>
-            </LocalizationProvider>
-        </SWRConfig>
     );
 }

src/QuizAnswerer.tsx

@@ -0,0 +1,47 @@
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+import { ruRU } from '@mui/x-date-pickers/locales';
+import LoadingSkeleton from "@ui_kit/LoadingSkeleton";
+import { handleComponentError } from "@utils/handleComponentError";
+import moment from "moment";
+import { SnackbarProvider } from 'notistack';
+import { Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { SWRConfig } from "swr";
+import { ApologyPage } from "./pages/ViewPublicationPage/ApologyPage";
+import { ViewPage } from "./pages/ViewPublicationPage/ViewPublicationPage";
+import lightTheme from "./utils/themes/light";
+
+
+moment.locale("ru");
+const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
+
+export default function QuizAnswerer() {
+
+    return (
+        <SWRConfig value={{
+            revalidateOnFocus: false,
+            shouldRetryOnError: false,
+        }}>
+            <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="ru" localeText={localeText}>
+                <ThemeProvider theme={lightTheme}>
+                    <SnackbarProvider
+                        preventDuplicate={true}
+                        style={{ backgroundColor: lightTheme.palette.brightPurple.main }}
+                    >
+                        <CssBaseline />
+                        <ErrorBoundary
+                            fallback={<ApologyPage message="Что-то пошло не так" />}
+                            onError={handleComponentError}
+                        >
+                            <Suspense fallback={<LoadingSkeleton />}>
+                                <ViewPage />
+                            </Suspense>
+                        </ErrorBoundary>
+                    </SnackbarProvider>
+                </ThemeProvider>
+            </LocalizationProvider>
+        </SWRConfig>
+    );
+} 

src/WidgetApp.tsx

@@ -0,0 +1,22 @@
+import { Box } from "@mui/material";
+import QuizAnswerer from "./QuizAnswerer";
+import { QuizIdContext } from "./contexts/QuizIdContext";
+
+
+interface Props {
+    quizId: string;
+}
+
+export default function WidgetApp({ quizId }: Props) {
+
+    return (
+        <QuizIdContext.Provider value={quizId}>
+            <Box sx={{
+                width: "100%",
+                height: "100%",
+            }}>
+                <QuizAnswerer />
+            </Box>
+        </QuizIdContext.Provider>
+    );
+}

src/assets/icons/BlankImage.tsx

@@ -0,0 +1,10 @@
+export default function BlankImage() {
+
+    return (
+        <svg width="100%" height="100%" viewBox="0 -70 800 535" fill="none" display="block" preserveAspectRatio="xMidYMax meet"  xmlns="http://www.w3.org/2000/svg">
+            <path fill="#F0F0F0" d="M555 47a47.003 47.003 0 0 1 29.014-43.422 46.999 46.999 0 0 1 61.408 61.408 46.997 46.997 0 0 1-76.656 15.248A47 47 0 0 1 555 47Z" />
+            <path fill="#F3F3F3" d="M641.874 240.665c7.74-7.74 20.263-7.82 28.102-.181L1051 611.837 779.035 883.805 383.869 498.67l258.005-258.005Z" />
+            <path fill="#EDEDED" d="M183.393 61.546c7.692-7.037 19.499-6.985 27.129.12l677.42 630.746-690.929 382.738L-397 592.531 183.393 61.546Z" />
+        </svg>
+    );
+} 

src/contexts/QuizIdContext.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+
+
+export const QuizIdContext = createContext<string | null>(null);
+
+export const useQuizId = () => {
+    const quizId = useContext(QuizIdContext);
+    if (quizId === null) throw new Error("quizId context is null");
+
+    return quizId;
+};

src/main.tsx

@@ -1,7 +1,24 @@
 import { createRoot } from "react-dom/client";
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import App from "./App";
 
 
+const router = createBrowserRouter([
+    {
+        path: "/",
+        children: [
+            {
+                index: true,
+                element: <App />,
+            },
+            {
+                path: ":quizId",
+                element: <App />,
+            },
+        ]
+    }
+]);
+
 const root = createRoot(document.getElementById("root")!);
 
-root.render(<App />);
+root.render(<RouterProvider router={router} />);

src/model/api/getQuizData.ts

@@ -24,8 +24,8 @@ export interface GetQuizDataResponse {
     }[];
 }
 
-export function parseQuizData(quizDataResponse: GetQuizDataResponse, quizId: string): QuizSettings {
+export function parseQuizData(quizDataResponse: GetQuizDataResponse, quizId: string): Omit<QuizSettings, "recentlyCompleted"> {
-    const items: QuizSettings["items"] = quizDataResponse.items.map((item) => {
+    const items: QuizSettings["questions"] = quizDataResponse.items.map((item) => {
         const content = JSON.parse(item.c);
 
         return {
@@ -51,5 +51,5 @@ export function parseQuizData(quizDataResponse: GetQuizDataResponse, quizId: str
         pausable: quizDataResponse.settings.pausable
     };
 
-    return { cnt: quizDataResponse.cnt, settings, items };
+    return { cnt: quizDataResponse.cnt, settings, questions: items };
 }

src/model/settingsData.ts

@@ -30,7 +30,7 @@ export type FCField = {
 };
 
 export type QuizSettings = {
-    items: AnyTypedQuizQuestion[];
+    questions: AnyTypedQuizQuestion[];
     settings: {
         qid: string;
         fp: boolean;
@@ -43,6 +43,7 @@ export type QuizSettings = {
         cfg: QuizConfig;
     };
     cnt: number;
+    recentlyCompleted: boolean;
 };
 
 export interface QuizConfig {

src/pages/ViewPublicationPage/ContactForm.tsx

@@ -1,22 +1,21 @@
 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 { Box, Button, InputAdornment, Link, TextField as MuiTextField, TextFieldProps, Typography, useMediaQuery, useTheme } from "@mui/material";
 
-
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import { FC, useRef, useState } from "react";
 
 import { sendFC } from "@api/quizRelase";
 import { NameplateLogo } from "@icons/NameplateLogo";
 import { QuizQuestionResult } from "@model/questionTypes/result";
-import { quizThemes } from "@utils/themes/Publication/themePublication";
+import { useQuizData } from "@utils/hooks/useQuizData";
 import { enqueueSnackbar } from "notistack";
 import { ApologyPage } from "./ApologyPage";
 import { checkEmptyData } from "./tools/checkEmptyData";
-import { useQuestionsStore } from "@stores/quizData/store";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
 
 
 const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
@@ -74,7 +73,7 @@ export const ContactForm = ({
     setShowResultForm,
 }: ContactFormProps) => {
     const theme = useTheme();
-    const { settings, items } = useQuestionsStore();
+    const { settings, questions } = useQuizData();
 
     const [ready, setReady] = useState(false);
     const [name, setName] = useState("");
@@ -93,7 +92,7 @@ export const ContactForm = ({
     };
 
     //@ts-ignore
-    const resultQuestion: QuizQuestionResult = items.find((question) => {
+    const resultQuestion: QuizQuestionResult = questions.find((question) => {
         if (settings?.cfg.haveRoot) {
             //ветвимся
             return (
@@ -110,8 +109,6 @@ export const ContactForm = ({
     });
 
     const inputHC = async () => {
-        if (!settings) return;
-
         //@ts-ignore
         const FC = settings?.cfg.formContact.fields || settings?.cfg.formContact;
         const body = {};
@@ -157,7 +154,6 @@ export const ContactForm = ({
     }
     let isWide = Object.keys(filteredFC).length > 2;
 
-    if (!settings) throw new Error("settings is null");
     if (!resultQuestion)
         return (
             <ApologyPage message="не получилось найти результат для этой ветки :(" />
@@ -360,15 +356,13 @@ 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",
-                                color: mode[settings.cfg.theme] ? "#4D4D4D" : "#F5F7FF",
                                 whiteSpace: "nowrap",
                             }}
                         >
@@ -393,7 +387,7 @@ const Inputs = ({
     adress,
     setAdress,
 }: any) => {
-    const { settings } = useQuestionsStore();
+    const { settings } = useQuizData();
 
     // @ts-ignore
     const FC = settings?.cfg.formContact.fields || settings?.cfg.formContact;

src/pages/ViewPublicationPage/Footer.tsx

@@ -1,16 +1,14 @@
 import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { useCallback, useMemo, useState } from "react";
 
-import { getQuestionById } from "@stores/quizData/actions";
-
 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";
+import { useQuizData } from "@utils/hooks/useQuizData";
 
 type FooterProps = {
     setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
@@ -22,13 +20,13 @@ type FooterProps = {
 export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setShowResultForm }: FooterProps) => {
     const theme = useTheme();
 
-    const { settings, items } = useQuestionsStore();
+    const { settings, questions } = useQuizData();
     const answers = useQuizViewStore(state => state.answers);
 
     const [stepNumber, setStepNumber] = useState(1);
 
     const isMobileMini = useMediaQuery(theme.breakpoints.down(382));
-    const isLinear = !items.some(({ content }) => content.rule.parentId === "root");
+    const isLinear = !questions.some(({ content }) => content.rule.parentId === "root");
 
     const getNextQuestionId = useCallback(() => {
         console.log("Смотрим какой вопрос будет дальше. Что у нас сегодня вкусненького? Щя покажу от какого вопроса мы ищем следующий шаг");
@@ -86,27 +84,27 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
         }
         //ничё не нашли, ищем резулт 
         console.log("ничё не нашли, ищем резулт ");
-        return items.find(q => {
+        return questions.find(q => {
             console.log('q.type === "result"', q.type === "result");
             console.log('q.content.rule.parentId', q.content.rule.parentId);
             console.log('question.content.id', question.content.id);
             return q.type === "result" && q.content.rule.parentId === question.content.id;
         })?.id;
 
-    }, [answers, items, question]);
+    }, [answers, questions, question]);
 
     const isPreviousButtonDisabled = useMemo(() => {
         // Логика для аргумента disabled у кнопки "Назад"
         if (isLinear) {
-            const questionIndex = items.findIndex(({ id }) => id === question.id);
+            const questionIndex = questions.findIndex(({ id }) => id === question.id);
 
-            const previousQuestion = items[questionIndex - 1];
+            const previousQuestion = questions[questionIndex - 1];
 
             return previousQuestion ? false : true;
         } else {
             return question?.content.rule.parentId === "root" ? true : false;
         }
-    }, [items, isLinear, question?.content.rule.parentId, question.id]);
+    }, [questions, isLinear, question?.content.rule.parentId, question.id]);
 
     const isNextButtonDisabled = useMemo(() => {
         // Логика для аргумента disabled у кнопки "Далее"
@@ -128,7 +126,8 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
         if (nextQuestionId) {
             return false;
         } else {
-            const nextQuestion = getQuestionById(question.content.rule.default);
+            const questionId = question.content.rule.default;
+            const nextQuestion = questions.find(q => q.id === questionId || q.content.id === questionId) || null;
 
             if (nextQuestion?.type) {
                 return false;
@@ -137,7 +136,6 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
     }, [answers, getNextQuestionId, isLinear, question.content, question.id]);
 
     const showResult = (nextQuestion: QuizQuestionResult) => {
-        if (!settings) return;
         if (!nextQuestion) return;
 
         const isEmpty = checkEmptyData({ resultData: nextQuestion });
@@ -168,9 +166,9 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
         if (isLinear) {
             setStepNumber(q => q - 1);
 
-            const questionIndex = items.findIndex(({ id }) => id === question.id);
+            const questionIndex = questions.findIndex(({ id }) => id === question.id);
 
-            const previousQuestion = items[questionIndex - 1];
+            const previousQuestion = questions[questionIndex - 1];
 
             if (previousQuestion) {
                 setCurrentQuestion(previousQuestion);
@@ -180,7 +178,8 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
         }
 
         if (question?.content.rule.parentId !== "root") {
-            const parent = getQuestionById(question?.content.rule.parentId);
+            const questionId = question?.content.rule.parentId;
+            const parent = questions.find(q => q.id === questionId || q.content.id === questionId) || null;
             if (parent?.type) {
                 setCurrentQuestion(parent);
             } else {
@@ -195,14 +194,14 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
         if (isLinear) {
             setStepNumber(q => q + 1);
 
-            const questionIndex = items.findIndex(({ id }) => id === question.id);
+            const questionIndex = questions.findIndex(({ id }) => id === question.id);
-            const nextQuestion = items[questionIndex + 1];
+            const nextQuestion = questions[questionIndex + 1];
 
             if (nextQuestion && nextQuestion.type !== "result") {
                 setCurrentQuestion(nextQuestion);
             } else {
                 //@ts-ignore
-                showResult(items.find(q => q.content.rule.parentId === "line"));
+                showResult(questions.find(q => q.content.rule.parentId === "line"));
             }
 
             return;
@@ -211,7 +210,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
         const nextQuestionId = getNextQuestionId();
 
         if (nextQuestionId) {
-            const nextQuestion = getQuestionById(nextQuestionId);
+            const nextQuestion = questions.find(q => q.id === nextQuestionId || q.content.id === nextQuestionId) || null;
 
             if (nextQuestion?.type && nextQuestion.type === "result") {
                 showResult(nextQuestion);
@@ -278,7 +277,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
                         </Typography>
                         <Typography>Из</Typography>
                         <Typography sx={{ fontWeight: "bold" }}>
-                            {items.filter(q => q.type !== "result").length}
+                            {questions.filter(q => q.type !== "result").length}
                         </Typography>
                     </Box>
                 }

src/pages/ViewPublicationPage/Question.tsx

@@ -1,8 +1,6 @@
 import { Box, useMediaQuery, useTheme } from "@mui/material";
 import { useEffect, useState } from "react";
 
-import { getQuestionById } from "@stores/quizData/actions";
-
 import { ContactForm } from "./ContactForm";
 import { Footer } from "./Footer";
 import { ResultForm } from "./ResultForm";
@@ -23,23 +21,22 @@ import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
 import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
 import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
 import { QuizQuestionResult } from "@model/questionTypes/result";
-import { useQuestionsStore } from "@stores/quizData/store";
 import { notReachable } from "@utils/notReachable";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
+import { useQuizData } from "@utils/hooks/useQuizData";
 
 export const Question = () => {
     const theme = useTheme();
-    const settings = useQuestionsStore(state => state.settings);
+    const { settings, questions } = useQuizData();
-    const questions = useQuestionsStore(state => state.items);
     const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>();
     const [showContactForm, setShowContactForm] = useState<boolean>(false);
     const [showResultForm, setShowResultForm] = useState<boolean>(false);
     const isMobile = useMediaQuery(theme.breakpoints.down(650));
 
     useEffect(() => {
-
         if (settings?.cfg.haveRoot) {//ветвимся
-            const nextQuestion = getQuestionById(settings?.cfg.haveRoot || "");
+            const questionId = settings?.cfg.haveRoot || "";
+            const nextQuestion = questions.find(q => q.id === questionId || q.content.id === questionId) || null;
 
             if (nextQuestion?.type) {
                 setCurrentQuestion(nextQuestion);
@@ -49,10 +46,8 @@ export const Question = () => {
         } else {//идём прямо
             setCurrentQuestion(questions[0]);
         }
-
     }, []);
 
-    if (!settings) throw new Error("settings is null");
     if (!currentQuestion || currentQuestion.type === "result") return "не смог отобразить вопрос";
 
     return (

src/pages/ViewPublicationPage/ResultForm.tsx

@@ -9,10 +9,10 @@ import {
 import { NameplateLogo } from "@icons/NameplateLogo";
 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";
+import { useQuizData } from "@utils/hooks/useQuizData";
 
 
 type ResultFormProps = {
@@ -29,29 +29,28 @@ export const ResultForm = ({
 }: ResultFormProps) => {
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down(650));
-    const { settings, items } = useQuestionsStore();
+    const { settings, questions } = useQuizData();
-    if (!settings) throw new Error("settings is null");
 
     const resultQuestion = useMemo(() => {
         if (settings?.cfg.haveRoot) {
             //ищём для ветвления
-            return (items.find(
+            return (questions.find(
                 (question): question is QuizQuestionResult =>
                     question.type === "result" &&
                     question.content.rule.parentId === currentQuestion.content.id
-            ) || items.find(
+            ) || questions.find(
                 (question): question is QuizQuestionResult =>
                     question.type === "result" &&
                     question.content.rule.parentId === "line"
             ));
         } else {
-            return items.find(
+            return questions.find(
                 (question): question is QuizQuestionResult =>
                     question.type === "result" &&
                     question.content.rule.parentId === "line"
             );
         }
-    }, [currentQuestion.content.id, items, settings?.cfg.haveRoot]);
+    }, [currentQuestion.content.id, questions, settings?.cfg.haveRoot]);
 
     const followNextForm = useCallback(() => {
         setShowResultForm(false);

src/pages/ViewPublicationPage/StartPageViewPublication.tsx

@@ -1,12 +1,12 @@
 import { Box, Button, ButtonBase, Link, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
-import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
-import { notReachable } from "../../utils/notReachable";
 import { useUADevice } from "../../utils/hooks/useUADevice";
+import { notReachable } from "../../utils/notReachable";
+import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
 
 import { NameplateLogo } from "@icons/NameplateLogo";
-import { quizThemes } from "@utils/themes/Publication/themePublication";
 import { QuizStartpageAlignType, QuizStartpageType } from "@model/settingsData";
-import { useQuestionsStore } from "@stores/quizData/store";
+import { useQuizData } from "@utils/hooks/useQuizData";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
 
 
 interface Props {
@@ -15,12 +15,10 @@ interface Props {
 
 export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
     const theme = useTheme();
-    const { settings } = useQuestionsStore();
+    const { settings } = useQuizData();
     const { isMobileDevice } = useUADevice();
     const isMobile = useMediaQuery(theme.breakpoints.down(650));
 
-    if (!settings) throw new Error("settings is null");
-
     const handleCopyNumber = () => {
         navigator.clipboard.writeText(settings.cfg.info.phonenumber);
     };

src/pages/ViewPublicationPage/ViewPublicationPage.tsx

@@ -1,56 +1,33 @@
-import { getData } from "@api/quizRelase";
-import { QuizSettings } from "@model/settingsData";
 import { Box, ThemeProvider } from "@mui/material";
-import { setQuizData } from "@stores/quizData/actions";
+import { useQuizData } from "@utils/hooks/useQuizData";
-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 useSWR from "swr";
 import { ApologyPage } from "./ApologyPage";
 import { Question } from "./Question";
 import { StartPageViewPublication } from "./StartPageViewPublication";
 
-import { parseQuizData } from "@model/api/getQuizData";
-import { replaceSpacesToEmptyLines } from "./tools/replaceSpacesToEmptyLines";
 
-type Props = {
+export const ViewPage = () => {
-    quizId: string;
+    const { settings, questions, recentlyCompleted } = useQuizData();
-};
-
-export const ViewPage = ({ quizId }: Props) => {
-    const { isLoading, error } = useSWR(["quizData", quizId], params => getQuizData(params[1]), {
-        onSuccess: setQuizData,
-    });
-    const { settings, items, recentlyСompleted } = useQuestionsStore();
     const [visualStartPage, setVisualStartPage] = useState<boolean>();
 
-    useEffect(() => {//установка фавиконки
+    useEffect(() => {
-        if (!settings) return;
-
         const link = document.querySelector('link[rel="icon"]');
         if (link && settings.cfg.startpage.favIcon) {
             link.setAttribute("href", settings?.cfg.startpage.favIcon);
         }
-        //установка заголовка страницы
+
         document.title = settings.name;
 
         setVisualStartPage(!settings.cfg.noStartPage);
     }, [settings]);
 
-    const questionsCount = items.filter(({ type }) => type !== null && type !== "result").length;
+    const questionsCount = questions.filter(({ type }) => type !== null && type !== "result").length;
-
-    if (error) {
-        console.log(error);
-        return <ApologyPage message="Что-то пошло не так" />;
-    }
-    if (isLoading || !settings) return <LoadingSkeleton />;
     if (questionsCount === 0) return <ApologyPage message="Нет созданных вопросов" />;
 
     return (
         <ThemeProvider theme={quizThemes[settings.cfg.theme || "StandardTheme"]}>
-            {recentlyСompleted ? (
+            {recentlyCompleted ? (
                 <ApologyPage message="Вы уже прошли этот опрос" />
             ) : (
                 <Box>
@@ -64,20 +41,3 @@ export const ViewPage = ({ quizId }: Props) => {
         </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

@@ -10,7 +10,7 @@ import { enqueueSnackbar } from "notistack";
 import { sendAnswer } from "@api/quizRelase";
 
 import { quizThemes } from "@utils/themes/Publication/themePublication";
-import { useQuestionsStore } from "@stores/quizData/store";
+import { useQuizData } from "@utils/hooks/useQuizData";
 
 type DateProps = {
     currentQuestion: QuizQuestionDate;
@@ -19,15 +19,13 @@ type DateProps = {
 export const Date = ({ currentQuestion }: DateProps) => {
     const theme = useTheme();
 
-  const { settings } = useQuestionsStore();
+    const { settings } = useQuizData();
     const { answers } = useQuizViewStore();
     const answer = answers.find(
         ({ questionId }) => questionId === currentQuestion.id
     )?.answer as string;
     const currentAnswer = moment(answer) || moment();
 
-  if (!settings) throw new Error("settings is null");
-
     return (
         <Box>
             <Typography variant="h5" color={theme.palette.text.primary}>
@@ -54,7 +52,7 @@ export const Date = ({ currentQuestion }: DateProps) => {
                     }}
                     value={currentAnswer}
                     onChange={async (date) => {
-            console.log(date)
+                        console.log(date);
                         if (!date) {
                             return;
                         }

src/pages/ViewPublicationPage/questions/Emoji.tsx

@@ -17,7 +17,7 @@ import { sendAnswer } from "@api/quizRelase";
 
 import { enqueueSnackbar } from "notistack";
 import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
-import { useQuestionsStore } from "@stores/quizData/store";
+import { useQuizData } from "@utils/hooks/useQuizData";
 
 type EmojiProps = {
     currentQuestion: QuizQuestionEmoji;
@@ -26,15 +26,13 @@ type EmojiProps = {
 export const Emoji = ({ currentQuestion }: EmojiProps) => {
     const theme = useTheme();
 
-  const { settings } = useQuestionsStore()
+    const { settings } = useQuizData();
     const { answers } = useQuizViewStore();
     const { answer } =
         answers.find(
             ({ 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>
@@ -47,7 +45,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                     updateAnswer(
                         currentQuestion.id,
                         currentQuestion.content.variants[Number(target.value)].answer
-            )
+                    );
                 }
                 }
                 sx={{
@@ -113,7 +111,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                                             questionId: currentQuestion.id,
                                             body: currentQuestion.content.variants[index].extendedText + " " + currentQuestion.content.variants[index].answer,
                                             qid: settings.qid
-                      })
+                                        });
 
                                         updateAnswer(
                                             currentQuestion.id,
@@ -121,7 +119,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                                         );
 
                                     } catch (e) {
-                      enqueueSnackbar("ответ не был засчитан")
+                                        enqueueSnackbar("ответ не был засчитан");
                                     }
 
 
@@ -134,10 +132,10 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                                                 questionId: currentQuestion.id,
                                                 body: "",
                                                 qid: settings.qid
-                        })
+                                            });
 
                                         } catch (e) {
-                        enqueueSnackbar("ответ не был засчитан")
+                                            enqueueSnackbar("ответ не был засчитан");
                                         }
                                     }
                                 }}

src/pages/ViewPublicationPage/questions/File.tsx

@@ -6,7 +6,6 @@ import {
     IconButton, useMediaQuery, Modal,
 } from "@mui/material";
 import { useQuizViewStore, updateAnswer } from "@stores/quizView/store";
-import { UPLOAD_FILE_TYPES_MAP } from "../tools/File";
 
 import UploadIcon from "@icons/UploadIcon";
 import CloseBold from "@icons/CloseBold";
@@ -17,32 +16,32 @@ import type { DragEvent } from "react";
 import type { UploadFileType } from "@model/questionTypes/file";
 import { enqueueSnackbar } from "notistack";
 import { sendAnswer, sendFile } from "@api/quizRelase";
-import { useQuestionsStore } from "@stores/quizData/store"
 import Info from "@icons/Info";
+import { useQuizData } from "@utils/hooks/useQuizData";
 
 type FileProps = {
     currentQuestion: QuizQuestionFile;
 };
 
-const CurrentModal = ({ status }: { status: "errorType" | "errorSize" | "picture" | "video" | "audio" | "document" | "" }) => {
+const CurrentModal = ({ status }: { status: "errorType" | "errorSize" | "picture" | "video" | "audio" | "document" | ""; }) => {
     switch (status) {
         case 'errorType':
             return (<>
                 <Typography>Выбран некорректный тип файла</Typography>
-      </>)
+            </>);
         case 'errorSize':
             return (<>
                 <Typography>Файл слишком большой. Максимальный размер 50 МБ</Typography>
-      </>)
+            </>);
         default:
             return (<>
                 <Typography>Допустимые расширения файлов:</Typography>
                 <Typography>{
                     //@ts-ignore
                     ACCEPT_SEND_FILE_TYPES_MAP[status].join(" ")}</Typography>
-      </>)
+            </>);
-  }
     }
+};
 
 const ACCEPT_SEND_FILE_TYPES_MAP = {
     picture: [
@@ -95,12 +94,12 @@ const ACCEPT_SEND_FILE_TYPES_MAP = {
         ".pages",
     ],
 
-}
+};
 
 
 const UPLOAD_FILE_DESCRIPTIONS_MAP: Record<
     UploadFileType,
-  { title: string; description: string }
+    { title: string; description: string; }
 > = {
     picture: {
         title: "Добавить изображение",
@@ -116,31 +115,29 @@ const UPLOAD_FILE_DESCRIPTIONS_MAP: Record<
 
 export const File = ({ currentQuestion }: FileProps) => {
     const theme = useTheme();
-  const { settings } = useQuestionsStore()
+    const { settings } = useQuizData();
     const { answers } = useQuizViewStore();
 
-  const [statusModal, setStatusModal] = useState<"errorType" | "errorSize" | "picture" | "video" | "audio" | "document" | "">("")
+    const [statusModal, setStatusModal] = useState<"errorType" | "errorSize" | "picture" | "video" | "audio" | "document" | "">("");
 
     const answer = answers.find(
         ({ questionId }) => questionId === currentQuestion.id
     )?.answer as string;
     const isMobile = useMediaQuery(theme.breakpoints.down(500));
     const uploadFile = async ({ target }: ChangeEvent<HTMLInputElement>) => {
-    if (!settings) return;
-    
         const file = target.files?.[0];
         if (file) {
             if (file.size <= 52428800) {
                 //проверяем на соответствие
-        console.log(file.name.toLowerCase())
+                console.log(file.name.toLowerCase());
                 if (ACCEPT_SEND_FILE_TYPES_MAP[currentQuestion.content.type].find((ednding => {
-          console.log(ednding)
+                    console.log(ednding);
-          console.log(file.name.toLowerCase().endsWith(ednding))
+                    console.log(file.name.toLowerCase().endsWith(ednding));
-          return file.name.toLowerCase().endsWith(ednding)
+                    return file.name.toLowerCase().endsWith(ednding);
                 }))) {
 
                     //Нужный формат
-          console.log(file)
+                    console.log(file);
                     try {
 
                         const data = await sendFile({
@@ -150,8 +147,8 @@ export const File = ({ currentQuestion }: FileProps) => {
                                 name: file.name
                             },
                             qid: settings.qid
-            })
+                        });
-            console.log(data)
+                        console.log(data);
 
                         await sendAnswer({
                             questionId: currentQuestion.id,
@@ -159,7 +156,7 @@ export const File = ({ currentQuestion }: FileProps) => {
                             body: `https://storage.yandexcloud.net/squizanswer/${settings.qid}/${currentQuestion.id}/${data.data.fileIDMap[currentQuestion.id]}`,
                             //@ts-ignore
                             qid: settings.qid
-            })
+                        });
 
                         updateAnswer(
                             currentQuestion.id,
@@ -167,18 +164,18 @@ export const File = ({ currentQuestion }: FileProps) => {
                         );
 
                     } catch (e) {
-            console.log(e)
+                        console.log(e);
-            enqueueSnackbar("ответ не был засчитан")
+                        enqueueSnackbar("ответ не был засчитан");
                     }
 
                 } else {
 
                     //неподходящий формат
-          setStatusModal("errorType")
+                    setStatusModal("errorType");
                 }
             } else {
 
-        setStatusModal("errorSize")
+                setStatusModal("errorSize");
             }
 
         }

src/pages/ViewPublicationPage/questions/Images.tsx

@@ -15,14 +15,14 @@ import RadioIcon from "@ui_kit/RadioIcon";
 import type { QuizQuestionImages } from "../../../model/questionTypes/images";
 import { enqueueSnackbar } from "notistack";
 import { sendAnswer } from "@api/quizRelase";
-import { useQuestionsStore } from "@stores/quizData/store"
+import { useQuizData } from "@utils/hooks/useQuizData";
 
 type ImagesProps = {
     currentQuestion: QuizQuestionImages;
 };
 
 export const Images = ({ currentQuestion }: ImagesProps) => {
-  const { settings } = useQuestionsStore()
+    const { settings } = useQuizData();
     const { answers } = useQuizViewStore();
     const theme = useTheme();
     const { answer } =
@@ -32,8 +32,6 @@ 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>
@@ -80,7 +78,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                                         questionId: currentQuestion.id,
                                         body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`,
                                         qid: settings.qid
-                  })
+                                    });
 
                                     updateAnswer(
                                         currentQuestion.id,
@@ -88,7 +86,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                                     );
 
                                 } catch (e) {
-                  enqueueSnackbar("ответ не был засчитан")
+                                    enqueueSnackbar("ответ не был засчитан");
                                 }
 
 
@@ -100,10 +98,10 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                                             questionId: currentQuestion.id,
                                             body: "",
                                             qid: settings.qid
-                    })
+                                        });
 
                                     } catch (e) {
-                    enqueueSnackbar("ответ не был засчитан")
+                                        enqueueSnackbar("ответ не был засчитан");
                                     }
                                 }
                             }}

src/pages/ViewPublicationPage/questions/Number.tsx

@@ -12,14 +12,14 @@ import { enqueueSnackbar } from "notistack";
 import { sendAnswer } from "@api/quizRelase";
 
 import { quizThemes } from "@utils/themes/Publication/themePublication";
-import { useQuestionsStore } from "@stores/quizData/store";
+import { useQuizData } from "@utils/hooks/useQuizData";
 
 type NumberProps = {
     currentQuestion: QuizQuestionNumber;
 };
 
 export const Number = ({ currentQuestion }: NumberProps) => {
-    const { settings } = useQuestionsStore();
+    const { settings } = useQuizData();
     const [inputValue, setInputValue] = useState<string>("0");
     const [minRange, setMinRange] = useState<string>("0");
     const [maxRange, setMaxRange] = useState<string>("100000000000");
@@ -105,8 +105,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
         }
     }, []);
 
-    if (!settings) throw new Error("settings is null");
-
     return (
         <Box>
             <Typography variant="h5" color={theme.palette.text.primary}>

src/pages/ViewPublicationPage/questions/Rating.tsx

@@ -19,7 +19,7 @@ import StarIconMini from "@icons/questionsPage/StarIconMini";
 import type { QuizQuestionRating } from "../../../model/questionTypes/rating";
 import { enqueueSnackbar } from "notistack";
 import { sendAnswer } from "@api/quizRelase";
-import { useQuestionsStore } from "@stores/quizData/store";
+import { useQuizData } from "@utils/hooks/useQuizData";
 
 type RatingProps = {
     currentQuestion: QuizQuestionRating;
@@ -57,7 +57,7 @@ const buttonRatingForm = [
 ];
 
 export const Rating = ({ currentQuestion }: RatingProps) => {
-  const { settings } = useQuestionsStore()
+    const { settings } = useQuizData();
     const { answers } = useQuizViewStore();
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down(650));
@@ -69,8 +69,6 @@ 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>
@@ -101,12 +99,12 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
                                     questionId: currentQuestion.id,
                                     body: String(value) + " из " + currentQuestion.content.steps,
                                     qid: settings.qid
-                })
+                                });
 
-                updateAnswer(currentQuestion.id, String(value))
+                                updateAnswer(currentQuestion.id, String(value));
 
                             } catch (e) {
-                enqueueSnackbar("ответ не был засчитан")
+                                enqueueSnackbar("ответ не был засчитан");
                             }
                         }}
                         sx={{

src/pages/ViewPublicationPage/questions/Select.tsx

@@ -7,8 +7,8 @@ import { useQuizViewStore, updateAnswer, deleteAnswer } from "@stores/quizView/s
 import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
 import { enqueueSnackbar } from "notistack";
 import { sendAnswer } from "@api/quizRelase";
+import { useQuizData } from "@utils/hooks/useQuizData";
 
-import { useQuestionsStore } from "@stores/quizData/store"
 type SelectProps = {
     currentQuestion: QuizQuestionSelect;
 };
@@ -16,15 +16,13 @@ type SelectProps = {
 export const Select = ({ currentQuestion }: SelectProps) => {
     const theme = useTheme();
 
-  const { settings } = useQuestionsStore()
+    const { settings } = useQuizData();
     const { answers } = useQuizViewStore();
     const { answer } =
         answers.find(
             ({ 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>
@@ -50,10 +48,10 @@ export const Select = ({ currentQuestion }: SelectProps) => {
                                     questionId: currentQuestion.id,
                                     body: "",
                                     qid: settings.qid
-                })
+                                });
 
                             } catch (e) {
-                enqueueSnackbar("ответ не был засчитан")
+                                enqueueSnackbar("ответ не был засчитан");
                             }
                             return;
                         }
@@ -64,12 +62,12 @@ export const Select = ({ currentQuestion }: SelectProps) => {
                                 questionId: currentQuestion.id,
                                 body: String(currentQuestion.content.variants[Number(value)].answer),
                                 qid: settings.qid
-              })
+                            });
 
                             updateAnswer(currentQuestion.id, String(value));
 
                         } catch (e) {
-              enqueueSnackbar("ответ не был засчитан")
+                            enqueueSnackbar("ответ не был засчитан");
                         }
 
 

src/pages/ViewPublicationPage/questions/Text.tsx

@@ -6,9 +6,9 @@ import { useQuizViewStore, updateAnswer } from "@stores/quizView/store";
 
 import type { QuizQuestionText } from "../../../model/questionTypes/text";
 import { enqueueSnackbar } from "notistack";
-import { useQuestionsStore } from "@stores/quizData/store"
 import { sendAnswer } from "@api/quizRelase";
 import { useDebouncedCallback } from "use-debounce";
+import { useQuizData } from "@utils/hooks/useQuizData";
 
 type TextProps = {
     currentQuestion: QuizQuestionText;
@@ -16,24 +16,22 @@ type TextProps = {
 
 export const Text = ({ currentQuestion }: TextProps) => {
     const theme = useTheme();
-  const { settings } = useQuestionsStore()
+    const { settings } = useQuizData();
     const { answers } = useQuizViewStore();
     const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
 
     const inputHC = useDebouncedCallback(async (text) => {
-    if (!settings) return;
-    
         try {
 
             await sendAnswer({
                 questionId: currentQuestion.id,
                 body: text,
                 qid: settings.qid
-      })
+            });
 
 
         } catch (e) {
-      enqueueSnackbar("ответ не был засчитан")
+            enqueueSnackbar("ответ не был засчитан");
         }
     }, 400);
     return (
@@ -52,8 +50,8 @@ export const Text = ({ currentQuestion }: TextProps) => {
                     //@ts-ignore
                     value={answer || ""}
                     onChange={async ({ target }) => {
-            updateAnswer(currentQuestion.id, target.value)
+                        updateAnswer(currentQuestion.id, target.value);
-            inputHC(target.value)
+                        inputHC(target.value);
                     }
                     }
                     sx={{

src/pages/ViewPublicationPage/questions/Variant.tsx

@@ -29,7 +29,7 @@ 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";
+import { useQuizData } from "@utils/hooks/useQuizData";
 
 const TextField = MuiTextField as unknown as FC<TextFieldProps>;
 
@@ -135,11 +135,9 @@ const VariantItem = ({
     index,
     own = false,
 }: VariantItemProps) => {
-    const { settings } = useQuestionsStore()
+    const { settings } = useQuizData();
     const theme = useTheme();
 
-    if (!settings) throw new Error("settings is null");
-
     return (
         <FormControlLabel
             key={variant.id}
@@ -195,7 +193,7 @@ const VariantItem = ({
                                 ? currentAnswer?.filter((item) => item !== variantId)
                                 : [...currentAnswer, variantId],
                             qid: settings.qid
-                        })
+                        });
 
                         updateAnswer(
                             currentQuestion.id,
@@ -205,7 +203,7 @@ const VariantItem = ({
                         );
 
                     } catch (e) {
-                        enqueueSnackbar("ответ не был засчитан")
+                        enqueueSnackbar("ответ не был засчитан");
                     }
 
 
@@ -218,12 +216,12 @@ const VariantItem = ({
                         questionId: currentQuestion.id,
                         body: currentQuestion.content.variants[index].answer,
                         qid: settings.qid
-                    })
+                    });
 
                     updateAnswer(currentQuestion.id, variantId);
 
                 } catch (e) {
-                    enqueueSnackbar("ответ не был засчитан")
+                    enqueueSnackbar("ответ не был засчитан");
                 }
 
                 if (answer === variantId) {
@@ -233,10 +231,10 @@ const VariantItem = ({
                             questionId: currentQuestion.id,
                             body: "",
                             qid: settings.qid
-                        })
+                        });
 
                     } catch (e) {
-                        enqueueSnackbar("ответ не был засчитан")
+                        enqueueSnackbar("ответ не был засчитан");
                     }
                     deleteAnswer(currentQuestion.id);
                 }

src/pages/ViewPublicationPage/questions/Varimg.tsx

@@ -7,10 +7,6 @@ import {
     useTheme,
     useMediaQuery
 } from "@mui/material";
-
-import gag from "./gag.png"
-
-import { useQuestionsStore } from "@stores/quizData/store"
 import { useQuizViewStore, updateAnswer, deleteAnswer } from "@stores/quizView/store";
 
 import RadioCheck from "@ui_kit/RadioCheck";
@@ -20,13 +16,15 @@ import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
 import { enqueueSnackbar } from "notistack";
 import { sendAnswer } from "@api/quizRelase";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
+import BlankImage from "@icons/BlankImage";
+import { useQuizData } from "@utils/hooks/useQuizData";
 
 type VarimgProps = {
     currentQuestion: QuizQuestionVarImg;
 };
 
 export const Varimg = ({ currentQuestion }: VarimgProps) => {
-  const { settings } = useQuestionsStore()
+    const { settings } = useQuizData();
     const { answers } = useQuizViewStore();
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down(650));
@@ -39,8 +37,6 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
         ({ id }) => answer === id
     );
 
-  if (!settings) throw new Error("settings is null");
-
     return (
         <Box>
             <Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
@@ -94,7 +90,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                                             questionId: currentQuestion.id,
                                             body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`,
                                             qid: settings.qid
-                    })
+                                        });
 
                                         updateAnswer(
                                             currentQuestion.id,
@@ -102,7 +98,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                                         );
 
                                     } catch (e) {
-                    enqueueSnackbar("ответ не был засчитан")
+                                        enqueueSnackbar("ответ не был засчитан");
                                     }
 
 
@@ -113,10 +109,10 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                                                 questionId: currentQuestion.id,
                                                 body: "",
                                                 qid: settings.qid
-                      })
+                                            });
 
                                         } catch (e) {
-                      enqueueSnackbar("ответ не был засчитан")
+                                            enqueueSnackbar("ответ не был засчитан");
                                         }
                                         deleteAnswer(currentQuestion.id);
                                     }
@@ -146,11 +142,15 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                     }}
                 >
                     {answer ? (
+                        variant?.extendedText ? (
                             <img
-              src={variant?.extendedText || gag}
+                                src={variant?.extendedText}
                                 style={{ width: "100%", height: "100%", objectFit: "cover" }}
                                 alt=""
                             />
+                        ) : (
+                            <BlankImage />
+                        )
                     ) : (currentQuestion.content.replText !== " " && currentQuestion.content.replText.length > 0) ? currentQuestion.content.replText : variant?.extendedText || isMobile ? (
                         "Выберите вариант ответа ниже"
                     ) : (

src/pages/ViewPublicationPage/tools/File.tsx

@@ -4,9 +4,9 @@ import { Box, Button, Typography } from "@mui/material";
 import type {
     QuizQuestionFile,
     UploadFileType,
-} from "model/questionTypes/file";
+} from "@model/questionTypes/file";
 
-export const UPLOAD_FILE_TYPES_MAP: Record<UploadFileType, string> = {
+const UPLOAD_FILE_TYPES_MAP: Record<UploadFileType, string> = {
     picture: "image/*",
     video: "video/*",
     audio: "audio/*",

src/stores/quizData/actions.ts

@@ -1,12 +0,0 @@
-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;
-
-    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,29 +0,0 @@
-import { QuizSettings } from "@model/settingsData";
-import { create } from "zustand";
-import { devtools } from "zustand/middleware";
-
-
-type QuizDataStore = {
-    settings: QuizSettings["settings"] | null;
-    items: QuizSettings["items"];
-    cnt: QuizSettings["cnt"];
-    recentlyСompleted: boolean;
-};
-
-const initialState: QuizDataStore = {
-    settings: null,
-    items: [],
-    cnt: 0,
-    recentlyСompleted: false,
-};
-
-export const useQuestionsStore = create<QuizDataStore>()(
-    devtools(
-        () => initialState,
-        {
-            name: "QuizDataStore",
-            enabled: import.meta.env.DEV,
-            trace: import.meta.env.DEV,
-        }
-    )
-);

src/utils/handleComponentError.ts

@@ -0,0 +1,43 @@
+import { ErrorInfo } from "react";
+
+
+interface ComponentError {
+    timestamp: number;
+    message: string;
+    callStack: string | undefined;
+    componentStack: string | null | undefined;
+}
+
+export function handleComponentError(error: Error, info: ErrorInfo) {
+    const componentError: ComponentError = {
+        timestamp: Math.floor(Date.now() / 1000),
+        message: error.message,
+        callStack: error.stack,
+        componentStack: info.componentStack,
+    };
+
+    queueErrorRequest(componentError);
+}
+
+let errorsQueue: ComponentError[] = [];
+let timeoutId: ReturnType<typeof setTimeout>;
+
+function queueErrorRequest(error: ComponentError) {
+    errorsQueue.push(error);
+
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+        sendErrorsToServer();
+    }, 1000);
+}
+
+async function sendErrorsToServer() {
+    // makeRequest({
+    //     url: "",
+    //     method: "POST",
+    //     body: errorsQueue,
+    //     useToken: true,
+    // });
+    console.log(`Fake-sending ${errorsQueue.length} errors to server`, errorsQueue);
+    errorsQueue = [];
+}

src/utils/hooks/useGetSettings.ts

@@ -1,56 +0,0 @@
-import { useEffect, useLayoutEffect, useRef, useState } from "react"
-import { useQuestionsStore } from "@stores/quizData/store";
-
-import { getData } from "@api/quizRelase"
-
-interface SettingsGetter {
-    quizId: string
-}
-
-export function useGetSettings(quizId: string) {
-
-    const [fetchState, setFetchState] = useState<"fetching" | "idle" | "all fetched">("idle")
-
-    useEffect(() => {
-        async function get() {
-            const data = await getData(quizId)
-            //@ts-ignore
-            const settings = data.settings
-            const parseData = {
-                settings: {
-                    fp: settings.fp,
-                    rep: settings.rep,
-                    name: settings.name,
-                    cfg: JSON.parse(settings?.cfg),
-                    lim: settings.lim,
-                    due: settings.due,
-                    delay: settings.delay,
-                    pausable: settings.pausable
-                },
-                //@ts-ignore
-                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
-                    }
-                }),
-                //@ts-ignore
-                cnt: data.cnt
-            }
-            //@ts-ignore
-             useQuestionsStore.setState(parseData)
-        }
-        get()
-        // const controller = new AbortController()
-
-
-    }, [])
-    return
-    // return 
-}

src/utils/hooks/useQuizData.ts

@@ -0,0 +1,34 @@
+import { getData } from "@api/quizRelase";
+import { parseQuizData } from "@model/api/getQuizData";
+import { QuizSettings } from "@model/settingsData";
+import { enqueueSnackbar } from "notistack";
+import useSWR from "swr";
+import { useQuizId } from "../../contexts/QuizIdContext";
+import { replaceSpacesToEmptyLines } from "../../pages/ViewPublicationPage/tools/replaceSpacesToEmptyLines";
+
+
+export function useQuizData() {
+    const quizId = useQuizId();
+    const { data } = useSWR(["quizData", quizId], params => getQuizData(params[1]), {
+        suspense: true,
+    });
+
+    return data;
+}
+
+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;
+} 

src/widget.tsx

@@ -1,5 +1,5 @@
+import WidgetApp from "./WidgetApp";
 import { Root, createRoot } from "react-dom/client";
-import App from "./App";
 
 
 let root: Root | undefined = undefined;
@@ -14,7 +14,7 @@ const widget = {
 
         root = createRoot(element);
 
-        root.render(<App widget quizId={quizId} />);
+        root.render(<WidgetApp quizId={quizId} />);
     },
     unmount() {
         if (root) root.unmount();

tsconfig.json

@@ -19,25 +19,24 @@
         /* Linting */
         "strict": true,
         "noFallthroughCasesInSwitch": true,
-        "baseUrl": "./src",
         "paths": {
             "@ui_kit/*": [
-                "./ui_kit/*"
+                "./src/ui_kit/*"
             ],
             "@icons/*": [
-                "./assets/icons/*"
+                "./src/assets/icons/*"
             ],
             "@stores/*": [
-                "./stores/*"
+                "./src/stores/*"
             ],
             "@api/*": [
-                "./api/*"
+                "./src/api/*"
             ],
             "@model/*": [
-                "./model/*"
+                "./src/model/*"
             ],
             "@utils/*": [
-                "./utils/*"
+                "./src/utils/*"
             ]
         }
     },

yarn.lock

@@ -737,6 +737,11 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@remix-run/router@1.14.2":
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.14.2.tgz#4d58f59908d9197ba3179310077f25c88e49ed17"
+  integrity sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==
+
 "@rollup/rollup-android-arm-eabi@4.9.5":
   version "4.9.5"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.5.tgz#b752b6c88a14ccfcbdf3f48c577ccc3a7f0e66b9"
@@ -2709,6 +2714,13 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-error-boundary@^4.0.12:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.12.tgz#59f8f1dbc53bbbb34fc384c8db7cf4082cb63e2c"
+  integrity sha512-kJdxdEYlb7CPC1A0SeUY38cHpjuu6UkvzKiAmqmOFL21VRfMhOcWxTCBgLVCO0VEMh9JhFNcVaXlV4/BTpiwOA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -2724,6 +2736,21 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
+react-router-dom@^6.21.3:
+  version "6.21.3"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.21.3.tgz#ef3a7956a3699c7b82c21fcb3dbc63c313ed8c5d"
+  integrity sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g==
+  dependencies:
+    "@remix-run/router" "1.14.2"
+    react-router "6.21.3"
+
+react-router@6.21.3:
+  version "6.21.3"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.21.3.tgz#8086cea922c2bfebbb49c6594967418f1f167d70"
+  integrity sha512-a0H638ZXULv1OdkmiK6s6itNhoy33ywxmUFT/xtSoVyf9VnC7n7+VT4LjVzdIHSaF5TIh9ylUgxMXksHTgGrKg==
+  dependencies:
+    "@remix-run/router" "1.14.2"
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"