diff --git a/src/pages/Questions/DraggableList/index.tsx b/src/pages/Questions/DraggableList/index.tsx index 627eb65a..16aaa7d6 100644 --- a/src/pages/Questions/DraggableList/index.tsx +++ b/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) => { {(provided, snapshot) => ( - {listItems.map(({ onDelete }, index) => ( + {listQuestions[quizId].map((_, index) => ( removeQuestion(quizId, index)} activePlus={snapshot.isDraggingOver} /> ))} diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx index 7ca276d6..1c3d453b 100755 --- a/src/pages/Questions/QuestionsPage.tsx +++ b/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() { Свернуть всё - ({ - ...item, - onDelete: () => removeQuestion(params, index), - }) - )} - /> + void; - removeQuestion: any; - createQuestion: (id: number) => void; + listQuestions: Record; + setQuestions: (id: number, questions: Question[]) => void; + updateQuestionsList: (id: number, index: number, values: unknown) => void; + removeQuestion: any; + createQuestion: (id: number) => void; } export const questionStore = create()( + 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", - } - ) -); \ No newline at end of file + 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", + } + ) +);