fix: force remove questions

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -58,7 +58,7 @@ function CsComponent({
 
   const { dragQuestionContentId, desireToOpenABranchingModal, canCreatePublic } = useUiTools()
   const trashQuestions = useQuestionsStore().questions
-  const questions = trashQuestions.filter((question) => question.type !== "result" && question.type !== null)
+  const questions = trashQuestions.filter((question) => question.type !== "result" && question.type !== null && !question.deleted)
   const [startCreate, setStartCreate] = useState("");
   const [startRemove, setStartRemove] = useState("");
 

src/pages/Questions/QuestionSwitchWindowTool.tsx

@@ -1,26 +1,135 @@
-
-import {
-    Box, useMediaQuery, useTheme,
-} from "@mui/material";
+import { useEffect } from "react";
+import { Box, useMediaQuery, useTheme } from "@mui/material";
 import { DraggableList } from "./DraggableList";
 import { SwitchBranchingPanel } from "./SwitchBranchingPanel";
 import { BranchingMap } from "./BranchingMap";
-import {useQuestionsStore} from "@root/questions/store";
+import { useQuestionsStore } from "@root/questions/store";
 import { useUiTools } from "@root/uiTools/store";
+import { useQuestions } from "@root/questions/hooks";
+import { useCurrentQuiz } from "@root/quizes/hooks";
 
+import {
+  copyQuestion,
+  deleteQuestion,
+  deleteQuestionWithTimeout,
+  clearRuleForAll,
+  updateQuestion,
+  getQuestionByContentId,
+} from "@root/questions/actions";
+import { updateRootContentId } from "@root/quizes/actions";
+
+import type { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
 
 export const QuestionSwitchWindowTool = () => {
-    const {questions} = useQuestionsStore.getState()
-    const {openBranchingPanel} = useUiTools()
-    const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down(600));
-    return (
-                <Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap", marginBottom: isMobile ? "20px" : undefined  }}>
-                <Box sx={{ flexBasis: "796px" }}>
-                    {openBranchingPanel? <BranchingMap /> : <DraggableList />}
-                </Box>
-                <SwitchBranchingPanel
-                />
-            </Box>
-    )
-}
+  const { questions } = useQuestionsStore.getState();
+  const { openBranchingPanel } = useUiTools();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  const quiz = useCurrentQuiz();
+
+  const deleteFn = (question: AnyTypedQuizQuestion) => {
+    if (question.type !== null) {
+      if (question.content.rule.parentId === "root") {
+        //удалить из стора root и очистить rule всем вопросам
+        updateRootContentId(quiz?.id || "", "");
+        clearRuleForAll();
+        deleteQuestion(question.id);
+      } else if (question.content.rule.parentId.length > 0) {
+        //удалить из стора вопрос из дерева и очистить его потомков
+        const clearQuestions = [] as string[];
+
+        //записываем потомков , а их результаты удаляем
+        const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
+          questions.forEach((targetQuestion) => {
+            if (
+              targetQuestion.type !== null &&
+              targetQuestion.content.rule.parentId === parentQuestion.content.id
+            ) {
+              //если у вопроса совпал родитель с родителем => он потомок, в кучу его
+              if (
+                targetQuestion.type !== "result" &&
+                targetQuestion.type !== null
+              ) {
+                if (!clearQuestions.includes(targetQuestion.content.id))
+                  clearQuestions.push(targetQuestion.content.id);
+                getChildren(targetQuestion); //и ищем его потомков
+              }
+            }
+          });
+        };
+        getChildren(question);
+        //чистим потомков от инфы ветвления
+        clearQuestions.forEach((id) => {
+          updateQuestion(id, (question) => {
+            question.content.rule.parentId = "";
+            question.content.rule.main = [];
+            question.content.rule.default = "";
+          });
+        });
+
+        //чистим rule родителя
+        const parentQuestion = getQuestionByContentId(
+          question.content.rule.parentId
+        );
+        const newRule = {};
+        newRule.main = parentQuestion.content.rule.main.filter(
+          (data) => data.next !== question.content.id
+        ); //удаляем условия перехода от родителя к этому вопросу
+        newRule.parentId = parentQuestion.content.rule.parentId;
+        newRule.default =
+          parentQuestion.content.rule.parentId === question.content.id
+            ? ""
+            : parentQuestion.content.rule.parentId;
+        newRule.children = [...parentQuestion.content.rule.children].splice(
+          parentQuestion.content.rule.children.indexOf(question.content.id),
+          1
+        );
+
+        updateQuestion(question.content.rule.parentId, (PQ) => {
+          PQ.content.rule = newRule;
+        });
+        deleteQuestion(question.id);
+      }
+
+      deleteQuestion(question.id);
+
+      const result = questions.find(
+        (q) =>
+          q.type === "result" && q.content.rule.parentId === question.content.id
+      );
+      if (result) deleteQuestion(result.id);
+    } else {
+      deleteQuestion(question.id);
+    }
+  };
+
+  const deleteTimeoutedQuestions = () => {
+    const questionsForDeletion = questions.filter(
+      ({ type, deleted }) => type && type !== "result" && deleted
+    ) as AnyTypedQuizQuestion[];
+
+    questionsForDeletion.forEach(deleteFn);
+  };
+
+  useEffect(() => {
+    if (openBranchingPanel) {
+      deleteTimeoutedQuestions();
+    }
+  }, [openBranchingPanel]);
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        gap: "20px",
+        flexWrap: "wrap",
+        marginBottom: isMobile ? "20px" : undefined,
+      }}
+    >
+      <Box sx={{ flexBasis: "796px" }}>
+        {openBranchingPanel ? <BranchingMap /> : <DraggableList />}
+      </Box>
+      <SwitchBranchingPanel />
+    </Box>
+  );
+};

src/pages/Questions/SwitchBranchingPanel/index.tsx

@@ -1,23 +1,27 @@
-
-
-import {Box, Typography, Switch, useTheme, Button, useMediaQuery} from "@mui/material";
+import {
+  Box,
+  Typography,
+  Switch,
+  useTheme,
+  Button,
+  useMediaQuery,
+} from "@mui/material";
 
 import { QuestionsList } from "./QuestionsList";
 import { updateOpenBranchingPanel } from "@root/uiTools/actions";
-import {useQuestionsStore} from "@root/questions/store";
-import {useRef} from "react";
+import { useQuestionsStore } from "@root/questions/store";
+import { useRef } from "react";
 import { useUiTools } from "@root/uiTools/store";
 
 
 export const SwitchBranchingPanel = () => {
   const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down(660));
-    const isTablet = useMediaQuery(theme.breakpoints.down(1446));
-    
-    const {openBranchingPanel} = useUiTools()
-  const ref = useRef()
-  
-  return ( !isTablet || openBranchingPanel ? 
+  const isMobile = useMediaQuery(theme.breakpoints.down(660));
+  const isTablet = useMediaQuery(theme.breakpoints.down(1446));
+  const { openBranchingPanel } = useUiTools();
+  const ref = useRef();
+
+  return !isTablet || openBranchingPanel ? (
     <Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
       <Box
         sx={{
@@ -31,10 +35,10 @@ export const SwitchBranchingPanel = () => {
         }}
       >
         <Switch
-            checked={openBranchingPanel}
-            onChange={
-              (e) => updateOpenBranchingPanel(e.target.checked)
-          }
+          checked={openBranchingPanel}
+          onChange={({ target }) => {
+            updateOpenBranchingPanel(target.checked);
+          }}
           sx={{
             width: 50,
             height: 30,
@@ -87,11 +91,10 @@ export const SwitchBranchingPanel = () => {
             Настройте связи между вопросами
           </Typography>
         </Box>
-        
       </Box>
-      { openBranchingPanel && <QuestionsList /> }
+      {openBranchingPanel && <QuestionsList />}
     </Box>
-    : 
+  ) : (
     <></>
   );
 };