feat: decompose

lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx

@@ -0,0 +1,72 @@
+import { Box } from "@mui/material";
+
+type StartPageMobileProps = {
+  quizHeaderBlock: JSX.Element;
+  quizMainBlock: JSX.Element;
+  backgroundBlock: JSX.Element | null;
+  startpageType: "standard" | "expanded" | "centered";
+};
+
+export const StartPageMobile = ({
+  quizHeaderBlock,
+  quizMainBlock,
+  backgroundBlock,
+  startpageType,
+}: StartPageMobileProps) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column-reverse",
+        flexGrow: 1,
+        justifyContent: "flex-end",
+        minHeight: "100vh",
+        height: "100%",
+        "&::-webkit-scrollbar": { width: 0 },
+      }}
+    >
+      <Box
+        sx={{
+          width: "100%",
+          display: "flex",
+          flexGrow: 1,
+          flexDirection: "column",
+          justifyContent: "space-between",
+          alignItems: "flex-start",
+          p: "25px",
+          height: "100%",
+          overflowY: "auto",
+          overflowX: "hidden",
+          "&::-webkit-scrollbar": {
+            width: "4px",
+          },
+          "&::-webkit-scrollbar-thumb": {
+            backgroundColor: "#b8babf",
+          },
+        }}
+      >
+        {quizHeaderBlock}
+        <Box
+          sx={{
+            height: "80%",
+            display: "flex",
+            flexGrow: 1,
+            flexDirection: "column",
+            justifyContent: "space-between",
+            width: "100%",
+          }}
+        >
+          {quizMainBlock}
+        </Box>
+      </Box>
+      <Box
+        sx={{
+          width: "100%",
+          overflow: "hidden",
+        }}
+      >
+        {backgroundBlock}
+      </Box>
+    </Box>
+  );
+};

lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx

@@ -7,16 +7,17 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
-import { useUADevice } from "../../utils/hooks/useUADevice";
-import { notReachable } from "../../utils/notReachable";
-import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
+import { useUADevice } from "../../../utils/hooks/useUADevice";
+import { notReachable } from "../../../utils/notReachable";
+import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";
 
 import { NameplateLogo } from "@icons/NameplateLogo";
 import { QuizStartpageAlignType, QuizStartpageType } from "@model/settingsData";
 import { useQuizData } from "@contexts/QuizDataContext";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
-import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
+import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
 import { setCurrentQuizStep } from "@stores/quizView";
+import { StartPageMobile } from "./StartPageMobile";
 
 import PenaLogo from "@icons/PenaLogo.png";
 
@@ -30,7 +31,6 @@ export const StartPageViewPublication = () => {
   const handleCopyNumber = () => {
     navigator.clipboard.writeText(settings.cfg.info.phonenumber);
   };
-  console.log(settings.cfg.startpage.background.type);
 
   const background =
     settings.cfg.startpage.background.type === "image" ? (
@@ -84,7 +84,7 @@ export const StartPageViewPublication = () => {
         minHeight: "100vh",
         width: "100%",
         background:
-          settings.cfg.startpageType === "expanded" && !isMobile
+          settings.cfg.startpageType === "expanded"
             ? settings.cfg.startpage.position === "left"
               ? "linear-gradient(90deg,#272626,transparent)"
               : settings.cfg.startpage.position === "center"
@@ -359,65 +359,6 @@ function QuizPreviewLayoutByType({
   const isTablet = useRootContainerSize() < 1100;
   const isMobile = useRootContainerSize() < 700;
 
-  function StartPageMobile() {
-    return (
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "column-reverse",
-          flexGrow: 1,
-          justifyContent: "flex-end",
-          minHeight: "100vh",
-          height: "100%",
-          "&::-webkit-scrollbar": { width: 0 },
-        }}
-      >
-        <Box
-          sx={{
-            width: "100%",
-            display: "flex",
-            flexGrow: 1,
-            flexDirection: "column",
-            justifyContent: "space-between",
-            alignItems: "flex-start",
-            p: "25px",
-            height: "100%",
-            overflowY: "auto",
-            overflowX: "hidden",
-            "&::-webkit-scrollbar": {
-              width: "4px",
-            },
-            "&::-webkit-scrollbar-thumb": {
-              backgroundColor: "#b8babf",
-            },
-          }}
-        >
-          {quizHeaderBlock}
-          <Box
-            sx={{
-              height: "80%",
-              display: "flex",
-              flexGrow: 1,
-              flexDirection: "column",
-              justifyContent: "space-between",
-              width: "100%",
-            }}
-          >
-            {quizMainBlock}
-          </Box>
-        </Box>
-        <Box
-          sx={{
-            width: "100%",
-            overflow: "hidden",
-          }}
-        >
-          {backgroundBlock}
-        </Box>
-      </Box>
-    );
-  }
-
   switch (startpageType) {
     case null:
     case "standard": {
@@ -475,7 +416,7 @@ function QuizPreviewLayoutByType({
       return (
         <>
           {isMobile ? (
-            <StartPageMobile />
+            <StartPageMobile backgroundBlock={backgroundBlock} />
           ) : (
             <Box>
               <Box
@@ -562,12 +503,3 @@ function QuizPreviewLayoutByType({
       notReachable(startpageType);
   }
 }
-
-const startpageAlignTypeToJustifyContent: Record<
-  QuizStartpageAlignType,
-  "start" | "center" | "end"
-> = {
-  left: "start",
-  center: "center",
-  right: "end",
-};

lib/components/ViewPublicationPage/ViewPublicationPage.tsx

@@ -11,88 +11,94 @@ import { Question } from "./Question";
 import { ResultForm } from "./ResultForm";
 import { StartPageViewPublication } from "./StartPageViewPublication";
 
-
 export default function ViewPublicationPage() {
-    const { settings, recentlyCompleted } = useQuizData();
-    let currentQuizStep = useQuizViewStore(state => state.currentQuizStep);
-    const isMobileMini = useRootContainerSize() < 382;
-    const {
-        currentQuestion,
-        currentQuestionStepNumber,
-        isNextButtonEnabled,
-        isPreviousButtonEnabled,
-        moveToPrevQuestion,
-        moveToNextQuestion,
-        showResultAfterContactForm,
-    } = useQuestionFlowControl();
+  const { settings, recentlyCompleted } = useQuizData();
+  let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep);
+  const isMobileMini = useRootContainerSize() < 382;
+  const {
+    currentQuestion,
+    currentQuestionStepNumber,
+    isNextButtonEnabled,
+    isPreviousButtonEnabled,
+    moveToPrevQuestion,
+    moveToNextQuestion,
+    showResultAfterContactForm,
+  } = useQuestionFlowControl();
 
-    useEffect(function setFaviconAndTitle() {
-        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]);
+      document.title = settings.name;
+    },
+    [settings]
+  );
 
-    if (recentlyCompleted) throw new Error("Quiz already completed");
-    if (currentQuizStep === "startpage" && settings.cfg.noStartPage) currentQuizStep = "question";
+  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;
-            }
-
-            quizStepElement = (
-                <Question
-                    currentQuestion={currentQuestion}
-                    currentQuestionStepNumber={currentQuestionStepNumber}
-                    prevButton={
-                        <Button
-                            disabled={!isPreviousButtonEnabled}
-                            variant="contained"
-                            sx={{ fontSize: "16px", padding: "10px 15px" }}
-                            onClick={moveToPrevQuestion}
-                        >
-                            {isMobileMini ? "←" : "← Назад"}
-                        </Button>
-                    }
-                    nextButton={
-                        <Button
-                            disabled={!isNextButtonEnabled}
-                            variant="contained"
-                            sx={{ fontSize: "16px", padding: "10px 15px" }}
-                            onClick={moveToNextQuestion}
-                        >
-                            Далее →
-                        </Button>
-                    }
-                />
-            );
-            break;
-        }
-        case "contactform": {
-            quizStepElement = (
-                <ContactForm
-                    currentQuestion={currentQuestion}
-                    onShowResult={showResultAfterContactForm}
-                />
-            );
-            break;
-        }
-        default: notReachable(currentQuizStep);
+  let quizStepElement: ReactElement;
+  switch (currentQuizStep) {
+    case "startpage": {
+      quizStepElement = <StartPageViewPublication />;
+      break;
     }
+    case "question": {
+      if (currentQuestion.type === "result") {
+        quizStepElement = <ResultForm resultQuestion={currentQuestion} />;
+        break;
+      }
 
-    return (
-        <ThemeProvider theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}>
-            {quizStepElement}
-        </ThemeProvider>
-    );
+      quizStepElement = (
+        <Question
+          currentQuestion={currentQuestion}
+          currentQuestionStepNumber={currentQuestionStepNumber}
+          prevButton={
+            <Button
+              disabled={!isPreviousButtonEnabled}
+              variant="contained"
+              sx={{ fontSize: "16px", padding: "10px 15px" }}
+              onClick={moveToPrevQuestion}
+            >
+              {isMobileMini ? "←" : "← Назад"}
+            </Button>
+          }
+          nextButton={
+            <Button
+              disabled={!isNextButtonEnabled}
+              variant="contained"
+              sx={{ fontSize: "16px", padding: "10px 15px" }}
+              onClick={moveToNextQuestion}
+            >
+              Далее →
+            </Button>
+          }
+        />
+      );
+      break;
+    }
+    case "contactform": {
+      quizStepElement = (
+        <ContactForm
+          currentQuestion={currentQuestion}
+          onShowResult={showResultAfterContactForm}
+        />
+      );
+      break;
+    }
+    default:
+      notReachable(currentQuizStep);
+  }
+
+  return (
+    <ThemeProvider
+      theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}
+    >
+      {quizStepElement}
+    </ThemeProvider>
+  );
 }