modal fix

src/pages/ViewPublicationPage/StartPageViewPublication.tsx

@@ -17,6 +17,8 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
 
   if (!quiz) return null;
 
+  console.log(quiz);
+
   const handleCopyNumber = () => {
     navigator.clipboard.writeText(quiz.config.info.phonenumber);
   };

src/pages/ViewPublicationPage/index.tsx

@@ -17,7 +17,7 @@ import { enqueueSnackbar } from "notistack";
 import { useQuestionsStore } from "@root/questions/store";
 import { setQuestions } from "@root/questions/actions";
 import { questionApi } from "@api/question";
-import { ApologyPage } from "./ApologyPage"
+import { ApologyPage } from "./ApologyPage";
 
 export const ViewPage = () => {
   const quiz = useCurrentQuiz();
@@ -48,15 +48,15 @@ export const ViewPage = () => {
     }
   }, [quiz?.config.startpage.favIcon]);
 
-  const filteredQuestions = (
+  const filteredQuestions = (questions.filter(({ type }) => type) as AnyTypedQuizQuestion[]).sort(
-    questions.filter(({ type }) => type) as AnyTypedQuizQuestion[]
+    (previousItem, item) => previousItem.page - item.page
-  ).sort((previousItem, item) => previousItem.page - item.page);
+  );
 
-
+  console.log(questions);
-  console.log(questions)
 
   if (visualStartPage === undefined) return <></>;
-  if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result")) return <ApologyPage message="Нет созданных вопросов"/>
+  if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result"))
+    return <ApologyPage message="Нет созданных вопросов" />;
   return (
     <Box>
       {!visualStartPage ? (

src/pages/startPage/EditPage.tsx

@@ -71,7 +71,7 @@ export default function EditPage() {
   const isMobile = useMediaQuery(theme.breakpoints.down(660));
   const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
   const quizConfig = quiz?.config;
-  const disableTest = quiz === undefined ? true : (quiz.config.type === null)
+  const disableTest = quiz === undefined ? true : quiz.config.type === null;
 
   useEffect(() => {
     if (editQuizId === null) navigate("/list");
@@ -81,50 +81,45 @@ export default function EditPage() {
     () => () => {
       resetEditConfig();
       cleanQuestions();
-      updateModalInfoWhyCantCreate(false)
+      updateModalInfoWhyCantCreate(false);
     },
     []
   );
 
-
-
   const updateQuestionHint = useDebouncedCallback((questions: AnyTypedQuizQuestion[]) => {
-
+    const problems: any = {};
-    const problems: any = {}
 
     questions.forEach((question) => {
       //Если не участвует в ветвлении, или безтиповый, или резулт - он нам не интересен
-      if (question.type === null
+      if (question.type === null || question.type === "result" || question.content.rule.parentId.length === 0) return;
-        || question.type === "result"
-        || question.content.rule.parentId.length === 0) return
 
       //если есть дети, но нет дефолта - логическая ошибка. Так нельзя
       if (question.content.rule.children.length > 0 && question.content.rule.default.length === 0) {
         problems[question.content.id] = {
           name: question.title,
-          problems: ["Не выбран дефолтный вопрос"]
+          problems: ["Не выбран дефолтный вопрос"],
-        }
+        };
       }
+    });
 
-    })
+    console.log(problems);
+
+    useUiTools.setState({ whyCantCreatePublic: problems });
 
-    useUiTools.setState({ whyCantCreatePublic: problems })
     if (Object.keys(problems).length > 0) {
-      updateQuiz(quiz?.id, (state) => { state.status = "stop" })
+      updateQuiz(quiz?.id, (state) => {
-      updateCanCreatePublic(false)
+        state.status = "stop";
+      });
+      updateCanCreatePublic(false);
     } else {
-      updateCanCreatePublic(true)
+      updateCanCreatePublic(true);
     }
-
-
   }, 600);
 
-
   useEffect(() => {
-    updateQuestionHint(questions)
+    updateQuestionHint(questions);
   }, [questions]);
 
-
   async function handleLogoutClick() {
     const [, logoutError] = await logout();
 
@@ -137,7 +132,7 @@ export default function EditPage() {
     navigate("/");
   }
 
-  if (!quizConfig) return <></>
+  if (!quizConfig) return <></>;
   return (
     <>
       {/*хедер*/}
@@ -366,7 +361,7 @@ export default function EditPage() {
             </Box>
           )}
 
-          {!canCreatePublic && quiz.config.type !== "form" ?
+          {!canCreatePublic && quiz.config.type !== "form" ? (
             <Button
               variant="contained"
               // disabled
@@ -376,11 +371,13 @@ export default function EditPage() {
                 height: "34px",
                 minWidth: "130px",
               }}
-              onClick={() => Object.keys(whyCantCreatePublic).length === 0 ? () => {} : updateModalInfoWhyCantCreate(true)}
+              onClick={() =>
+                Object.keys(whyCantCreatePublic).length === 0 ? null : updateModalInfoWhyCantCreate(true)
+              }
             >
               Тестовый просмотр
             </Button>
-           : 
+          ) : (
             <a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}>
               <Button
                 variant="contained"
@@ -394,7 +391,7 @@ export default function EditPage() {
                 Тестовый просмотр
               </Button>
             </a>
-          }
+          )}
 
           <Button
             variant="outlined"
@@ -407,24 +404,29 @@ export default function EditPage() {
               color: quiz?.status === "start" ? "#FFFFFF" : theme.palette.brightPurple.main,
             }}
             onClick={
-              Object.keys(whyCantCreatePublic).length === 0 ?
+              Object.keys(whyCantCreatePublic).length === 0
-                () => updateQuiz(quiz?.id, (state) => {
+                ? () =>
+                    updateQuiz(quiz?.id, (state) => {
                       state.status = quiz?.status === "start" ? "stop" : "start";
                     })
-               :
+                : () => updateModalInfoWhyCantCreate(true)
-                () => updateModalInfoWhyCantCreate(true)
             }
           >
             {quiz?.status === "start" ? "Стоп" : "Старт"}
           </Button>
-        {quiz?.status === "start" && <Box
+          {quiz?.status === "start" && (
+            <Box
               component={Link}
               sx={{
                 color: "#7e2aea",
-            fontSize: "14px"
+                fontSize: "14px",
               }}
-          target="_blank" to={"https://hbpn.link/" + quiz.qid}>https://hbpn.link/{quiz.qid}
+              target="_blank"
-        </Box>}
+              to={"https://hbpn.link/" + quiz.qid}
+            >
+              https://hbpn.link/{quiz.qid}
+            </Box>
+          )}
         </Box>
       </Box>
       <ModalInfoWhyCantCreate />

src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx

@@ -1,20 +1,10 @@
-import {
+import { Box, Button, ButtonBase, Link, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
-    Box,
-    Button,
-    ButtonBase,
-    Link,
-    Paper,
-    Typography,
-    useMediaQuery,
-    useTheme,
-} from "@mui/material";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import YoutubeEmbedIframe from "./YoutubeEmbedIframe";
 import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
 import { notReachable } from "../../utils/notReachable";
 import { useUADevice } from "../../utils/hooks/useUADevice";
 
-
 export default function QuizPreviewLayout() {
   const theme = useTheme();
   const quiz = useCurrentQuiz();
@@ -26,9 +16,9 @@ export default function QuizPreviewLayout() {
     navigator.clipboard.writeText(quiz.config.info.phonenumber);
   };
 
-    const background = quiz.config.startpage.background.type === "image"
+  const background =
-        ? quiz.config.startpage.background.desktop
+    quiz.config.startpage.background.type === "image" ? (
-            ? (
+      quiz.config.startpage.background.desktop ? (
         <img
           src={quiz.config.startpage.background.desktop}
           alt=""
@@ -38,25 +28,25 @@ export default function QuizPreviewLayout() {
             objectFit: "cover",
           }}
         />
-            )
+      ) : null
-            : null
+    ) : quiz.config.startpage.background.type === "video" ? (
-        : quiz.config.startpage.background.type === "video"
+      quiz.config.startpage.background.video ? (
-            ? quiz.config.startpage.background.video
-                ? (
         <YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video} />
-                )
+      ) : null
-                : null
+    ) : null;
-            : null;
 
   return (
     <Paper className="quiz-preview-draghandle" sx={{ height: "100%" }}>
       <QuizPreviewLayoutByType
-                quizHeaderBlock={<>
+        quizHeaderBlock={
-                    <Box sx={{
+          <>
+            <Box
+              sx={{
                 display: "flex",
                 alignItems: "center",
                 gap: "20px",
-                    }}>
+              }}
+            >
               {quiz.config.startpage.logo && (
                 <img
                   src={quiz.config.startpage.logo}
@@ -68,25 +58,26 @@ export default function QuizPreviewLayout() {
                   alt=""
                 />
               )}
-                        <Typography sx={{ fontSize: "12px" }}>
+              <Typography sx={{ fontSize: "12px" }}>{quiz.config.info.orgname}</Typography>
-                            {quiz.config.info.orgname}
-                        </Typography>
             </Box>
-                </>}
+          </>
-                quizMainBlock={<>
+        }
-                    <Box sx={{
+        quizMainBlock={
+          <>
+            <Box
+              sx={{
                 display: "flex",
                 gap: "10px",
                 flexDirection: "column",
                 justifyContent: "center",
-                        alignItems: (quiz.config.startpageType === "expanded" && quiz.config.startpage.position === "center")
+                alignItems:
+                  quiz.config.startpageType === "expanded" && quiz.config.startpage.position === "center"
                     ? "center"
                     : "start",
-                    }}>
+              }}
+            >
               <Typography sx={{ fontWeight: "bold" }}>{quiz.name}</Typography>
-                        <Typography sx={{ fontSize: "12px" }}>
+              <Typography sx={{ fontSize: "12px" }}>{quiz.config.startpage.description}</Typography>
-                            {quiz.config.startpage.description}
-                        </Typography>
               <Box>
                 <Button
                   variant="contained"
@@ -119,11 +110,10 @@ export default function QuizPreviewLayout() {
                   {quiz.config.info.phonenumber}
                 </Typography>
               )}
-                        <Typography sx={{ fontSize: "12px" }}>
+              <Typography sx={{ fontSize: "12px" }}>{quiz.config.info.law}</Typography>
-                            {quiz.config.info.law}
-                        </Typography>
             </Box>
-                </>}
+          </>
+        }
         backgroundBlock={background}
         startpageType={quiz.config.startpageType}
         alignType={quiz.config.startpage.position}
@@ -132,7 +122,13 @@ export default function QuizPreviewLayout() {
   );
 }
 
-function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlock, startpageType, alignType }: {
+function QuizPreviewLayoutByType({
+  quizHeaderBlock,
+  quizMainBlock,
+  backgroundBlock,
+  startpageType,
+  alignType,
+}: {
   quizHeaderBlock: JSX.Element;
   quizMainBlock: JSX.Element;
   backgroundBlock: JSX.Element | null;
@@ -146,27 +142,33 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
     case null:
     case "standard": {
       return (
-                <Box sx={{
+        <Box
+          sx={{
             display: "flex",
             flexDirection: alignType === "left" ? "row" : "row-reverse",
             flexGrow: 1,
             height: "100%",
             "&::-webkit-scrollbar": { width: 0 },
-                }}>
+          }}
-                    <Box sx={{
+        >
+          <Box
+            sx={{
               width: !isTablet ? "40%" : "100%",
               padding: "16px",
               display: "flex",
               flexDirection: "column",
               justifyContent: "space-between",
               alignItems: !isTablet ? "flex-start" : "center",
-                    }}>
+            }}
+          >
             {quizHeaderBlock}
             {quizMainBlock}
           </Box>
-                    <Box sx={{
+          <Box
+            sx={{
               width: "60%",
-                    }}>
+            }}
+          >
             {backgroundBlock}
           </Box>
         </Box>
@@ -174,15 +176,18 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
     }
     case "expanded": {
       return (
-                <Box sx={{
+        <Box
+          sx={{
             position: "relative",
             display: "flex",
             justifyContent: startpageAlignTypeToJustifyContent[alignType],
             flexGrow: 1,
             height: "100%",
             "&::-webkit-scrollbar": { width: 0 },
-                }}>
+          }}
-                    <Box sx={{
+        >
+          <Box
+            sx={{
               width: "40%",
               position: "relative",
               padding: "16px",
@@ -191,18 +196,21 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
               flexDirection: "column",
               justifyContent: "space-between",
               alignItems: alignType === "center" ? "center" : "start",
-                    }}>
+            }}
+          >
             {quizHeaderBlock}
             {quizMainBlock}
           </Box>
-                    <Box sx={{
+          <Box
+            sx={{
               position: "absolute",
               left: 0,
               top: 0,
               height: "100%",
               width: "100%",
               zIndex: 1,
-                    }}>
+            }}
+          >
             {backgroundBlock}
           </Box>
         </Box>
@@ -210,7 +218,8 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
     }
     case "centered": {
       return (
-                <Box sx={{
+        <Box
+          sx={{
             padding: "16px",
             display: "flex",
             flexDirection: "column",
@@ -218,18 +227,16 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
             alignItems: "center",
             height: "100%",
             "&::-webkit-scrollbar": { width: 0 },
-                }}>
+          }}
+        >
           {quizHeaderBlock}
-                    {backgroundBlock &&
+          {backgroundBlock && <Box>{backgroundBlock}</Box>}
-                        <Box>
-                            {backgroundBlock}
-                        </Box>
-                    }
           {quizMainBlock}
         </Box>
       );
     }
-        default: notReachable(startpageType);
+    default:
+      notReachable(startpageType);
   }
 }