fix quiz data datafetching

fix headers
2024-04-02 16:09:13 +03:00 · 2024-04-02 16:09:13 +03:00 · 6034fa5168
commit 6034fa5168
parent 60757e0906
7 changed files with 163 additions and 202 deletions
--- a/lib/api/quizRelase.ts
+++ b/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
-if (userAgent.toLowerCase().includes("linux")) {OSDevice = "Linux"}
-if (userAgent.toLowerCase().includes("windows")) {OSDevice = "Windows"}
-if (/iPad|iPhone|iPod/.test(userAgent)){OSDevice = "IOS"}
-if (userAgent.toLowerCase().includes("macintosh")) {OSDevice = "Mac OS"}
-if (OSDevice === undefined) {OSDevice = userAgent}
+let OSDevice: string | undefined;
+if (userAgent.toLowerCase().includes("linux")) { OSDevice = "Linux"; }
+if (userAgent.toLowerCase().includes("windows")) { OSDevice = "Windows"; }
+if (/iPad|iPhone|iPod/.test(userAgent)) { OSDevice = "IOS"; }
+if (userAgent.toLowerCase().includes("macintosh")) { OSDevice = "Mac OS"; }
+if (OSDevice === undefined) { OSDevice = userAgent; }

 //браузер
-let browserUser:string
-if(Bowser.name === "Chrome") {
-    browserUser = "Chrome"
-} else if(Bowser.name === "Firefox") {
-    browserUser = "Firefox"
-}else if(Bowser.name === "Safari") {
-    browserUser = "Safari"
-}else{browserUser = userAgent}
+let browserUser: string;
+if (Bowser.name === "Chrome") {
+    browserUser = "Chrome";
+} else if (Bowser.name === "Firefox") {
+    browserUser = "Firefox";
+} else if (Bowser.name === "Safari") {
+    browserUser = "Safari";
+} else { browserUser = userAgent; }

-const DeviceType = device.type
+const DeviceType = device.type;

-let Device = md.mobile()
-if (Device === null) {Device = userAgent}
+let Device = md.mobile();
+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,
-             "Device" : Device,
-             "OS": OSDevice,
-             "Browser" : browserUser
+            //  "DeviceType" : DeviceType,
+            //  "Device" : Device,
+            //  "OS": OSDevice,
+            //  "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)
--- a/lib/components/QuizAnswerer.tsx
+++ b/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
--- a/lib/components/ViewPublicationPage/ViewPublicationPage.tsx
+++ b/lib/components/ViewPublicationPage/ViewPublicationPage.tsx
@ -1,115 +1,109 @@
-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 { sendAnswer } from "@api/quizRelase";
-import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
+import PrevButton from "./tools/PrevButton";

 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,
-    isNextButtonEnabled,
-    isPreviousButtonEnabled,
-    moveToPrevQuestion,
-    moveToNextQuestion,
-    showResultAfterContactForm,
-  } = useQuestionFlowControl();
+    const { settings, recentlyCompleted, quizId, preview } = useQuizData();
+    const { answers } = useQuizViewStore();
+    let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep);
+    const {
+        currentQuestion,
+        currentQuestionStepNumber,
+        isNextButtonEnabled,
+        isPreviousButtonEnabled,
+        moveToPrevQuestion,
+        moveToNextQuestion,
+        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);
+    useEffect(
+        function setFaviconAndTitle() {
+            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]
+    );
+
+    if (recentlyCompleted) throw new Error("Quiz already completed");
+    if (currentQuizStep === "startpage" && settings.cfg.noStartPage)
+        currentQuizStep = "question";
+
+    let quizStepElement: ReactElement;
+    switch (currentQuizStep) {
+        case "startpage": {
+            quizStepElement = <StartPageViewPublication />;
+            break;
        }
+        case "question": {
+            if (currentQuestion.type === "result") {
+                quizStepElement = <ResultForm resultQuestion={currentQuestion} />;
+                break;
+            }

-        document.title = settings.name;
-      }
-
-    },
-    [settings]
-  );
-
-  if (recentlyCompleted) throw new Error("Quiz already completed");
-  if (currentQuizStep === "startpage" && settings.cfg.noStartPage)
-    currentQuizStep = "question";
-
-  let quizStepElement: ReactElement;
-  switch (currentQuizStep) {
-    case "startpage": {
-      quizStepElement = <StartPageViewPublication />;
-      break;
+            quizStepElement = (
+                <Question
+                    currentQuestion={currentQuestion}
+                    currentQuestionStepNumber={currentQuestionStepNumber}
+                    prevButton={<PrevButton isPreviousButtonEnabled={isPreviousButtonEnabled} moveToPrevQuestion={moveToPrevQuestion} />}
+                    nextButton={
+                        <NextButton
+                            isNextButtonEnabled={isNextButtonEnabled}
+                            moveToNextQuestion={async () => {
+                                if (!isAnswer) {
+                                    try {
+                                        await sendAnswer({
+                                            questionId: currentQuestion.id,
+                                            body: "",
+                                            qid: quizId,
+                                            preview
+                                        });
+                                    } catch (e) {
+                                        enqueueSnackbar("ответ не был засчитан");
+                                    }
+                                }
+                                moveToNextQuestion();
+                            }}
+                        />}
+                />
+            );
+            break;
+        }
+        case "contactform": {
+            quizStepElement = (
+                <ContactForm
+                    currentQuestion={currentQuestion}
+                    onShowResult={showResultAfterContactForm}
+                />
+            );
+            break;
+        }
+        default:
+            notReachable(currentQuizStep);
    }
-    case "question": {
-      if (currentQuestion.type === "result") {
-        quizStepElement = <ResultForm resultQuestion={currentQuestion} />;
-        break;
-      }

-      quizStepElement = (
-        <Question
-          currentQuestion={currentQuestion}
-          currentQuestionStepNumber={currentQuestionStepNumber}
-          prevButton={<PrevButton isPreviousButtonEnabled={isPreviousButtonEnabled} moveToPrevQuestion={moveToPrevQuestion} />}
-          nextButton={
-            <NextButton
-              isNextButtonEnabled={isNextButtonEnabled}
-              moveToNextQuestion={async () => {
-                if (!isAnswer) {
-                  try {
-                    await sendAnswer({
-                      questionId: currentQuestion.id,
-                      body: "",
-                      qid: quizId,
-                      preview
-                    });
-                  } catch (e) {
-                    enqueueSnackbar("ответ не был засчитан");
-                  }
-                }
-                moveToNextQuestion()
-              }}
-            />}
-        />
-      );
-      break;
-    }
-    case "contactform": {
-      quizStepElement = (
-        <ContactForm
-          currentQuestion={currentQuestion}
-          onShowResult={showResultAfterContactForm}
-        />
-      );
-      break;
-    }
-    default:
-      notReachable(currentQuizStep);
-  }
-
-  return (
-    <ThemeProvider
-      theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}
-    >
-      {quizStepElement}
-    </ThemeProvider>
-  );
+    return (
+        <ThemeProvider
+            theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}
+        >
+            {quizStepElement}
+        </ThemeProvider>
+    );
 }
--- a/lib/contexts/QuizDataContext.ts
+++ b/lib/contexts/QuizDataContext.ts
@ -1,19 +1,13 @@
 import { QuizSettings } from "@model/settingsData";
 import { createContext, useContext } from "react";

-type QuizSettingsFull = QuizSettings | {};
-type QuizData = QuizSettingsFull & { quizId: string; preview: boolean; };
-type QuizDataClean = QuizSettings & { quizId: string; preview: boolean; };
+type QuizData = QuizSettings & { quizId: string; preview: boolean; };

 export const QuizDataContext = createContext<QuizData | null>(null);

-export const useQuizData = ():QuizDataClean => {
+export const useQuizData = () => {
    const quizData = useContext(QuizDataContext);
-    if (
-        quizData === null ||
-        !("settings" in quizData) ||
-        !("recentlyCompleted" in quizData)
-        ) throw new Error("QuizData context is null");
+    if (quizData === null) throw new Error("QuizData context is null");

    return quizData;
 };
--- a/package.json
+++ b/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",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,39 +1,21 @@
-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
 // const defaultQuizId = "ad7f5a87-b833-4f5b-854e-453706ed655c"; // linear

 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,
-    }
-  );
+    const quizId = useParams().quizId ?? defaultQuizId;

-  if (isLoading) return <LoadingSkeleton />;
-  if (error) return <ApologyPage error={error} />;
-  if (!data) throw new Error("Quiz data is null");
-
-  return (
-    <Box
-      sx={{
-        height: "100dvh",
-      }}
-    >
-      <QuizAnswerer quizSettings={data} quizId={quizId} />
-    </Box>
-  );
+    return (
+        <Box
+            sx={{
+                height: "100dvh",
+            }}
+        >
+            <QuizAnswerer quizId={quizId} />
+        </Box>
+    );
 }
--- a/src/WidgetApp.tsx
+++ b/src/WidgetApp.tsx
@ -1,30 +1,13 @@
-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 {
-    quizId: string;
-}
-
-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
-            quizSettings={data}
-            quizId={quizId}
-        />
-    );
-}
+import QuizAnswerer from "../lib/components/QuizAnswerer";
+
+
+interface Props {
+    quizId: string;
+}
+
+export default function WidgetApp({ quizId }: Props) {
+
+    return (
+        <QuizAnswerer quizId={quizId} />
+    );
+}