кнопки открытия модалки информации о невозможности опубликоваться

src/pages/startPage/EditPage.tsx

@@ -33,7 +33,7 @@ import useSWR from "swr";
 import { useDebouncedCallback } from "use-debounce";
 import { SidebarMobile } from "./Sidebar/SidebarMobile";
 import { cleanQuestions, setQuestions } from "@root/questions/actions";
-import { updateOpenBranchingPanel, updateCanCreatePublic } from "@root/uiTools/actions";
+import { updateOpenBranchingPanel, updateCanCreatePublic, updateModalInfoWhyCantCreate } from "@root/uiTools/actions";
 import { BranchingPanel } from "../Questions/BranchingPanel";
 import { useQuestionsStore } from "@root/questions/store";
 import { useQuizes } from "@root/quizes/hooks";
@@ -45,6 +45,7 @@ import { clearUserData } from "@root/user";
 import { clearAuthToken } from "@frontend/kitui";
 import { logout } from "@api/auth";
 import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
+import { ModalInfoWhyCantCreate } from "./ModalInfoWhyCantCreate";
 
 export default function EditPage() {
   const quiz = useCurrentQuiz();
@@ -80,16 +81,17 @@ export default function EditPage() {
     () => () => {
       resetEditConfig();
       cleanQuestions();
+      updateModalInfoWhyCantCreate(false)
     },
     []
   );
 
 
 
-  const updateQuestionHint = useDebouncedCallback((questions:AnyTypedQuizQuestion[]) => {
+  const updateQuestionHint = useDebouncedCallback((questions: AnyTypedQuizQuestion[]) => {
     console.log("пересчитываю")
 
-    const problems:any = {}
+    const problems: any = {}
 
     questions.forEach((question) => {
       //Если не участвует в ветвлении, или безтиповый, или резулт - он нам не интересен
@@ -112,7 +114,7 @@ export default function EditPage() {
     console.log(problems)
     console.log(Object.keys(problems).length > 0)
 
-  }, 1000);
+  }, 600);
 
 
   useEffect(() => {
@@ -199,8 +201,8 @@ export default function EditPage() {
             />
           </FormControl>
         </Box>
-        <Button onClick={() => {console.log(canCreatePublic)}}>dddddd</Button>
+        <Button onClick={() => { console.log(canCreatePublic) }}>dddddd</Button>
-        <Button onClick={() => {console.log(whyCantCreatePublic)}}>dddddd</Button>
+        <Button onClick={() => { console.log(whyCantCreatePublic) }}>dddddd</Button>
         {isTablet ? (
           <Box
             sx={{
@@ -292,6 +294,7 @@ export default function EditPage() {
             </>
           )}
         </Box>
+        
         <Box
           sx={{
             position: "absolute",
@@ -366,62 +369,76 @@ export default function EditPage() {
               </Box>
             </Box>
           )}
-          {disableTest ? (
-            <Button
-              variant="contained"
-              disabled
-              sx={{
-                fontSize: "14px",
-                lineHeight: "18px",
-                height: "34px",
-                minWidth: "130px",
-              }}
-            >
-              Тестовый просмотр
-            </Button>
-          ) : (
-            <a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}>
-              <Button
-                variant="contained"
-                sx={{
-                  fontSize: "14px",
-                  lineHeight: "18px",
-                  height: "34px",
-                  minWidth: "130px",
-                }}
-              >
-                Тестовый просмотр
-              </Button>
-            </a>
-          )}
 
-          <Button
+          {
-            variant="outlined"
+            canCreatePublic ?
-            sx={{
+
-              fontSize: "14px",
+              <>
-              lineHeight: "18px",
+                {disableTest ? (
-              height: "34px",
+                  <Button
-              border: `1px solid ${theme.palette.brightPurple.main}`,
+                    variant="contained"
-              backgroundColor: quiz?.status === "start" ? theme.palette.brightPurple.main : "transparent",
+                    disabled
-              color: quiz?.status === "start" ? "#FFFFFF" : theme.palette.brightPurple.main,
+                    sx={{
-            }}
+                      fontSize: "14px",
-            onClick={() => {
+                      lineHeight: "18px",
-              updateQuiz(quiz?.id, (state) => {
+                      height: "34px",
-                state.status = quiz?.status === "start" ? "stop" : "start";
+                      minWidth: "130px",
-              });
+                    }}
-            }}
+                  >
-          >
+                    Тестовый просмотр
-            {quiz?.status === "start" ? "Стоп" : "Старт"}
+                  </Button>
-          </Button>
+                ) : (
-          {quiz?.status === "start" && <Box
+                  <a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}>
-            component={Link}
+                    <Button
-            sx={{
+                      variant="contained"
-              color: "#7e2aea",
+                      sx={{
-              fontSize: "14px"
+                        fontSize: "14px",
-            }}
+                        lineHeight: "18px",
-            target="_blank" to={"https://hbpn.link/" + quiz.qid}>https://hbpn.link/{quiz.qid}</Box>}
+                        height: "34px",
+                        minWidth: "130px",
+                      }}
+                    >
+                      Тестовый просмотр
+                    </Button>
+                  </a>
+                )}
+
+                <Button
+                  variant="outlined"
+                  sx={{
+                    fontSize: "14px",
+                    lineHeight: "18px",
+                    height: "34px",
+                    border: `1px solid ${theme.palette.brightPurple.main}`,
+                    backgroundColor: quiz?.status === "start" ? theme.palette.brightPurple.main : "transparent",
+                    color: quiz?.status === "start" ? "#FFFFFF" : theme.palette.brightPurple.main,
+                  }}
+                  onClick={() => {
+                    updateQuiz(quiz?.id, (state) => {
+                      state.status = quiz?.status === "start" ? "stop" : "start";
+                    });
+                  }}
+                >
+                  {quiz?.status === "start" ? "Стоп" : "Старт"}
+                </Button>
+                {quiz?.status === "start" && <Box
+                  component={Link}
+                  sx={{
+                    color: "#7e2aea",
+                    fontSize: "14px"
+                  }}
+                  target="_blank" to={"https://hbpn.link/" + quiz.qid}>https://hbpn.link/{quiz.qid}
+                </Box>}
+              </>
+              :
+              <Button
+                onClick={() => updateModalInfoWhyCantCreate(true)}
+              >Почему я не могу создать публикацию</Button>
+
+          }
         </Box>
       </Box>
-    </>
+      <ModalInfoWhyCantCreate />
-  );
+      </>
+      );
 }

src/pages/startPage/ModalInfoWhyCantCreate.tsx

@@ -0,0 +1,48 @@
+import { Box, Modal, Typography, Divider } from "@mui/material"
+
+import { useUiTools } from "@root/uiTools/store";
+import { updateModalInfoWhyCantCreate } from "@root/uiTools/actions";
+
+export const ModalInfoWhyCantCreate = () => {
+
+    const { whyCantCreatePublic, openModalInfoWhyCantCreate } = useUiTools();
+
+    return (
+        <Modal
+            open={openModalInfoWhyCantCreate}
+            onClose={() => updateModalInfoWhyCantCreate(false)}
+        >
+            <Box sx={{
+                position: 'absolute' as 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                maxWidth: '620px',
+                width: '100%',
+                bgcolor: 'background.paper',
+                borderRadius: '12px',
+
+                boxShadow: 24,
+                p: "25px",
+                minHeight: "60vh",
+                maxHeight: "90vh",
+                overflow: "auto"
+            }}
+            >
+                {
+                    Object.values(whyCantCreatePublic).map((data) => {
+                        return (
+                            <Box>
+                                <Typography color="#7e2aea">У вопроса "{data.name}"</Typography>
+                                {
+                                    data.problems.map((problem) => <Typography p="5px 0">{problem}</Typography>)
+                                }
+                                <Divider/>
+                            </Box>
+                        )
+                    })
+                }
+            </Box>
+        </Modal>
+    )
+}

src/stores/uiTools/actions.ts

@@ -34,4 +34,6 @@ export const updateEditSomeQuestion = (contentId?: string) => {
 export const updateOpenedModalSettingsId = (id?: string) => useUiTools.setState({ openedModalSettingsId: id ? id : null });
 
 
-export const updateCanCreatePublic = (can?: boolean) => useUiTools.setState({ canCreatePublic: can ? can : false });
+export const updateCanCreatePublic = (can: boolean) => useUiTools.setState({ canCreatePublic: can });
+
+export const updateModalInfoWhyCantCreate = (can: boolean) => useUiTools.setState({ openModalInfoWhyCantCreate: can });

src/stores/uiTools/store.ts

@@ -10,6 +10,7 @@ export type UiTools = {
     editSomeQuestion: string | null;
     canCreatePublic: boolean;
     whyCantCreatePublic: Record<string, WhyCantCreatePublic>//ид вопроса и список претензий к нему
+    openModalInfoWhyCantCreate: boolean;
 };
 export type WhyCantCreatePublic = {
     name: string;
@@ -24,7 +25,8 @@ const initialState: UiTools = {
     desireToOpenABranchingModal: null as null,
     editSomeQuestion: null as null,
     canCreatePublic: false,
-    whyCantCreatePublic: {}
+    whyCantCreatePublic: {},
+    openModalInfoWhyCantCreate: false
 };
 
 export const useUiTools = create<UiTools>()(