получение списка вопросов на странице редактирование. компонент плюса дерева очищает вопросы и рут квиза

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -145,8 +145,9 @@ function CsComponent({
   }, [desireToOpenABranchingModal])
   useLayoutEffect(() => {
     updateOpenedModalSettingsId()
-    //  updateRootContentId(quiz.id, "")
-    //  clearRuleForAll()
+    console.log("first render CSComponent")
+      // updateRootContentId(quiz.id, "")
+      // clearRuleForAll()
   }, [])
   useEffect(() => {
     if (modalQuestionTargetContentId.length !== 0 && modalQuestionParentContentId.length !== 0) {
@@ -224,6 +225,7 @@ function CsComponent({
 
 
   const removeNode = ({ targetNodeContentId }: { targetNodeContentId: string }) => {
+    console.log("старт удаление")
     const deleteNodes = [] as string[]
     const deleteEdges: any = []
     const cy = cyRef?.current

src/pages/Questions/BranchingMap/FirstNodeField.tsx

@@ -1,6 +1,6 @@
 import { Box } from "@mui/material"
-import { useEffect, useRef, useState } from "react";
-import { deleteQuestion, updateDragQuestionContentId, updateQuestion } from "@root/questions/actions"
+import { useEffect, useRef, useLayoutEffect } from "react";
+import { deleteQuestion, clearRuleForAll, updateQuestion, updateOpenedModalSettingsId } from "@root/questions/actions"
 import { updateRootContentId } from "@root/quizes/actions"
 import { useCurrentQuiz } from "@root/quizes/hooks"
 import { useQuestionsStore } from "@root/questions/store"
@@ -11,8 +11,17 @@ interface Props {
     modalQuestionTargetContentId: string;
 }
 export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetContentId }: Props) => {
-
     const quiz = useCurrentQuiz();
+
+
+    useLayoutEffect(() => {
+        updateOpenedModalSettingsId()
+        console.log("first render firstComponent")
+          updateRootContentId(quiz.id, "")
+          clearRuleForAll()
+      }, [])
+
+
     const { dragQuestionContentId, questions } = useQuestionsStore()
     const Container = useRef<HTMLDivElement | null>(null);
 

src/pages/Questions/Form/FormDraggableList/index.tsx

@@ -1,13 +1,11 @@
 import { Box } from "@mui/material";
 import { reorderQuestions } from "@root/questions/actions";
-import { useQuestions } from "@root/questions/hooks";
 import type { DropResult } from "react-beautiful-dnd";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import FormDraggableListItem from "./FormDraggableListItem";
 
 
 export const FormDraggableList = () => {
-    const { questions } = useQuestions();
 
     const onDragEnd = ({ destination, source }: DropResult) => {
         if (destination) reorderQuestions(source.index, destination.index);

src/pages/startPage/EditPage.tsx

@@ -1,5 +1,8 @@
+import { quizApi } from "@api/quiz";
+import { devlog } from "@frontend/kitui";
 import BackArrowIcon from "@icons/BackArrowIcon";
 import { Burger } from "@icons/Burger";
+import EyeIcon from "@icons/EyeIcon";
 import { PenaLogoIcon } from "@icons/PenaLogoIcon";
 import {
     Box,
@@ -11,9 +14,7 @@ import {
     useMediaQuery,
     useTheme,
 } from "@mui/material";
-import { cleanQuestions, updateOpenBranchingPanel } from "@root/questions/actions";
-import { useQuestionsStore } from "@root/questions/store";
-import { decrementCurrentStep, resetEditConfig } from "@root/quizes/actions";
+import { decrementCurrentStep, resetEditConfig, setQuizes } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuizStore } from "@root/quizes/store";
 import CustomAvatar from "@ui_kit/Header/Avatar";
@@ -22,22 +23,46 @@ import PenaLogo from "@ui_kit/PenaLogo";
 import Sidebar from "@ui_kit/Sidebar";
 import Stepper from "@ui_kit/Stepper";
 import SwitchStepPages from "@ui_kit/switchStepPages";
+import { isAxiosError } from "axios";
+import { enqueueSnackbar } from "notistack";
 import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
+import useSWR from "swr";
 import { SidebarMobile } from "./Sidebar/SidebarMobile";
+import {cleanQuestions, updateOpenBranchingPanel} from "@root/questions/actions";
+import {BranchingPanel} from "../Questions/BranchingPanel";
+import {setQuestions} from "@root/questions/actions";
+import {useQuestionsStore} from "@root/questions/store";
+import { useQuestions } from "@root/questions/hooks";
+import { questionApi } from "@api/question";
 
 
+
+    
 export default function EditPage() {
-    // if (isLoading && !questions) return <Box>Загрузка вопросов...</Box>;
+    const quiz = useCurrentQuiz();
+
+    console.log("get questions")
+    useSWR(["questions", quiz?.backendId], ([, id]) => questionApi.getList({ quiz_id: id }), {
+        onSuccess: setQuestions,
+        onError: error => {
+            const message = isAxiosError<string>(error) ? (error.response?.data ?? "") : "";
+
+            devlog("Error getting question list", error);
+            enqueueSnackbar(`Не удалось получить вопросы. ${message}`);
+        }
+    });
+
+
+
+    const {openBranchingPanel, questions} = useQuestionsStore.getState()
     const theme = useTheme();
     const navigate = useNavigate();
     const editQuizId = useQuizStore(state => state.editQuizId);
-    const quiz = useCurrentQuiz();
     const currentStep = useQuizStore(state => state.currentStep);
     const isTablet = useMediaQuery(theme.breakpoints.down(1000));
     const isMobile = useMediaQuery(theme.breakpoints.down(660));
     const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
-    const {openBranchingPanel} = useQuestionsStore.getState()
     const quizConfig = quiz?.config;
 
     useEffect(() => {

src/stores/questions/actions.ts

@@ -485,6 +485,7 @@ export const updateDragQuestionContentId = (contentId?: string) => {
 
 export const clearRuleForAll = () => {
     const { questions } = useQuestionsStore.getState();
+    console.log(questions)
     questions.forEach(question => {
         if (question.type !== null && (question.content.rule.main.length > 0 || question.content.rule.default.length > 0 || question.content.rule.parentId.length > 0)) {
             updateQuestion(question.content.id, question => {

src/stores/quizes/actions.ts

@@ -179,6 +179,7 @@ export const deleteQuiz = async (quizId: string) => requestQueue.enqueue(async (
 export const updateRootContentId = (quizId: string, id:string) => updateQuiz(
     quizId,
     quiz => {
+        console.log("Я изменение статуса корня проекта дерева, меняю на ", id)
         quiz.config.haveRoot = id
     },
 );