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,62 +1,78 @@
-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;
+  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: {
+      listQuestions: {},
+      setQuestions: (id: number, questions: Question[]) => {
+        const listQuestions = get()["listQuestions"];
+
+        set({ listQuestions: { ...listQuestions, [id]: questions } });
       },
+
       updateQuestionsList: (id: number, index: number, values: any) => {
         const array = get()["listQuestions"][id] || [];
         array[index] = {
           ...array[index],
-                    ...values
+          ...values,
         };
         const state = get()["listQuestions"] || {};
-                state[id] = array
-                set({listQuestions: state});
+        state[id] = array;
+        console.log(state);
+        set({ listQuestions: state });
       },
 
-            createQuestion:(id: number) => {
+      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": ""
-                    }
-                )
+        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});
+        state[id] = array;
+        set({ listQuestions: state });
       },
 
-            removeQuestion: (id:number, index: number) => {
+      removeQuestion: (id: number, index: number) => {
         const array = get()["listQuestions"][id] || [];
-                array.splice(index, 1)
+        array.splice(index, 1);
         const state = get()["listQuestions"] || {};
-                state[id] = array
-                set({listQuestions: state});
+        state[id] = array;
+        set({ listQuestions: state });
       },
     }),