fix: DraggableList (WIP)

src/pages/Questions/DraggableList/index.tsx

@@ -1,35 +1,30 @@
 import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import { Box } from "@mui/material";
 import { DragDropContext } from "react-beautiful-dnd";
 
 import { StrictModeDroppable } from "./StrictModeDroppable";
 import { DraggableListItem } from "./DraggableListItem";
 
+import { questionStore } from "@root/questions";
+
 import { reorder } from "./helper";
 
 import type { DropResult } from "react-beautiful-dnd";
-import type { Quizes } from "../../../stores/quizes";
 
-export type ExtendedQuizes = Quizes & {
-  onDelete: () => void;
-};
-
-type DraggableListProps = {
-  items: ExtendedQuizes[];
-};
-
-export const DraggableList = ({ items }: DraggableListProps) => {
-  const [listItems, setListItems] = useState(items);
-
-  useEffect(() => {
-    setListItems(items);
-  }, [items]);
+export const DraggableList = () => {
+  const quizId = Number(useParams().quizId);
+  const { listQuestions, setQuestions, removeQuestion } = questionStore();
 
   const onDragEnd = ({ destination, source }: DropResult) => {
     if (destination) {
-      const newItems = reorder(listItems, source.index, destination.index);
+      const newItems = reorder(
+        listQuestions[quizId],
+        source.index,
+        destination.index
+      );
 
-      setListItems(newItems);
+      setQuestions(quizId, newItems);
     }
   };
 
@@ -38,11 +33,11 @@ export const DraggableList = ({ items }: DraggableListProps) => {
       <StrictModeDroppable droppableId="droppable-list">
         {(provided, snapshot) => (
           <Box ref={provided.innerRef} {...provided.droppableProps}>
-            {listItems.map(({ onDelete }, index) => (
+            {listQuestions[quizId].map((_, index) => (
               <DraggableListItem
                 key={index}
                 index={index}
-                onDelete={onDelete}
+                onDelete={() => removeQuestion(quizId, index)}
                 activePlus={snapshot.isDraggingOver}
               />
             ))}

src/pages/Questions/QuestionsPage.tsx

@@ -17,13 +17,10 @@ import { questionStore } from "@root/questions";
 import QuizCard from "../createQuize/QuizCard";
 import { DraggableList } from "./DraggableList";
 
-import type { ExtendedQuizes } from "./DraggableList";
-
 export default function QuestionsPage() {
   const { listQuizes, updateQuizesList } = quizStore();
   const params = Number(useParams().quizId);
-  const { listQuestions, updateQuestionsList, createQuestion, removeQuestion } =
-    questionStore();
+  const { listQuestions, createQuestion } = questionStore();
   const activeStep = listQuizes[params].step;
   const handleNext = () => {
     updateQuizesList(params, { step: listQuizes[params].step + 1 });
@@ -59,14 +56,7 @@ export default function QuestionsPage() {
           Свернуть всё
         </Link>
       </Box>
-      <DraggableList
-        items={Object.values(listQuestions[params] as ExtendedQuizes[]).map(
-          (item, index) => ({
-            ...item,
-            onDelete: () => removeQuestion(params, index),
-          })
-        )}
-      />
+      <DraggableList />
       <Box
         sx={{
           display: "flex",

src/stores/questions.ts

@@ -1,67 +1,83 @@
-import {create} from "zustand";
-import {persist} from "zustand/middleware";
-import {quizStore} from "@root/quizes";
-import {useParams} from "react-router-dom";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { quizStore } from "@root/quizes";
+import { useParams } from "react-router-dom";
+
+export type Question = {
+  title: string;
+  description: string;
+  type: string;
+  required: boolean;
+  deleted: boolean;
+  page: number;
+  content: string;
+  version: number;
+  parent_ids: number[];
+  created_at: string;
+  updated_at: string;
+};
 
 interface QuestionStore {
-    listQuestions: any;
-    updateQuestionsList: (id: number, index: number, values: unknown) => void;
-    removeQuestion: any;
-    createQuestion: (id: number) => void;
+  listQuestions: Record<number, Question[]>;
+  setQuestions: (id: number, questions: Question[]) => void;
+  updateQuestionsList: (id: number, index: number, values: unknown) => void;
+  removeQuestion: any;
+  createQuestion: (id: number) => void;
 }
 
 export const questionStore = create<QuestionStore>()(
+  persist(
+    (set, get) => ({
+      listQuestions: {},
+      setQuestions: (id: number, questions: Question[]) => {
+        const listQuestions = get()["listQuestions"];
 
-    persist(
-        (set, get) => ({
-            listQuestions: {
-            },
-            updateQuestionsList: (id: number, index: number, values: any) => {
-                const array = get()["listQuestions"][id] || [];
-                array[index] = {
-                    ...array[index],
-                    ...values
-                };
-                const state = get()["listQuestions"] || {};
-                state[id] = array
-                set({listQuestions: state});
-            },
+        set({ listQuestions: { ...listQuestions, [id]: questions } });
+      },
 
-            createQuestion:(id: number) => {
-                const array = get()["listQuestions"][id] || [];
-                array.push(
-                    {
-                        "title": "",
-                        "description": "",
-                        "type": "",
-                        "required": true,
-                        "deleted": true,
-                        "page": 0,
-                        "content": "",
-                        "version": 0,
-                        "parent_ids": [
-                            0
-                        ],
-                        "created_at": "",
-                        "updated_at": ""
-                    }
-                )
-                const state = get()["listQuestions"] || {};
-                state[id] = array
-                set({listQuestions: state});
-            },
+      updateQuestionsList: (id: number, index: number, values: any) => {
+        const array = get()["listQuestions"][id] || [];
+        array[index] = {
+          ...array[index],
+          ...values,
+        };
+        const state = get()["listQuestions"] || {};
+        state[id] = array;
+        console.log(state);
+        set({ listQuestions: state });
+      },
 
-            removeQuestion: (id:number, index: number) => {
-                const array = get()["listQuestions"][id] || [];
-                array.splice(index, 1)
-                const state = get()["listQuestions"] || {};
-                state[id] = array
-                set({listQuestions: state});
-            },
-                }),
+      createQuestion: (id: number) => {
+        const array = get()["listQuestions"][id] || [];
+        array.push({
+          title: "",
+          description: "",
+          type: "",
+          required: true,
+          deleted: true,
+          page: 0,
+          content: "",
+          version: 0,
+          parent_ids: [0],
+          created_at: "",
+          updated_at: "",
+        });
+        const state = get()["listQuestions"] || {};
+        state[id] = array;
+        set({ listQuestions: state });
+      },
 
-        {
-            name: "question",
-            }
-    )
-);
+      removeQuestion: (id: number, index: number) => {
+        const array = get()["listQuestions"][id] || [];
+        array.splice(index, 1);
+        const state = get()["listQuestions"] || {};
+        state[id] = array;
+        set({ listQuestions: state });
+      },
+    }),
+
+    {
+      name: "question",
+    }
+  )
+);