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 { useUADevice } from "../../../utils/hooks/useUADevice";
-import { notReachable } from "../../utils/notReachable";
+import { notReachable } from "../../../utils/notReachable";
-import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
+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,10 +11,9 @@ 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);
+  let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep);
   const isMobileMini = useRootContainerSize() < 382;
   const {
     currentQuestion,
@@ -26,17 +25,21 @@ export default function ViewPublicationPage() {
     showResultAfterContactForm,
   } = useQuestionFlowControl();
 
-    useEffect(function setFaviconAndTitle() {
+  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]);
+    },
+    [settings]
+  );
 
   if (recentlyCompleted) throw new Error("Quiz already completed");
-    if (currentQuizStep === "startpage" && settings.cfg.noStartPage) currentQuizStep = "question";
+  if (currentQuizStep === "startpage" && settings.cfg.noStartPage)
+    currentQuizStep = "question";
 
   let quizStepElement: ReactElement;
   switch (currentQuizStep) {
@@ -87,11 +90,14 @@ export default function ViewPublicationPage() {
       );
       break;
     }
-        default: notReachable(currentQuizStep);
+    default:
+      notReachable(currentQuizStep);
   }
 
   return (
-        <ThemeProvider theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}>
+    <ThemeProvider
+      theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}
+    >
       {quizStepElement}
     </ThemeProvider>
   );