fix quiz data datafetching

fix headers

lib/api/quizRelase.ts

@@ -7,34 +7,35 @@ import type { AxiosError } from "axios";
 import { replaceSpacesToEmptyLines } from "../components/ViewPublicationPage/tools/replaceSpacesToEmptyLines";
 import { QuizSettings } from "@model/settingsData";
 import * as Bowser from "bowser";
+import useSWR from "swr";
 let SESSIONS = "";
 
 const domain = location.hostname === "hbpn.link" ? "" : "https://s.hbpn.link";
 
 const md = new MobileDetect(window.navigator.userAgent);
-const userAgent = navigator.userAgent
+const userAgent = navigator.userAgent;
 //операционная система
-let OSDevice:string | undefined
+let OSDevice: string | undefined;
-if (userAgent.toLowerCase().includes("linux")) {OSDevice = "Linux"}
+if (userAgent.toLowerCase().includes("linux")) { OSDevice = "Linux"; }
-if (userAgent.toLowerCase().includes("windows")) {OSDevice = "Windows"}
+if (userAgent.toLowerCase().includes("windows")) { OSDevice = "Windows"; }
-if (/iPad|iPhone|iPod/.test(userAgent)){OSDevice = "IOS"}
+if (/iPad|iPhone|iPod/.test(userAgent)) { OSDevice = "IOS"; }
-if (userAgent.toLowerCase().includes("macintosh")) {OSDevice = "Mac OS"}
+if (userAgent.toLowerCase().includes("macintosh")) { OSDevice = "Mac OS"; }
-if (OSDevice === undefined) {OSDevice = userAgent}
+if (OSDevice === undefined) { OSDevice = userAgent; }
 
 //браузер
-let browserUser:string
+let browserUser: string;
 if (Bowser.name === "Chrome") {
-    browserUser = "Chrome"
+    browserUser = "Chrome";
 } else if (Bowser.name === "Firefox") {
-    browserUser = "Firefox"
+    browserUser = "Firefox";
 } else if (Bowser.name === "Safari") {
-    browserUser = "Safari"
+    browserUser = "Safari";
-}else{browserUser = userAgent}
+} else { browserUser = userAgent; }
 
-const DeviceType = device.type
+const DeviceType = device.type;
 
-let Device = md.mobile()
+let Device = md.mobile();
-if (Device === null) {Device = userAgent}
+if (Device === null) { Device = userAgent; }
 
 export const publicationMakeRequest = ({ url, body }: any) => {
     return axios(url, {
@@ -42,10 +43,10 @@ export const publicationMakeRequest = ({ url, body }: any) => {
         headers: {
             "X-Sessionkey": SESSIONS,
             "Content-Type": "multipart/form-data",
-             "DeviceType" : DeviceType,
+            //  "DeviceType" : DeviceType,
-             "Device" : Device,
+            //  "Device" : Device,
-             "OS": OSDevice,
+            //  "OS": OSDevice,
-             "Browser" : browserUser
+            //  "Browser" : browserUser
         },
         method: "POST",
     });
@@ -115,7 +116,7 @@ export async function getQuizData(quizId: string) {
 }
 
 export function sendAnswer({ questionId, body, qid, preview }: any) {
-    if (preview) return
+    if (preview) return;
     const formData = new FormData();
 
     const answers = [
@@ -137,7 +138,7 @@ export function sendAnswer({ questionId, body, qid, preview }: any) {
 
 //body ={file, filename}
 export function sendFile({ questionId, body, qid, preview }: any) {
-    if (preview) return
+    if (preview) return;
     const formData = new FormData();
 
     const answers: any = [
@@ -161,7 +162,7 @@ export function sendFile({ questionId, body, qid, preview }: any) {
 
 //форма контактов
 export function sendFC({ questionId, body, qid, preview }: any) {
-    if (preview) return
+    if (preview) return;
     const formData = new FormData();
 
     // const keysBody = Object.keys(body)

lib/components/QuizAnswerer.tsx

@@ -1,4 +1,7 @@
+import { getQuizData } from "@/api/quizRelase";
+import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
 import { QuizDataContext } from "@contexts/QuizDataContext";
+import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
 import { QuizSettings } from "@model/settingsData";
 import { Box, CssBaseline, ThemeProvider } from "@mui/material";
 import { LocalizationProvider } from "@mui/x-date-pickers";
@@ -8,38 +11,37 @@ import { handleComponentError } from "@utils/handleComponentError";
 import lightTheme from "@utils/themes/light";
 import moment from "moment";
 import { SnackbarProvider } from 'notistack';
+import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
+import useSWR from "swr";
 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);
+    const { data, error, isLoading } = useSWR(quizSettings ? null : ["quizData", quizId], params => getQuizData(params[1]), {
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+        shouldRetryOnError: false,
+        refreshInterval: 0,
+    });
 
     useLayoutEffect(() => {
         if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth);
     }, []);
 
     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);
@@ -52,10 +54,15 @@ export default function QuizAnswerer({ quizSettings = {}, quizId, preview = fals
         };
     }, []);
 
-    if (Object.values(quizData).length === 0) return <LoadingSkeleton />;
+    if (isLoading) return <LoadingSkeleton />;
+    if (error) return <ApologyPage error={error} />;
+
+    quizSettings ??= data;
+    if (!quizSettings) throw new Error("Quiz data is null");
+
     return (
         <RootContainerWidthContext.Provider value={rootContainerWidth}>
-            <QuizDataContext.Provider value={{ ...quizData, quizId, preview }}>
+            <QuizDataContext.Provider value={{ ...quizSettings, quizId, preview }}>
                 <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="ru" localeText={localeText}>
                     <ThemeProvider theme={lightTheme}>
                         <SnackbarProvider

lib/components/ViewPublicationPage/ViewPublicationPage.tsx

@@ -1,26 +1,23 @@
-import { Button, ThemeProvider, useTheme } from "@mui/material";
+import { sendAnswer } from "@api/quizRelase";
+import { useQuizData } from "@contexts/QuizDataContext";
+import { ThemeProvider } from "@mui/material";
 import { useQuizViewStore } from "@stores/quizView";
 import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
-import { useQuizData } from "@contexts/QuizDataContext";
 import { notReachable } from "@utils/notReachable";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
+import { enqueueSnackbar } from "notistack";
 import { ReactElement, useEffect } from "react";
-import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
 import { ContactForm } from "./ContactForm";
 import { Question } from "./Question";
 import { ResultForm } from "./ResultForm";
 import { StartPageViewPublication } from "./StartPageViewPublication";
-import PrevButton from "./tools/PrevButton";
 import NextButton from "./tools/NextButton";
-import { enqueueSnackbar } from "notistack";
+import PrevButton from "./tools/PrevButton";
-import { sendAnswer } from "@api/quizRelase";
-import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
 
 export default function ViewPublicationPage() {
     const { settings, recentlyCompleted, quizId, preview } = useQuizData();
     const { answers } = useQuizViewStore();
     let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep);
-  const isMobileMini = useRootContainerSize() < 382;
     const {
         currentQuestion,
         currentQuestionStepNumber,
@@ -31,19 +28,16 @@ export default function ViewPublicationPage() {
         showResultAfterContactForm,
     } = useQuestionFlowControl();
 
-  const isAnswer = answers.some(ans => ans.questionId === currentQuestion.id)
+    const isAnswer = answers.some(ans => ans.questionId === currentQuestion.id);
 
     useEffect(
         function setFaviconAndTitle() {
-      if (settings.cfg !== undefined) {
             const link = document.querySelector('link[rel="icon"]');
             if (link && settings.cfg.startpage.favIcon) {
                 link.setAttribute("href", settings.cfg.startpage.favIcon);
             }
 
             document.title = settings.name;
-      }
-
         },
         [settings]
     );
@@ -85,7 +79,7 @@ export default function ViewPublicationPage() {
                                         enqueueSnackbar("ответ не был засчитан");
                                     }
                                 }
-                moveToNextQuestion()
+                                moveToNextQuestion();
                             }}
                         />}
                 />

lib/contexts/QuizDataContext.ts

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

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@frontend/squzanswerer",
-    "version": "1.0.10",
+    "version": "1.0.11",
     "type": "module",
     "main": "./dist-package/index.js",
     "module": "./dist-package/index.js",

src/App.tsx

@@ -1,10 +1,6 @@
-import { getQuizData } from "@api/quizRelase";
 import { Box } from "@mui/material";
-import LoadingSkeleton from "@ui_kit/LoadingSkeleton";
 import { useParams } from "react-router-dom";
-import useSWR from "swr";
 import QuizAnswerer from "../lib/components/QuizAnswerer";
-import { ApologyPage } from "../lib/components/ViewPublicationPage/ApologyPage";
 
 // const defaultQuizId = "45ef7f9c-784d-4e58-badb-f6b337f08ba0"; // branching
 const defaultQuizId = "0c568ac9-d176-491b-b6cd-5afd31254951"; //looooong header
@@ -12,20 +8,6 @@ const defaultQuizId = "0c568ac9-d176-491b-b6cd-5afd31254951"; //looooong header
 
 export default function App() {
     const quizId = useParams().quizId ?? defaultQuizId;
-  const { data, error, isLoading } = useSWR(
-    ["quizData", quizId],
-    (params) => getQuizData(params[1]),
-    {
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-      shouldRetryOnError: false,
-      refreshInterval: 0,
-    }
-  );
-
-  if (isLoading) return <LoadingSkeleton />;
-  if (error) return <ApologyPage error={error} />;
-  if (!data) throw new Error("Quiz data is null");
 
     return (
         <Box
@@ -33,7 +15,7 @@ export default function App() {
                 height: "100dvh",
             }}
         >
-      <QuizAnswerer quizSettings={data} quizId={quizId} />
+            <QuizAnswerer quizId={quizId} />
         </Box>
     );
 }

src/WidgetApp.tsx

@@ -1,8 +1,4 @@
-import { getQuizData } from "@api/quizRelase";
-import LoadingSkeleton from "@ui_kit/LoadingSkeleton";
-import useSWR from "swr";
 import QuizAnswerer from "../lib/components/QuizAnswerer";
-import { ApologyPage } from "../lib/components/ViewPublicationPage/ApologyPage";
 
 
 interface Props {
@@ -10,21 +6,8 @@ interface Props {
 }
 
 export default function WidgetApp({ quizId }: Props) {
-    const { data, error, isLoading } = useSWR(["quizData", quizId], params => getQuizData(params[1]), {
-        revalidateOnFocus: false,
-        revalidateOnReconnect: false,
-        shouldRetryOnError: false,
-        refreshInterval: 0,
-    });
-
-    if (isLoading) return <LoadingSkeleton />;
-    if (error) return <ApologyPage error={error} />;
-    if (!data) throw new Error("Quiz data is null");
 
     return (
-        <QuizAnswerer
+        <QuizAnswerer quizId={quizId} />
-            quizSettings={data}
-            quizId={quizId}
-        />
     );
 }