feat: DeleteNodeModal

package.json

@@ -24,6 +24,7 @@
         "cypress-file-upload": "^5.0.8",
         "cytoscape": "^3.26.0",
         "cytoscape-popper": "^2.0.0",
+        "date-fns": "^3.0.4",
         "dayjs": "^1.11.10",
         "emoji-mart": "^5.5.2",
         "file-saver": "^2.0.5",

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -130,7 +130,9 @@ function CsComponent({
     if (Object.keys(targetQuestion).length !== 0 && parentNodeContentId && parentNodeChildren !== undefined) {
       clearDataAfterAddNode({ parentNodeContentId, targetQuestion, parentNodeChildren })
       cy?.data('changed', true)
-      createFrontResult(quiz?.backendId, targetQuestion.content.id)
+      if (quiz) {
+        createFrontResult(quiz.backendId, targetQuestion.content.id)
+      }
       const es = cy?.add([
         {
           data: {
@@ -264,14 +266,16 @@ function CsComponent({
         }}
         autoungrabify={true}
       />
-      <DeleteNodeModal />
+      <DeleteNodeModal removeNode={removeNode} />
     </>
   );
 };
 
 function Clear() {
   const quiz = useCurrentQuiz();
-  updateRootContentId(quiz?.id, "")
+  if (quiz) {
+    updateRootContentId(quiz?.id, "");
+  }
   clearRuleForAll()
   return <></>
 }

src/pages/Questions/DeleteNodeModal/index.tsx

@@ -1,61 +1,82 @@
-import { useState, useRef, useEffect, useLayoutEffect } from "react";
+import { useState, useEffect } from "react";
 import {
   Box,
   Button,
-  FormControl,
   FormControlLabel,
-  Link,
   Modal,
-  Radio,
-  RadioGroup,
-  Tooltip,
   Typography,
   useTheme,
   Checkbox,
 } from "@mui/material";
-import { enqueueSnackbar } from "notistack";
+import { isSameDay, isSameMonth, isSameYear, getHours } from "date-fns";
-import {
-  AnyTypedQuizQuestion,
-  createBranchingRuleMain,
-} from "../../../model/questionTypes/shared";
-import { Select } from "../Select";
 
-import RadioCheck from "@ui_kit/RadioCheck";
+import { getQuestionByContentId } from "@root/questions/actions";
-import RadioIcon from "@ui_kit/RadioIcon";
+import { updateDeleteId } from "@root/uiTools/actions";
-import InfoIcon from "@icons/Info";
-import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
-
-import {
-  getQuestionById,
-  getQuestionByContentId,
-  updateQuestion,
-} from "@root/questions/actions";
-import { updateOpenedModalSettingsId } from "@root/uiTools/actions";
 import { useUiTools } from "@root/uiTools/store";
 
-export const DeleteNodeModal = () => {
+import { CheckboxIcon } from "@icons/Checkbox";
-  const { deleteNodeId } = useUiTools();
-  const targetQuestion = getQuestionById(deleteNodeId);
 
-  const saveData = () => {
+type DeleteNodeModalProps = {
-    // if (parentQuestion !== null) {
+  removeNode?: (id: string) => void;
-    //   updateQuestion(
+};
-    //     parentQuestion.content.id,
+
-    //     (question) => (question.content = parentQuestion.content)
+export const DeleteNodeModal = ({ removeNode }: DeleteNodeModalProps) => {
-    //   );
+  const [skipModal, setSkipModal] = useState<boolean>(false);
-    // }
+  const { deleteNodeId } = useUiTools();
-    // handleClose();
+  const targetQuestion = getQuestionByContentId(deleteNodeId);
+  const theme = useTheme();
+
+  useEffect(() => {
+    const isSkipModal = getIsSkipModal();
+
+    if (isSkipModal) {
+      deleteNode();
+    }
+  }, [deleteNodeId]);
+
+  const getLastDeletionNodeTime = () =>
+    Number(localStorage.getItem("lastDeletionNodeTime") || 0);
+
+  const updateLastDeletionNodeTime = () => {
+    const now = new Date().getTime();
+
+    localStorage.setItem("lastDeletionNodeTime", String(now));
+  };
+
+  const getIsSkipModal = () => {
+    const lastDeletionNodeTime = getLastDeletionNodeTime();
+    const now = new Date().getTime();
+
+    console.log("hours", getHours(lastDeletionNodeTime));
+
+    const sameYear = isSameYear(lastDeletionNodeTime, now);
+    const sameMonth = isSameMonth(lastDeletionNodeTime, now);
+    const sameDay = isSameDay(lastDeletionNodeTime, now);
+
+    return sameYear && sameMonth && sameDay;
+  };
+
+  const deleteNode = () => {
+    if (skipModal) {
+      updateLastDeletionNodeTime();
+    }
+
+    if (deleteNodeId) {
+      removeNode?.(deleteNodeId || "");
+    }
+    handleClose();
   };
 
   const handleClose = () => {
-    updateOpenedModalSettingsId();
+    updateDeleteId("");
   };
 
   return (
     <>
-      <Modal open={!!deleteNodeId} onClose={handleClose}>
+      <Modal open={!!deleteNodeId && !getIsSkipModal()} onClose={handleClose}>
         <Box
           sx={{
+            outline: "none",
             position: "absolute",
             overflow: "hidden",
             top: "50%",
@@ -79,19 +100,12 @@ export const DeleteNodeModal = () => {
               alignItems: "center",
             }}
           >
-            <Box sx={{ color: "#4d4d4d" }}>
+            <Typography component="span">{targetQuestion?.title}</Typography>
-              <Typography component="span">{targetQuestion?.title}</Typography>
-            </Box>
-            <Tooltip
-              title="Настройте условия, при которых данный вопрос будет отображаться в квизе."
-              placement="top"
-            >
-              <Box>
-                <InfoIcon />
-              </Box>
-            </Tooltip>
           </Box>
-
+          <Typography sx={{ padding: "15px" }}>
+            Вы правда хотите удалить этот узел? Данные его настроек и настроек
+            его потомков будут утеряны.
+          </Typography>
           <Box
             sx={{
               display: "flex",
@@ -110,11 +124,28 @@ export const DeleteNodeModal = () => {
             <Button
               variant="contained"
               sx={{ width: "100%", maxWidth: "130px" }}
-              onClick={saveData}
+              onClick={deleteNode}
             >
-              Готово
+              Удалить
             </Button>
           </Box>
+          <FormControlLabel
+            control={
+              <Checkbox
+                disableRipple
+                icon={<CheckboxIcon />}
+                checkedIcon={<CheckboxIcon checked />}
+                onChange={(_, value) => setSkipModal(value)}
+                checked={skipModal}
+              />
+            }
+            label="Не спрашивать больше сегодня"
+            sx={{
+              userSelect: "none",
+              margin: "0 0 10px",
+              color: theme.palette.grey2.main,
+            }}
+          />
         </Box>
       </Modal>
     </>

src/stores/uiTools/store.ts

@@ -10,7 +10,6 @@ export type UiTools = {
     canCreatePublic: boolean;
     whyCantCreatePublic: Record<string, WhyCantCreatePublic>//ид вопроса и список претензий к нему
     openModalInfoWhyCantCreate: boolean;
-lastDeletionNodeTime: number | null;
 deleteNodeId: string | null;
 };
 export type WhyCantCreatePublic = {
@@ -28,7 +27,6 @@ const initialState: UiTools = {
     canCreatePublic: false,
     whyCantCreatePublic: {},
     openModalInfoWhyCantCreate: false,
-lastDeletionNodeTime: null,
 deleteNodeId: null,
 };
 

yarn.lock

@@ -4204,6 +4204,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.0.4.tgz#56eb7916d8d4666bf9be168ef84bed0deef1077c"
+  integrity sha512-+daptVi95nJ/D4TPS7/gbUqneVMA0Izr4qYAsL2ZZwtcDtEP8Zge765mbXhTqWYdTSG79/VtbBigQTluiE9DBQ==
+
 dayjs@^1.10.4, dayjs@^1.11.10:
   version "1.11.10"
   resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz"