QuizAnswerer component does not fetch data, but receives it as props

WidgetApp and App components fetch quiz data

lib/api/quizRelase.ts

@@ -1,7 +1,9 @@
-import { GetQuizDataResponse } from "@model/api/getQuizData";
+import { GetQuizDataResponse, parseQuizData } from "@model/api/getQuizData";
 import axios from "axios";
 
 import type { AxiosError } from "axios";
+import { replaceSpacesToEmptyLines } from "../components/ViewPublicationPage/tools/replaceSpacesToEmptyLines";
+import { QuizSettings } from "@model/settingsData";
 
 let SESSIONS = "";
 
@@ -57,6 +59,24 @@ export async function getData(quizId: string): Promise<{
     }
 }
 
+export async function getQuizData(quizId: string) {
+    const response = await getData(quizId);
+    const quizDataResponse = response.data;
+
+    if (response.error) {
+        throw new Error(response.error);
+    }
+    if (!quizDataResponse) {
+        throw new Error("Quiz not found");
+    }
+
+    const quizSettings = replaceSpacesToEmptyLines(parseQuizData(quizDataResponse));
+
+    const res = JSON.parse(JSON.stringify({ data: quizSettings }).replaceAll(/\\" \\"/g, '""').replaceAll(/" "/g, '""')).data as QuizSettings;
+    res.recentlyCompleted = response.isRecentlyCompleted;
+    return res;
+}
+
 export function sendAnswer({ questionId, body, qid }: any) {
     const formData = new FormData();
 

lib/components/QuizAnswerer.tsx

@@ -1,29 +1,31 @@
+import { QuizDataContext } from "@contexts/QuizDataContext";
+import { QuizSettings } from "@model/settingsData";
 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 ErrorBoundaryFallback from "@ui_kit/ErrorBoundaryFallback";
-import LoadingSkeleton from "@ui_kit/LoadingSkeleton";
 import { handleComponentError } from "@utils/handleComponentError";
+import lightTheme from "@utils/themes/light";
 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 "./ViewPublicationPage/ApologyPage";
 import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage";
-import lightTheme from "@utils/themes/light";
 
 
 moment.locale("ru");
 const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
 
-export default function QuizAnswerer() {
+type Props = {
+    quizSettings: QuizSettings;
+    quizId: string;
+    preview?: boolean;
+};
+
+export default function QuizAnswerer({ quizSettings, quizId, preview = false }: Props) {
 
     return (
-        <SWRConfig value={{
+        <QuizDataContext.Provider value={{ ...quizSettings, quizId, preview }}>
-            revalidateOnFocus: false,
-            shouldRetryOnError: false,
-        }}>
             <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="ru" localeText={localeText}>
                 <ThemeProvider theme={lightTheme}>
                     <SnackbarProvider
@@ -32,16 +34,14 @@ export default function QuizAnswerer() {
                     >
                         <CssBaseline />
                         <ErrorBoundary
-                            FallbackComponent={ErrorBoundaryFallback}
+                            FallbackComponent={ApologyPage}
                             onError={handleComponentError}
                         >
-                            <Suspense fallback={<LoadingSkeleton />}>
+                            <ViewPublicationPage />
-                                <ViewPublicationPage />
-                            </Suspense>
                         </ErrorBoundary>
                     </SnackbarProvider>
                 </ThemeProvider>
             </LocalizationProvider>
-        </SWRConfig>
+        </QuizDataContext.Provider>
     );
 } 

lib/components/ViewPublicationPage/ApologyPage.tsx

@@ -1,10 +1,13 @@
 import { Box, Typography } from "@mui/material";
+import { FallbackProps } from "react-error-boundary";
 
-type Props = {
+type Props = Partial<FallbackProps>;
-    message: string;
-};
 
-export const ApologyPage = ({ message }: Props) => {
+export const ApologyPage = ({ error }: Props) => {
+    let message = "Что-то пошло не так";
+
+    if (error.message === "No questions found") message = "Нет созданных вопросов";
+    if (error.message === "Quiz already completed") message = "Вы уже прошли этот опрос";
 
     return (
         <Box
@@ -17,9 +20,9 @@ export const ApologyPage = ({ message }: Props) => {
         >
             <Typography
                 sx={{
-                    textAlign: "center"
+                    textAlign: "center",
                 }}
-            >{message || "Что-то пошло не так"}</Typography>
+            >{message}</Typography>
         </Box>
     );
 };

lib/components/ViewPublicationPage/ContactForm.tsx

@@ -12,11 +12,10 @@ import { sendFC } from "@api/quizRelase";
 import { NameplateLogo } from "@icons/NameplateLogo";
 import { QuizQuestionResult } from "@model/questionTypes/result";
 import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
-import { useQuizData } from "@utils/hooks/useQuizData";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
 import { enqueueSnackbar } from "notistack";
-import { useQuizId } from "../../contexts/QuizIdContext";
 import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
+import { useQuizData } from "@contexts/QuizDataContext";
 
 
 const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
@@ -29,8 +28,7 @@ type Props = {
 
 export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
     const theme = useTheme();
-    const qid = useQuizId();
+    const { settings, questions, quizId } = useQuizData();
-    const { settings, questions } = useQuizData();
 
     const [ready, setReady] = useState(false);
     const [name, setName] = useState("");
@@ -74,13 +72,13 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                 await sendFC({
                     questionId: currentQuestion.id,
                     body: body,
-                    qid,
+                    qid: quizId,
                 });
 
                 const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
                 localStorage.setItem(
                     "sessions",
-                    JSON.stringify({ ...sessions, [qid]: new Date().getTime() })
+                    JSON.stringify({ ...sessions, [quizId]: new Date().getTime() })
                 );
             } catch (e) {
                 enqueueSnackbar("ответ не был засчитан");
@@ -116,15 +114,15 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                 && adress.length === 0
             ) return enqueueSnackbar("Пожалуйста, заполните поля");
 
-        //почта валидна, хоть одно поле заполнено
+            //почта валидна, хоть одно поле заполнено
-        setFire(true);
+            setFire(true);
             try {
                 await inputHC();
                 fireOnce.current = false;
                 const sessions: any = JSON.parse(
                     localStorage.getItem("sessions") || "{}"
                 );
-                sessions[qid] = Date.now();
+                sessions[quizId] = Date.now();
                 localStorage.setItem(
                     "sessions",
                     JSON.stringify(sessions)
@@ -243,7 +241,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                             {settings.cfg.formContact?.button || "Получить результаты"}
                         </Button>
                     }
-                    
+
                     <Box
                         sx={{
                             display: "flex",

lib/components/ViewPublicationPage/Footer.tsx

@@ -1,7 +1,7 @@
+import { useQuizData } from "@contexts/QuizDataContext";
 import { Box, Typography, useTheme } from "@mui/material";
 import { ReactNode } from "react";
 
-import { useQuizData } from "@utils/hooks/useQuizData";
 
 type FooterProps = {
     stepNumber: number | null;

lib/components/ViewPublicationPage/Question.tsx

@@ -17,7 +17,7 @@ import type { RealTypedQuizQuestion } from "../../model/questionTypes/shared";
 
 import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
 import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
-import { useQuizData } from "@utils/hooks/useQuizData";
+import { useQuizData } from "@contexts/QuizDataContext";
 import { notReachable } from "@utils/notReachable";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
 import { ReactNode } from "react";

lib/components/ViewPublicationPage/ResultForm.tsx

@@ -8,7 +8,7 @@ import {
 import { NameplateLogo } from "@icons/NameplateLogo";
 import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
 
-import { useQuizData } from "@utils/hooks/useQuizData";
+import { useQuizData } from "@contexts/QuizDataContext";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
 import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
 import type { QuizQuestionResult } from "../../model/questionTypes/result";

lib/components/ViewPublicationPage/StartPageViewPublication.tsx

@@ -5,7 +5,7 @@ import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
 
 import { NameplateLogo } from "@icons/NameplateLogo";
 import { QuizStartpageAlignType, QuizStartpageType } from "@model/settingsData";
-import { useQuizData } from "@utils/hooks/useQuizData";
+import { useQuizData } from "@contexts/QuizDataContext";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
 import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
 import { setCurrentQuizStep } from "@stores/quizView";

lib/components/ViewPublicationPage/ViewPublicationPage.tsx

@@ -1,7 +1,7 @@
 import { Button, ThemeProvider } from "@mui/material";
 import { useQuizViewStore } from "@stores/quizView";
 import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
-import { useQuizData } from "@utils/hooks/useQuizData";
+import { useQuizData } from "@contexts/QuizDataContext";
 import { notReachable } from "@utils/notReachable";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
 import { ReactElement, useEffect } from "react";
@@ -37,7 +37,7 @@ export default function ViewPublicationPage() {
 
     if (recentlyCompleted) throw new Error("Quiz already completed");
     if (currentQuizStep === "startpage" && settings.cfg.noStartPage) currentQuizStep = "question";
-    
+
     let quizStepElement: ReactElement;
     switch (currentQuizStep) {
         case "startpage": {

lib/components/ViewPublicationPage/questions/Date.tsx

@@ -10,8 +10,7 @@ import { enqueueSnackbar } from "notistack";
 import { sendAnswer } from "@api/quizRelase";
 
 import { quizThemes } from "@utils/themes/Publication/themePublication";
-import { useQuizData } from "@utils/hooks/useQuizData";
+import { useQuizData } from "@contexts/QuizDataContext";
-import { useQuizId } from "../../../contexts/QuizIdContext";
 
 type DateProps = {
     currentQuestion: QuizQuestionDate;
@@ -19,8 +18,7 @@ type DateProps = {
 
 export const Date = ({ currentQuestion }: DateProps) => {
     const theme = useTheme();
-    const qid = useQuizId();
+    const { settings, quizId } = useQuizData();
-    const { settings } = useQuizData();
     const { answers } = useQuizViewStore();
     const answer = answers.find(
         ({ questionId }) => questionId === currentQuestion.id
@@ -62,7 +60,7 @@ export const Date = ({ currentQuestion }: DateProps) => {
                             await sendAnswer({
                                 questionId: currentQuestion.id,
                                 body: moment(date).format("YYYY.MM.DD"),
-                                qid,
+                                qid: quizId,
                             });
 
                             updateAnswer(

lib/components/ViewPublicationPage/questions/Emoji.tsx

@@ -16,8 +16,8 @@ import RadioIcon from "@ui_kit/RadioIcon";
 import { sendAnswer } from "@api/quizRelase";
 
 import { enqueueSnackbar } from "notistack";
-import { useQuizId } from "../../../contexts/QuizIdContext";
 import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
+import { useQuizData } from "@contexts/QuizDataContext";
 
 type EmojiProps = {
     currentQuestion: QuizQuestionEmoji;
@@ -25,7 +25,7 @@ type EmojiProps = {
 
 export const Emoji = ({ currentQuestion }: EmojiProps) => {
     const theme = useTheme();
-    const qid = useQuizId();
+    const quizId = useQuizData();
     const { answers } = useQuizViewStore();
     const { answer } =
         answers.find(
@@ -120,7 +120,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                                         await sendAnswer({
                                             questionId: currentQuestion.id,
                                             body: currentQuestion.content.variants[index].extendedText + " " + currentQuestion.content.variants[index].answer,
-                                            qid,
+                                            qid: quizId,
                                         });
 
                                         updateAnswer(
@@ -142,7 +142,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                                             await sendAnswer({
                                                 questionId: currentQuestion.id,
                                                 body: "",
-                                                qid,
+                                                qid: quizId,
                                             });
 
                                         } catch (e) {

lib/components/ViewPublicationPage/questions/File.tsx

@@ -17,9 +17,9 @@ import type { UploadFileType } from "@model/questionTypes/file";
 import { enqueueSnackbar } from "notistack";
 import type { DragEvent } from "react";
 import { useState, type ChangeEvent } from "react";
-import { useQuizId } from "../../../contexts/QuizIdContext";
 import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
 import type { QuizQuestionFile } from "../../../model/questionTypes/file";
+import { useQuizData } from "@contexts/QuizDataContext";
 
 type FileProps = {
     currentQuestion: QuizQuestionFile;
@@ -118,7 +118,7 @@ const UPLOAD_FILE_DESCRIPTIONS_MAP: Record<
 export const File = ({ currentQuestion }: FileProps) => {
     const theme = useTheme();
     const { answers } = useQuizViewStore();
-    const qid = useQuizId();
+    const quizId = useQuizData();
     const [statusModal, setStatusModal] = useState<"errorType" | "errorSize" | "picture" | "video" | "audio" | "document" | "">("");
 
     const answer = answers.find(
@@ -147,14 +147,14 @@ export const File = ({ currentQuestion }: FileProps) => {
                                 file: file,
                                 name: file.name
                             },
-                            qid,
+                            qid: quizId,
                         });
                         console.log(data);
 
                         await sendAnswer({
                             questionId: currentQuestion.id,
-                            body: `https://storage.yandexcloud.net/squizanswer/${qid}/${currentQuestion.id}/${data.data.fileIDMap[currentQuestion.id]}`,
+                            body: `https://storage.yandexcloud.net/squizanswer/${quizId}/${currentQuestion.id}/${data.data.fileIDMap[currentQuestion.id]}`,
-                            qid,
+                            qid: quizId,
                         });
 
                         updateAnswer(

lib/components/ViewPublicationPage/questions/Images.tsx

@@ -13,16 +13,16 @@ import RadioIcon from "@ui_kit/RadioIcon";
 
 import { sendAnswer } from "@api/quizRelase";
 import { enqueueSnackbar } from "notistack";
-import { useQuizId } from "../../../contexts/QuizIdContext";
 import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
 import type { QuizQuestionImages } from "../../../model/questionTypes/images";
+import { useQuizData } from "@contexts/QuizDataContext";
 
 type ImagesProps = {
     currentQuestion: QuizQuestionImages;
 };
 
 export const Images = ({ currentQuestion }: ImagesProps) => {
-    const qid = useQuizId();
+    const quizId =useQuizData();
     const { answers } = useQuizViewStore();
     const theme = useTheme();
     const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer;
@@ -74,7 +74,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                                     await sendAnswer({
                                         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,
+                                        qid: quizId,
                                     });
 
                                     updateAnswer(
@@ -95,7 +95,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                                         await sendAnswer({
                                             questionId: currentQuestion.id,
                                             body: "",
-                                            qid,
+                                            qid: quizId,
                                         });
 
                                     } catch (e) {

lib/components/ViewPublicationPage/questions/Number.tsx

@@ -11,446 +11,444 @@ import { sendAnswer } from "@api/quizRelase";
 import { enqueueSnackbar } from "notistack";
 import type { QuizQuestionNumber } from "@model/questionTypes/number";
 
-import { useQuizData } from "@utils/hooks/useQuizData";
+import { useQuizData } from "@contexts/QuizDataContext";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
-import { useQuizId } from "@contexts/QuizIdContext";
 import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
 
 import type { ChangeEvent, SyntheticEvent } from "react";
 
 type NumberProps = {
-  currentQuestion: QuizQuestionNumber;
+    currentQuestion: QuizQuestionNumber;
 };
 
 export const Number = ({ currentQuestion }: NumberProps) => {
-  const qid = useQuizId();
+    const { settings, quizId } = useQuizData();
-  const { settings } = useQuizData();
+    const [inputValue, setInputValue] = useState<string>("0");
-  const [inputValue, setInputValue] = useState<string>("0");
+    const [minRange, setMinRange] = useState<string>("0");
-  const [minRange, setMinRange] = useState<string>("0");
+    const [maxRange, setMaxRange] = useState<string>("100000000000");
-  const [maxRange, setMaxRange] = useState<string>("100000000000");
+    const [reversedInputValue, setReversedInputValue] = useState<string>("0");
-  const [reversedInputValue, setReversedInputValue] = useState<string>("0");
+    const [reversedMinRange, setReversedMinRange] = useState<string>("0");
-  const [reversedMinRange, setReversedMinRange] = useState<string>("0");
+    const [reversedMaxRange, setReversedMaxRange] =
-  const [reversedMaxRange, setReversedMaxRange] =
+        useState<string>("100000000000");
-    useState<string>("100000000000");
+    const theme = useTheme();
-  const theme = useTheme();
+    const { answers } = useQuizViewStore();
-  const { answers } = useQuizViewStore();
 
-  const isMobile = useRootContainerSize() < 650;
+    const isMobile = useRootContainerSize() < 650;
-  const [minBorder, maxBorder] = currentQuestion.content.range
+    const [minBorder, maxBorder] = currentQuestion.content.range
-    .split("—")
+        .split("—")
-    .map(window.Number);
+        .map(window.Number);
-  const min = minBorder < maxBorder ? minBorder : maxBorder;
+    const min = minBorder < maxBorder ? minBorder : maxBorder;
-  const max = minBorder < maxBorder ? maxBorder : minBorder;
+    const max = minBorder < maxBorder ? maxBorder : minBorder;
-  const reversed = minBorder > maxBorder;
+    const reversed = minBorder > maxBorder;
 
-  const sendAnswerToBackend = async (value: string, noUpdate = false) => {
+    const sendAnswerToBackend = async (value: string, noUpdate = false) => {
-    try {
+        try {
-      await sendAnswer({
+            await sendAnswer({
-        questionId: currentQuestion.id,
+                questionId: currentQuestion.id,
-        body: value,
+                body: value,
-        qid,
+                qid: quizId,
-      });
+            });
 
-      if (!noUpdate) {
+            if (!noUpdate) {
-        updateAnswer(currentQuestion.id, value, 0);
+                updateAnswer(currentQuestion.id, value, 0);
-      }
+            }
-    } catch (e) {
+        } catch (e) {
-      enqueueSnackbar("ответ не был засчитан");
+            enqueueSnackbar("ответ не был засчитан");
-    }
-  };
-
-  const updateValueDebounced = useDebouncedCallback(async (value: string) => {
-    if (reversed) {
-      const newValue =
-        window.Number(value) < window.Number(min)
-          ? String(min)
-          : window.Number(value) > window.Number(max)
-          ? String(max)
-          : value;
-
-      setReversedInputValue(newValue);
-      updateAnswer(
-        currentQuestion.id,
-        String(max + min - window.Number(newValue)),
-        0
-      );
-      await sendAnswerToBackend(String(window.Number(newValue)), true);
-
-      return;
-    }
-
-    const newValue =
-      window.Number(value) < window.Number(minRange)
-        ? minRange
-        : window.Number(value) > window.Number(maxRange)
-        ? maxRange
-        : value;
-
-    setInputValue(newValue);
-    await sendAnswerToBackend(newValue);
-  }, 1000);
-  const updateMinRangeDebounced = useDebouncedCallback(
-    async (value: string, crowded = false) => {
-      if (reversed) {
-        const newMinRange = crowded
-          ? window.Number(value.split("—")[1])
-          : max + min - window.Number(value.split("—")[0]) < min
-          ? min
-          : max + min - window.Number(value.split("—")[0]);
-
-        const newMinValue =
-          window.Number(value.split("—")[0]) > max
-            ? String(max)
-            : value.split("—")[0];
-
-        setReversedMinRange(
-          crowded ? String(max + min - window.Number(newMinValue)) : newMinValue
-        );
-        updateAnswer(
-          currentQuestion.id,
-          `${newMinRange}—${value.split("—")[1]}`,
-          0
-        );
-        await sendAnswerToBackend(
-          `${newMinValue}—${value.split("—")[1]}`,
-          true
-        );
-
-        return;
-      }
-
-      const newMinValue = crowded
-        ? maxRange
-        : window.Number(value.split("—")[0]) < min
-        ? String(min)
-        : value.split("—")[0];
-
-      setMinRange(newMinValue);
-      await sendAnswerToBackend(`${newMinValue}—${value.split("—")[1]}`);
-    },
-    1000
-  );
-  const updateMaxRangeDebounced = useDebouncedCallback(
-    async (value: string, crowded = false) => {
-      if (reversed) {
-        const newMaxRange = crowded
-          ? window.Number(value.split("—")[1])
-          : max + min - window.Number(value.split("—")[1]) > max
-          ? max
-          : max + min - window.Number(value.split("—")[1]);
-
-        const newMaxValue =
-          window.Number(value.split("—")[1]) < min
-            ? String(min)
-            : value.split("—")[1];
-
-        setReversedMaxRange(
-          crowded ? String(max + min - window.Number(newMaxValue)) : newMaxValue
-        );
-        updateAnswer(
-          currentQuestion.id,
-          `${value.split("—")[0]}—${newMaxRange}`,
-          0
-        );
-        await sendAnswerToBackend(
-          `${value.split("—")[0]}—${newMaxValue}`,
-          true
-        );
-
-        return;
-      }
-
-      const newMaxValue = crowded
-        ? minRange
-        : window.Number(value.split("—")[1]) > max
-        ? String(max)
-        : value.split("—")[1];
-
-      setMaxRange(newMaxValue);
-      await sendAnswerToBackend(`${value.split("—")[0]}—${newMaxValue}`);
-    },
-    1000
-  );
-  const answer = answers.find(
-    ({ questionId }) => questionId === currentQuestion.id
-  )?.answer as string;
-
-  const sliderValue =
-    answer ||
-    (reversed
-      ? max + min - currentQuestion.content.start + "—" + max
-      : currentQuestion.content.start + "—" + max);
-
-  useEffect(() => {
-    if (answer) {
-      if (answer.includes("—")) {
-        if (reversed) {
-          setReversedMinRange(
-            String(max + min - window.Number(answer.split("—")[0]))
-          );
-          setReversedMaxRange(
-            String(max + min - window.Number(answer.split("—")[1]))
-          );
-        } else {
-          setMinRange(answer.split("—")[0]);
-          setMaxRange(answer.split("—")[1]);
         }
-      } else {
+    };
+
+    const updateValueDebounced = useDebouncedCallback(async (value: string) => {
         if (reversed) {
-          setReversedInputValue(String(max + min - window.Number(answer)));
+            const newValue =
-        } else {
+                window.Number(value) < window.Number(min)
-          setInputValue(answer);
+                    ? String(min)
+                    : window.Number(value) > window.Number(max)
+                        ? String(max)
+                        : value;
+
+            setReversedInputValue(newValue);
+            updateAnswer(
+                currentQuestion.id,
+                String(max + min - window.Number(newValue)),
+                0
+            );
+            await sendAnswerToBackend(String(window.Number(newValue)), true);
+
+            return;
         }
-      }
-    }
 
-    if (!answer) {
+        const newValue =
-      setMinRange(String(currentQuestion.content.start));
+            window.Number(value) < window.Number(minRange)
-      setMaxRange(String(max));
+                ? minRange
+                : window.Number(value) > window.Number(maxRange)
+                    ? maxRange
+                    : value;
 
-      if (currentQuestion.content.chooseRange) {
+        setInputValue(newValue);
-        setReversedMinRange(String(currentQuestion.content.start));
+        await sendAnswerToBackend(newValue);
-        setReversedMaxRange(String(min));
+    }, 1000);
-      }
+    const updateMinRangeDebounced = useDebouncedCallback(
+        async (value: string, crowded = false) => {
+            if (reversed) {
+                const newMinRange = crowded
+                    ? window.Number(value.split("—")[1])
+                    : max + min - window.Number(value.split("—")[0]) < min
+                        ? min
+                        : max + min - window.Number(value.split("—")[0]);
 
-      setReversedInputValue(String(currentQuestion.content.start));
+                const newMinValue =
-      setInputValue(String(currentQuestion.content.start));
+                    window.Number(value.split("—")[0]) > max
-    }
+                        ? String(max)
-  }, []);
+                        : value.split("—")[0];
 
-  const onSliderChange = (_: Event, value: number | number[]) => {
+                setReversedMinRange(
-    const range = Array.isArray(value)
+                    crowded ? String(max + min - window.Number(newMinValue)) : newMinValue
-      ? `${value[0]}—${value[1]}`
+                );
-      : String(value);
+                updateAnswer(
+                    currentQuestion.id,
+                    `${newMinRange}—${value.split("—")[1]}`,
+                    0
+                );
+                await sendAnswerToBackend(
+                    `${newMinValue}—${value.split("—")[1]}`,
+                    true
+                );
 
-    updateAnswer(currentQuestion.id, range, 0);
+                return;
-  };
+            }
 
-  const onChangeCommitted = async (
+            const newMinValue = crowded
-    _: Event | SyntheticEvent<Element, Event>,
+                ? maxRange
-    value: number | number[]
+                : window.Number(value.split("—")[0]) < min
-  ) => {
+                    ? String(min)
-    if (currentQuestion.content.chooseRange && Array.isArray(value)) {
+                    : value.split("—")[0];
-      if (reversed) {
-        const newMinReversedValue = String(max + min - value[0]);
-        const newMaxReversedValue = String(max + min - value[1]);
 
-        setMinRange(String(value[0]));
+            setMinRange(newMinValue);
-        setMaxRange(String(value[1]));
+            await sendAnswerToBackend(`${newMinValue}—${value.split("—")[1]}`);
-        setReversedMinRange(newMinReversedValue);
+        },
-        setReversedMaxRange(newMaxReversedValue);
+        1000
-        await sendAnswerToBackend(
+    );
-          `${newMinReversedValue}—${newMaxReversedValue}`,
+    const updateMaxRangeDebounced = useDebouncedCallback(
-          true
+        async (value: string, crowded = false) => {
-        );
+            if (reversed) {
+                const newMaxRange = crowded
+                    ? window.Number(value.split("—")[1])
+                    : max + min - window.Number(value.split("—")[1]) > max
+                        ? max
+                        : max + min - window.Number(value.split("—")[1]);
 
-        return;
+                const newMaxValue =
-      }
+                    window.Number(value.split("—")[1]) < min
+                        ? String(min)
+                        : value.split("—")[1];
 
-      setMinRange(String(value[0]));
+                setReversedMaxRange(
-      setMaxRange(String(value[1]));
+                    crowded ? String(max + min - window.Number(newMaxValue)) : newMaxValue
-      await sendAnswerToBackend(`${value[0]}—${value[1]}`);
+                );
+                updateAnswer(
+                    currentQuestion.id,
+                    `${value.split("—")[0]}—${newMaxRange}`,
+                    0
+                );
+                await sendAnswerToBackend(
+                    `${value.split("—")[0]}—${newMaxValue}`,
+                    true
+                );
 
-      return;
+                return;
-    }
+            }
 
-    if (reversed) {
+            const newMaxValue = crowded
-      setReversedInputValue(String(max + min - window.Number(value)));
+                ? minRange
-    } else {
+                : window.Number(value.split("—")[1]) > max
-      setInputValue(String(value));
+                    ? String(max)
-    }
+                    : value.split("—")[1];
 
-    await sendAnswerToBackend(String(value));
+            setMaxRange(newMaxValue);
-  };
+            await sendAnswerToBackend(`${value.split("—")[0]}—${newMaxValue}`);
+        },
+        1000
+    );
+    const answer = answers.find(
+        ({ questionId }) => questionId === currentQuestion.id
+    )?.answer as string;
 
-  const changeValueLabelFormat = (value: number) => {
+    const sliderValue =
-    if (!reversed) {
+        answer ||
-      return value;
+        (reversed
-    }
+            ? max + min - currentQuestion.content.start + "—" + max
+            : currentQuestion.content.start + "—" + max);
 
-    const [minSliderBorder, maxSliderBorder] = sliderValue
+    useEffect(() => {
-      .split("—")
+        if (answer) {
-      .map(window.Number);
+            if (answer.includes("—")) {
+                if (reversed) {
+                    setReversedMinRange(
+                        String(max + min - window.Number(answer.split("—")[0]))
+                    );
+                    setReversedMaxRange(
+                        String(max + min - window.Number(answer.split("—")[1]))
+                    );
+                } else {
+                    setMinRange(answer.split("—")[0]);
+                    setMaxRange(answer.split("—")[1]);
+                }
+            } else {
+                if (reversed) {
+                    setReversedInputValue(String(max + min - window.Number(answer)));
+                } else {
+                    setInputValue(answer);
+                }
+            }
+        }
 
-    if (value === minSliderBorder) {
+        if (!answer) {
-      return max + min - minSliderBorder;
+            setMinRange(String(currentQuestion.content.start));
-    }
+            setMaxRange(String(max));
 
-    return max + min - maxSliderBorder;
+            if (currentQuestion.content.chooseRange) {
-  };
+                setReversedMinRange(String(currentQuestion.content.start));
+                setReversedMaxRange(String(min));
+            }
 
-  const onInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
+            setReversedInputValue(String(currentQuestion.content.start));
-    const value = target.value.replace(/\D/g, "");
+            setInputValue(String(currentQuestion.content.start));
+        }
+    }, []);
 
-    if (reversed) {
+    const onSliderChange = (_: Event, value: number | number[]) => {
-      setReversedInputValue(value);
+        const range = Array.isArray(value)
-    } else {
+            ? `${value[0]}—${value[1]}`
-      setInputValue(value);
+            : String(value);
-    }
 
-    updateValueDebounced(value);
+        updateAnswer(currentQuestion.id, range, 0);
-  };
+    };
 
-  const onMinInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
+    const onChangeCommitted = async (
-    const newValue = target.value.replace(/\D/g, "");
+        _: Event | SyntheticEvent<Element, Event>,
+        value: number | number[]
+    ) => {
+        if (currentQuestion.content.chooseRange && Array.isArray(value)) {
+            if (reversed) {
+                const newMinReversedValue = String(max + min - value[0]);
+                const newMaxReversedValue = String(max + min - value[1]);
 
-    if (reversed) {
+                setMinRange(String(value[0]));
-      setReversedMinRange(newValue);
+                setMaxRange(String(value[1]));
+                setReversedMinRange(newMinReversedValue);
+                setReversedMaxRange(newMaxReversedValue);
+                await sendAnswerToBackend(
+                    `${newMinReversedValue}—${newMaxReversedValue}`,
+                    true
+                );
 
-      if (window.Number(newValue) <= window.Number(reversedMaxRange)) {
+                return;
-        const value = max + min - window.Number(reversedMaxRange);
+            }
-        updateMinRangeDebounced(`${value}—${value}`, true);
 
-        return;
+            setMinRange(String(value[0]));
-      }
+            setMaxRange(String(value[1]));
+            await sendAnswerToBackend(`${value[0]}—${value[1]}`);
 
-      updateMinRangeDebounced(
+            return;
-        `${newValue}—${max + min - window.Number(reversedMaxRange)}`
+        }
-      );
 
-      return;
+        if (reversed) {
-    }
+            setReversedInputValue(String(max + min - window.Number(value)));
+        } else {
+            setInputValue(String(value));
+        }
 
-    setMinRange(newValue);
+        await sendAnswerToBackend(String(value));
+    };
 
-    if (window.Number(newValue) >= window.Number(maxRange)) {
+    const changeValueLabelFormat = (value: number) => {
-      updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);
+        if (!reversed) {
+            return value;
+        }
 
-      return;
+        const [minSliderBorder, maxSliderBorder] = sliderValue
-    }
+            .split("—")
+            .map(window.Number);
 
-    updateMinRangeDebounced(`${newValue}—${maxRange}`);
+        if (value === minSliderBorder) {
-  };
+            return max + min - minSliderBorder;
+        }
 
-  const onMaxInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
+        return max + min - maxSliderBorder;
-    const newValue = target.value.replace(/\D/g, "");
+    };
 
-    if (reversed) {
+    const onInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
-      setReversedMaxRange(newValue);
+        const value = target.value.replace(/\D/g, "");
 
-      if (window.Number(newValue) >= window.Number(reversedMinRange)) {
+        if (reversed) {
-        const value = max + min - window.Number(reversedMinRange);
+            setReversedInputValue(value);
-        updateMaxRangeDebounced(`${value}—${value}`, true);
+        } else {
+            setInputValue(value);
+        }
 
-        return;
+        updateValueDebounced(value);
-      }
+    };
 
-      updateMaxRangeDebounced(
+    const onMinInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
-        `${max + min - window.Number(reversedMinRange)}—${newValue}`
+        const newValue = target.value.replace(/\D/g, "");
-      );
 
-      return;
+        if (reversed) {
-    }
+            setReversedMinRange(newValue);
 
-    setMaxRange(newValue);
+            if (window.Number(newValue) <= window.Number(reversedMaxRange)) {
+                const value = max + min - window.Number(reversedMaxRange);
+                updateMinRangeDebounced(`${value}—${value}`, true);
 
-    if (window.Number(newValue) <= window.Number(minRange)) {
+                return;
-      updateMaxRangeDebounced(`${minRange}—${minRange}`, true);
+            }
 
-      return;
+            updateMinRangeDebounced(
-    }
+                `${newValue}—${max + min - window.Number(reversedMaxRange)}`
+            );
 
-    updateMaxRangeDebounced(`${minRange}—${newValue}`);
+            return;
-  };
+        }
 
-  return (
+        setMinRange(newValue);
-    <Box>
-      <Typography variant="h5" color={theme.palette.text.primary}>
-        {currentQuestion.title}
-      </Typography>
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          width: "100%",
-          marginTop: "20px",
-          gap: "30px",
-          paddingRight: isMobile ? "10px" : undefined,
-        }}
-      >
-        <CustomSlider
-          value={
-            currentQuestion.content.chooseRange
-              ? sliderValue.split("—").length || 0 > 1
-                ? sliderValue.split("—").map((item) => window.Number(item))
-                : [min, min + 1]
-              : window.Number(sliderValue.split("—")[0])
-          }
-          min={min}
-          max={max}
-          step={currentQuestion.content.step || 1}
-          onChange={onSliderChange}
-          onChangeCommitted={onChangeCommitted}
-          valueLabelFormat={changeValueLabelFormat}
-          sx={{
-            color: theme.palette.primary.main,
-            "& .MuiSlider-valueLabel": {
-              background: theme.palette.primary.main,
-            },
-          }}
-        />
 
-        {!currentQuestion.content.chooseRange && (
+        if (window.Number(newValue) >= window.Number(maxRange)) {
-          <CustomTextField
+            updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);
-            placeholder="0"
-            value={reversed ? reversedInputValue : inputValue}
-            onChange={onInputChange}
-            sx={{
-              maxWidth: "80px",
-              borderColor: theme.palette.text.primary,
-              "& .MuiInputBase-input": {
-                textAlign: "center",
-                backgroundColor: quizThemes[settings.cfg.theme].isLight
-                  ? "white"
-                  : theme.palette.background.default,
-              },
-            }}
-          />
-        )}
 
-        {currentQuestion.content.chooseRange && (
+            return;
-          <Box
+        }
-            sx={{
+
-              display: "flex",
+        updateMinRangeDebounced(`${newValue}—${maxRange}`);
-              gap: "15px",
+    };
-              alignItems: "center",
+
-              "& .MuiFormControl-root": { width: "auto" },
+    const onMaxInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
-            }}
+        const newValue = target.value.replace(/\D/g, "");
-          >
+
-            <CustomTextField
+        if (reversed) {
-              placeholder="0"
+            setReversedMaxRange(newValue);
-              value={reversed ? String(reversedMinRange) : minRange}
+
-              onChange={onMinInputChange}
+            if (window.Number(newValue) >= window.Number(reversedMinRange)) {
-              sx={{
+                const value = max + min - window.Number(reversedMinRange);
-                maxWidth: "80px",
+                updateMaxRangeDebounced(`${value}—${value}`, true);
-                borderColor: theme.palette.text.primary,
+
-                "& .MuiInputBase-input": {
+                return;
-                  textAlign: "center",
+            }
-                  backgroundColor: quizThemes[settings.cfg.theme].isLight
+
-                    ? "white"
+            updateMaxRangeDebounced(
-                    : theme.palette.background.default,
+                `${max + min - window.Number(reversedMinRange)}—${newValue}`
-                },
+            );
-              }}
+
-            />
+            return;
-            <Typography color={theme.palette.text.primary}>до</Typography>
+        }
-            <CustomTextField
+
-              placeholder="0"
+        setMaxRange(newValue);
-              value={reversed ? String(reversedMaxRange) : maxRange}
+
-              onChange={onMaxInputChange}
+        if (window.Number(newValue) <= window.Number(minRange)) {
-              sx={{
+            updateMaxRangeDebounced(`${minRange}—${minRange}`, true);
-                maxWidth: "80px",
+
-                borderColor: theme.palette.text.primary,
+            return;
-                "& .MuiInputBase-input": {
+        }
-                  textAlign: "center",
+
-                  backgroundColor: quizThemes[settings.cfg.theme].isLight
+        updateMaxRangeDebounced(`${minRange}—${newValue}`);
-                    ? "white"
+    };
-                    : theme.palette.background.default,
+
-                },
+    return (
-              }}
+        <Box>
-            />
+            <Typography variant="h5" color={theme.palette.text.primary}>
-          </Box>
+                {currentQuestion.title}
-        )}
+            </Typography>
-      </Box>
+            <Box
-    </Box>
+                sx={{
-  );
+                    display: "flex",
+                    flexDirection: "column",
+                    width: "100%",
+                    marginTop: "20px",
+                    gap: "30px",
+                    paddingRight: isMobile ? "10px" : undefined,
+                }}
+            >
+                <CustomSlider
+                    value={
+                        currentQuestion.content.chooseRange
+                            ? sliderValue.split("—").length || 0 > 1
+                                ? sliderValue.split("—").map((item) => window.Number(item))
+                                : [min, min + 1]
+                            : window.Number(sliderValue.split("—")[0])
+                    }
+                    min={min}
+                    max={max}
+                    step={currentQuestion.content.step || 1}
+                    onChange={onSliderChange}
+                    onChangeCommitted={onChangeCommitted}
+                    valueLabelFormat={changeValueLabelFormat}
+                    sx={{
+                        color: theme.palette.primary.main,
+                        "& .MuiSlider-valueLabel": {
+                            background: theme.palette.primary.main,
+                        },
+                    }}
+                />
+
+                {!currentQuestion.content.chooseRange && (
+                    <CustomTextField
+                        placeholder="0"
+                        value={reversed ? reversedInputValue : inputValue}
+                        onChange={onInputChange}
+                        sx={{
+                            maxWidth: "80px",
+                            borderColor: theme.palette.text.primary,
+                            "& .MuiInputBase-input": {
+                                textAlign: "center",
+                                backgroundColor: quizThemes[settings.cfg.theme].isLight
+                                    ? "white"
+                                    : theme.palette.background.default,
+                            },
+                        }}
+                    />
+                )}
+
+                {currentQuestion.content.chooseRange && (
+                    <Box
+                        sx={{
+                            display: "flex",
+                            gap: "15px",
+                            alignItems: "center",
+                            "& .MuiFormControl-root": { width: "auto" },
+                        }}
+                    >
+                        <CustomTextField
+                            placeholder="0"
+                            value={reversed ? String(reversedMinRange) : minRange}
+                            onChange={onMinInputChange}
+                            sx={{
+                                maxWidth: "80px",
+                                borderColor: theme.palette.text.primary,
+                                "& .MuiInputBase-input": {
+                                    textAlign: "center",
+                                    backgroundColor: quizThemes[settings.cfg.theme].isLight
+                                        ? "white"
+                                        : theme.palette.background.default,
+                                },
+                            }}
+                        />
+                        <Typography color={theme.palette.text.primary}>до</Typography>
+                        <CustomTextField
+                            placeholder="0"
+                            value={reversed ? String(reversedMaxRange) : maxRange}
+                            onChange={onMaxInputChange}
+                            sx={{
+                                maxWidth: "80px",
+                                borderColor: theme.palette.text.primary,
+                                "& .MuiInputBase-input": {
+                                    textAlign: "center",
+                                    backgroundColor: quizThemes[settings.cfg.theme].isLight
+                                        ? "white"
+                                        : theme.palette.background.default,
+                                },
+                            }}
+                        />
+                    </Box>
+                )}
+            </Box>
+        </Box>
+    );
 };

lib/components/ViewPublicationPage/questions/Rating.tsx

@@ -17,9 +17,9 @@ import TropfyIcon from "@icons/questionsPage/tropfyIcon";
 
 import { sendAnswer } from "@api/quizRelase";
 import { enqueueSnackbar } from "notistack";
-import { useQuizId } from "../../../contexts/QuizIdContext";
 import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
 import type { QuizQuestionRating } from "../../../model/questionTypes/rating";
+import { useQuizData } from "@contexts/QuizDataContext";
 
 type RatingProps = {
     currentQuestion: QuizQuestionRating;
@@ -57,7 +57,7 @@ const buttonRatingForm = [
 ];
 
 export const Rating = ({ currentQuestion }: RatingProps) => {
-    const qid = useQuizId();
+    const quizId = useQuizData();
     const { answers } = useQuizViewStore();
     const theme = useTheme();
     const isMobile = useRootContainerSize() < 650;
@@ -98,7 +98,7 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
                                 await sendAnswer({
                                     questionId: currentQuestion.id,
                                     body: String(value) + " из " + currentQuestion.content.steps,
-                                    qid,
+                                    qid: quizId,
                                 });
 
                                 updateAnswer(currentQuestion.id, String(value), 0);

lib/components/ViewPublicationPage/questions/Select.tsx

@@ -6,8 +6,8 @@ import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView";
 
 import { sendAnswer } from "@api/quizRelase";
 import { enqueueSnackbar } from "notistack";
-import { useQuizId } from "../../../contexts/QuizIdContext";
 import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
+import { useQuizData } from "@contexts/QuizDataContext";
 
 type SelectProps = {
     currentQuestion: QuizQuestionSelect;
@@ -15,7 +15,7 @@ type SelectProps = {
 
 export const Select = ({ currentQuestion }: SelectProps) => {
     const theme = useTheme();
-    const qid = useQuizId();
+    const { quizId } = useQuizData();
     const { answers } = useQuizViewStore();
     const { answer } =
         answers.find(
@@ -46,7 +46,7 @@ export const Select = ({ currentQuestion }: SelectProps) => {
                                 await sendAnswer({
                                     questionId: currentQuestion.id,
                                     body: "",
-                                    qid,
+                                    qid: quizId,
                                 });
 
                             } catch (e) {
@@ -60,7 +60,7 @@ export const Select = ({ currentQuestion }: SelectProps) => {
                             await sendAnswer({
                                 questionId: currentQuestion.id,
                                 body: String(currentQuestion.content.variants[Number(value)].answer),
-                                qid,
+                                qid: quizId,
                             });
 
                             updateAnswer(currentQuestion.id, String(value), 0);

lib/components/ViewPublicationPage/questions/Text.tsx

@@ -7,8 +7,8 @@ import { updateAnswer, useQuizViewStore } from "@stores/quizView";
 import { sendAnswer } from "@api/quizRelase";
 import { enqueueSnackbar } from "notistack";
 import { useDebouncedCallback } from "use-debounce";
-import { useQuizId } from "../../../contexts/QuizIdContext";
 import type { QuizQuestionText } from "../../../model/questionTypes/text";
+import { useQuizData } from "@contexts/QuizDataContext";
 
 type TextProps = {
     currentQuestion: QuizQuestionText;
@@ -16,7 +16,7 @@ type TextProps = {
 
 export const Text = ({ currentQuestion }: TextProps) => {
     const theme = useTheme();
-    const qid = useQuizId();
+    const { quizId } = useQuizData();
     const { answers } = useQuizViewStore();
     const isMobile = useMediaQuery(theme.breakpoints.down(650));
     const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
@@ -27,7 +27,7 @@ export const Text = ({ currentQuestion }: TextProps) => {
             await sendAnswer({
                 questionId: currentQuestion.id,
                 body: text,
-                qid,
+                qid: quizId,
             });
 
 

lib/components/ViewPublicationPage/questions/Variant.tsx

@@ -3,12 +3,12 @@ import {
     Checkbox,
     FormControlLabel,
     FormGroup,
+    TextField as MuiTextField,
     Radio,
     RadioGroup,
-    TextField as MuiTextField,
+    TextFieldProps,
     Typography,
-    useTheme,
+    useTheme
-    TextFieldProps, useMediaQuery,
 } from "@mui/material";
 import { FC, useEffect } from "react";
 
@@ -25,12 +25,12 @@ import RadioIcon from "@ui_kit/RadioIcon";
 
 import { sendAnswer } from "@api/quizRelase";
 
+import { useQuizData } from "@contexts/QuizDataContext";
+import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
 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 { useQuizData } from "@utils/hooks/useQuizData";
-import { useQuizId } from "../../../contexts/QuizIdContext";
 
 const TextField = MuiTextField as unknown as FC<TextFieldProps>;
 
@@ -48,7 +48,7 @@ type VariantItemProps = {
 
 export const Variant = ({ currentQuestion }: VariantProps) => {
     const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down(650));
+    const isMobile = useRootContainerSize() < 650;
     const { answers, ownVariants } = useQuizViewStore();
     const { answer } =
         answers.find(
@@ -139,8 +139,7 @@ const VariantItem = ({
     own = false,
 }: VariantItemProps) => {
     const theme = useTheme();
-    const { settings } = useQuizData();
+    const { settings, quizId } = useQuizData();
-    const qid = useQuizId();
 
     return (
         <FormControlLabel
@@ -187,7 +186,7 @@ const VariantItem = ({
             onClick={async (event) => {
                 event.preventDefault();
                 const variantId = currentQuestion.content.variants[index].id;
-                console.log(answer)
+                console.log(answer);
 
                 if (currentQuestion.content.multi) {
                     const currentAnswer = typeof answer !== "string" ? answer || [] : [];
@@ -198,7 +197,7 @@ const VariantItem = ({
                             body: currentAnswer.includes(variantId)
                                 ? currentAnswer?.filter((item) => item !== variantId)
                                 : [...currentAnswer, variantId],
-                            qid,
+                            qid: quizId,
                         });
 
                         updateAnswer(
@@ -209,7 +208,7 @@ const VariantItem = ({
                             currentQuestion.content.variants[index].points || 0
                         );
                     } catch (e) {
-                        console.log(e)
+                        console.log(e);
                         enqueueSnackbar("ответ не был засчитан");
                     }
 
@@ -220,7 +219,7 @@ const VariantItem = ({
                     await sendAnswer({
                         questionId: currentQuestion.id,
                         body: currentQuestion.content.variants[index].answer,
-                        qid,
+                        qid: quizId,
                     });
 
                     updateAnswer(currentQuestion.id, variantId,
@@ -230,7 +229,7 @@ const VariantItem = ({
                     );
 
                 } catch (e) {
-                    console.log(e)
+                    console.log(e);
                     enqueueSnackbar("ответ не был засчитан");
                 }
 
@@ -240,11 +239,11 @@ const VariantItem = ({
                         await sendAnswer({
                             questionId: currentQuestion.id,
                             body: "",
-                            qid,
+                            qid: quizId,
                         });
 
                     } catch (e) {
-                        console.log(e)
+                        console.log(e);
                         enqueueSnackbar("ответ не был засчитан");
                     }
                     deleteAnswer(currentQuestion.id);

lib/components/ViewPublicationPage/questions/Varimg.tsx

@@ -13,10 +13,9 @@ import RadioIcon from "@ui_kit/RadioIcon";
 
 import { sendAnswer } from "@api/quizRelase";
 import BlankImage from "@icons/BlankImage";
-import { useQuizData } from "@utils/hooks/useQuizData";
+import { useQuizData } from "@contexts/QuizDataContext";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
 import { enqueueSnackbar } from "notistack";
-import { useQuizId } from "../../../contexts/QuizIdContext";
 import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
 import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
 
@@ -25,9 +24,8 @@ type VarimgProps = {
 };
 
 export const Varimg = ({ currentQuestion }: VarimgProps) => {
-    const { settings } = useQuizData();
+    const { settings, quizId } = useQuizData();
     const { answers } = useQuizViewStore();
-    const qid = useQuizId();
     const theme = useTheme();
     const isMobile = useRootContainerSize() < 650;
 
@@ -95,7 +93,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                                         await sendAnswer({
                                             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,
+                                            qid: quizId,
                                         });
 
                                         updateAnswer(
@@ -115,7 +113,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                                             await sendAnswer({
                                                 questionId: currentQuestion.id,
                                                 body: "",
-                                                qid,
+                                                qid: quizId,
                                             });
 
                                         } catch (e) {

lib/contexts/QuizDataContext.ts

@@ -0,0 +1,13 @@
+import { QuizSettings } from "@model/settingsData";
+import { createContext, useContext } from "react";
+
+type QuizData = QuizSettings & { quizId: string; preview: boolean; };
+
+export const QuizDataContext = createContext<QuizData | null>(null);
+
+export const useQuizData = () => {
+    const quizData = useContext(QuizDataContext);
+    if (quizData === null) throw new Error("QuizData context is null");
+
+    return quizData;
+};

lib/contexts/QuizIdContext.ts

@@ -1,11 +0,0 @@
-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;
-};

lib/index.ts

@@ -1,3 +1,5 @@
-import QuizView from "./components/QuizView";
+import QuizAnswerer from "./components/QuizAnswerer";
+import type { QuizSettings } from "@model/settingsData";
 
-export { QuizView };
+export { QuizAnswerer };
+export type { QuizSettings };

lib/ui_kit/ErrorBoundaryFallback.tsx

@@ -1,27 +0,0 @@
-import { Box, Typography } from "@mui/material";
-import { FallbackProps } from "react-error-boundary";
-
-
-export default function ErrorBoundaryFallback({ error }: FallbackProps) {
-    let message = "Что-то пошло не так";
-
-    if (error.message === "No questions found") message = "Нет созданных вопросов";
-    if (error.message === "Quiz already completed") message = "Вы уже прошли этот опрос";
-
-    return (
-        <Box
-            sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                height: "100%",
-            }}
-        >
-            <Typography
-                sx={{
-                    textAlign: "center",
-                }}
-            >{message}</Typography>
-        </Box>
-    );
-}

lib/utils/hooks/useQuestionFlowControl.ts

@@ -2,8 +2,8 @@ import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
 import { setCurrentQuizStep, useQuizViewStore } from "@stores/quizView";
 import { useCallback, useDebugValue, useMemo, useState } from "react";
 import { isResultQuestionEmpty } from "../../components/ViewPublicationPage/tools/checkEmptyData";
-import { useQuizData } from "./useQuizData";
 import moment from "moment";
+import { useQuizData } from "@contexts/QuizDataContext";
 
 
 export function useQuestionFlowControl() {

lib/utils/hooks/useQuizData.ts

@@ -1,40 +0,0 @@
-import { getData } from "@api/quizRelase";
-import { parseQuizData } from "@model/api/getQuizData";
-import { QuizSettings } from "@model/settingsData";
-import useSWR from "swr";
-import { useQuizId } from "../../contexts/QuizIdContext";
-import { replaceSpacesToEmptyLines } from "../../components/ViewPublicationPage/tools/replaceSpacesToEmptyLines";
-
-
-export function useQuizData() {
-    const quizId = useQuizId();
-    const { data } = useSWR(["quizData", quizId], params => getQuizData(params[1]), {
-        suspense: true,
-        revalidateOnFocus: false,
-        revalidateOnMount:false,
-        revalidateOnReconnect: false,
-        refreshWhenOffline: false,
-        refreshWhenHidden: false,
-        refreshInterval: 0
-    });
-
-    return data;
-}
-
-async function getQuizData(quizId: string) {
-    const response = await getData(quizId);
-    const quizDataResponse = response.data;
-
-    if (response.error) {
-        throw new Error(response.error);
-    }
-    if (!quizDataResponse) {
-        throw new Error("Quiz not found");
-    }
-
-    const quizSettings = replaceSpacesToEmptyLines(parseQuizData(quizDataResponse));
-
-    const res = JSON.parse(JSON.stringify({ data: quizSettings }).replaceAll(/\\" \\"/g, '""').replaceAll(/" "/g, '""')).data as QuizSettings;
-    res.recentlyCompleted = response.isRecentlyCompleted;
-    return res;
-} 

src/App.tsx

@@ -1,19 +1,27 @@
+import { getQuizData } from "@api/quizRelase";
+import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
 import { Box } from "@mui/material";
+import LoadingSkeleton from "@ui_kit/LoadingSkeleton";
 import { startTransition, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { QuizIdContext } from "@contexts/QuizIdContext";
+import useSWR from "swr";
-import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
 import QuizAnswerer from "../lib/components/QuizAnswerer";
+import { ApologyPage } from "../lib/components/ViewPublicationPage/ApologyPage";
 
 const defaultQuizId = "0c568ac9-d176-491b-b6cd-5afd31254951"; // branching
 //const defaultQuizId = "9ed8d0e9-d355-4fc1-8b89-4f962e3efc52"; //looooong header
 // const defaultQuizId = "ad7f5a87-b833-4f5b-854e-453706ed655c"; // linear
 
 export default function App() {
-  const quizId = useParams().quizId ?? defaultQuizId;
+    const quizId = useParams().quizId ?? defaultQuizId;
-  const [rootContainerSize, setRootContainerSize] = useState<number>(
+    const [rootContainerSize, setRootContainerSize] = useState<number>(() => window.innerWidth);
-    () => window.innerWidth
+    const { data, error, isLoading } = useSWR(["quizData", quizId], params => getQuizData(params[1]), {
-  );
+        revalidateOnFocus: false,
+        revalidateOnMount: false,
+        revalidateOnReconnect: false,
+        shouldRetryOnError: false,
+        refreshInterval: 0,
+    });
 
   useEffect(() => {
     const handleWindowResize = () => {
@@ -23,22 +31,21 @@ export default function App() {
     };
     window.addEventListener("resize", handleWindowResize);
 
-    return () => {
+        return () => {
-      window.removeEventListener("resize", handleWindowResize);
+            window.removeEventListener("resize", handleWindowResize);
-    };
+        };
-  }, []);
+    }, []);
 
-  return (
+    if (isLoading) return <LoadingSkeleton />;
-    <RootContainerWidthContext.Provider value={rootContainerSize}>
+    if (error || !data) return <ApologyPage error={error} />;
-      <QuizIdContext.Provider value={quizId}>
+
-        <Box
+    return (
-          sx={{
+        <RootContainerWidthContext.Provider value={rootContainerSize}>
-            height: "100dvh",
+            <Box sx={{
-          }}
+                height: "100dvh",
-        >
+            }}>
-          <QuizAnswerer />
+                <QuizAnswerer quizSettings={data} quizId={quizId} />
-        </Box>
+            </Box>
-      </QuizIdContext.Provider>
+        </RootContainerWidthContext.Provider>
-    </RootContainerWidthContext.Provider>
+    );
-  );
 }

src/WidgetApp.tsx

@@ -1,17 +1,27 @@
-import { Box } from "@mui/material";
+import { getQuizData } from "@api/quizRelase";
-import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { QuizIdContext } from "@contexts/QuizIdContext";
 import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
-import QuizAnswerer from "./QuizAnswerer";
+import { Box } from "@mui/material";
+import LoadingSkeleton from "@ui_kit/LoadingSkeleton";
+import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react";
+import useSWR from "swr";
+import QuizAnswerer from "../lib/components/QuizAnswerer";
+import { ApologyPage } from "../lib/components/ViewPublicationPage/ApologyPage";
 
 
 interface Props {
     quizId: string;
 }
 
-export default function QuizView({ quizId }: Props) {
+export default function WidgetApp({ quizId }: Props) {
     const [rootContainerSize, setRootContainerSize] = useState<number>(() => window.innerWidth);
     const rootContainerRef = useRef<HTMLDivElement>(null);
+    const { data, error, isLoading } = useSWR(["quizData", quizId], params => getQuizData(params[1]), {
+        revalidateOnFocus: false,
+        revalidateOnMount: false,
+        revalidateOnReconnect: false,
+        shouldRetryOnError: false,
+        refreshInterval: 0,
+    });
 
     useLayoutEffect(() => {
         if (rootContainerRef.current) setRootContainerSize(rootContainerRef.current.clientWidth);
@@ -30,19 +40,20 @@ export default function QuizView({ quizId }: Props) {
         };
     }, []);
 
+    if (isLoading) return <LoadingSkeleton />;
+    if (error || !data) return <ApologyPage error={error} />;
+
     return (
         <RootContainerWidthContext.Provider value={rootContainerSize}>
-            <QuizIdContext.Provider value={quizId}>
+            <Box
-                <Box
+                ref={rootContainerRef}
-                    ref={rootContainerRef}
+                sx={{
-                    sx={{
+                    width: "100%",
-                        width: "100%",
+                    height: "100%",
-                        height: "100%",
+                }}
-                    }}
+            >
-                >
+                <QuizAnswerer quizSettings={data} quizId={quizId} />
-                    <QuizAnswerer />
+            </Box>
-                </Box>
-            </QuizIdContext.Provider>
         </RootContainerWidthContext.Provider>
     );
 }

src/widget.tsx

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