получение данных если их не передали

lib/components/QuizAnswerer.tsx

@@ -13,19 +13,22 @@ import { ApologyPage } from "./ViewPublicationPage/ApologyPage";
 import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage";
 import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
 import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { getQuizData } from "@/api/quizRelase";
+import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
 
 
 moment.locale("ru");
 const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
 
 type Props = {
-    quizSettings: QuizSettings;
+    quizSettings?: QuizSettings | {};
     quizId: string;
     preview?: boolean;
 };
 
-export default function QuizAnswerer({ quizSettings, quizId, preview = false }: Props) {
+export default function QuizAnswerer({ quizSettings = {}, quizId, preview = false }: Props) {
     const [rootContainerWidth, setRootContainerWidth] = useState<number>(() => window.innerWidth);
+    const [quizData, setQuizData] = useState<QuizSettings | {}>(quizSettings);
     const rootContainerRef = useRef<HTMLDivElement>(null);
 
     useLayoutEffect(() => {
@@ -33,6 +36,10 @@ export default function QuizAnswerer({ quizSettings, quizId, preview = false }:
     }, []);
 
     useEffect(() => {
+        if (Object.values(quizSettings).length === 0) {
+            const data = (async()=>await getQuizData(quizId))()
+            setQuizData(data)
+        }
         const handleWindowResize = () => {
             startTransition(() => {
                 if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth);
@@ -45,9 +52,10 @@ export default function QuizAnswerer({ quizSettings, quizId, preview = false }:
         };
     }, []);
 
+    if (Object.values(quizData).length === 0) return <LoadingSkeleton />;
     return (
         <RootContainerWidthContext.Provider value={rootContainerWidth}>
-            <QuizDataContext.Provider value={{ ...quizSettings, quizId, preview }}>
+            <QuizDataContext.Provider value={{ ...quizData, quizId, preview }}>
                 <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="ru" localeText={localeText}>
                     <ThemeProvider theme={lightTheme}>
                         <SnackbarProvider

lib/components/ViewPublicationPage/ViewPublicationPage.tsx

@@ -1,4 +1,4 @@
-import {Button, ThemeProvider, useTheme} from "@mui/material";
+import { Button, ThemeProvider, useTheme } from "@mui/material";
 import { useQuizViewStore } from "@stores/quizView";
 import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
 import { useQuizData } from "@contexts/QuizDataContext";
@@ -12,8 +12,9 @@ import { ResultForm } from "./ResultForm";
 import { StartPageViewPublication } from "./StartPageViewPublication";
 import PrevButton from "./tools/PrevButton";
 import NextButton from "./tools/NextButton";
-import {enqueueSnackbar} from "notistack";
+import { enqueueSnackbar } from "notistack";
 import { sendAnswer } from "@api/quizRelase";
+import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
 
 export default function ViewPublicationPage() {
   const { settings, recentlyCompleted, quizId } = useQuizData();
@@ -31,15 +32,18 @@ export default function ViewPublicationPage() {
   } = useQuestionFlowControl();
 
   const isAnswer = answers.some(ans => ans.questionId === currentQuestion.id)
-  
+
   useEffect(
     function setFaviconAndTitle() {
-      const link = document.querySelector('link[rel="icon"]');
+      if (settings.cfg !== undefined) {
-      if (link && settings.cfg.startpage.favIcon) {
+        const link = document.querySelector('link[rel="icon"]');
-        link.setAttribute("href", settings.cfg.startpage.favIcon);
+        if (link && settings.cfg.startpage.favIcon) {
+          link.setAttribute("href", settings.cfg.startpage.favIcon);
+        }
+
+        document.title = settings.name;
       }
 
-      document.title = settings.name;
     },
     [settings]
   );
@@ -64,24 +68,24 @@ export default function ViewPublicationPage() {
         <Question
           currentQuestion={currentQuestion}
           currentQuestionStepNumber={currentQuestionStepNumber}
-          prevButton={ <PrevButton isPreviousButtonEnabled={isPreviousButtonEnabled} moveToPrevQuestion={moveToPrevQuestion}/>}
+          prevButton={<PrevButton isPreviousButtonEnabled={isPreviousButtonEnabled} moveToPrevQuestion={moveToPrevQuestion} />}
           nextButton={
             <NextButton
-                isNextButtonEnabled={isNextButtonEnabled}
+              isNextButtonEnabled={isNextButtonEnabled}
-                moveToNextQuestion={async () => {
+              moveToNextQuestion={async () => {
-                  if (!isAnswer) {
+                if (!isAnswer) {
-                    try {
+                  try {
-                      await sendAnswer({
+                    await sendAnswer({
-                        questionId: currentQuestion.id,
+                      questionId: currentQuestion.id,
-                        body: "",
+                      body: "",
-                        qid: quizId,
+                      qid: quizId,
-                      });
+                    });
-                    } catch (e) {
+                  } catch (e) {
-                      enqueueSnackbar("ответ не был засчитан");
+                    enqueueSnackbar("ответ не был засчитан");
-                    }
                   }
-                  moveToNextQuestion()
+                }
-                }}
+                moveToNextQuestion()
+              }}
             />}
         />
       );

lib/contexts/QuizDataContext.ts

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