вопросы теперь в массиве

src/assets/icons/questionsPage/PointsIcon.tsx

@@ -15,6 +15,7 @@ export default function PointsIcon() {
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
+                cursor: "move"
             }}
         >
             <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">

src/pages/Questions/ButtonsOptions.tsx

@@ -8,7 +8,7 @@ import HideIcon from "../../assets/icons/questionsPage/hideIcon";
 import CopyIcon from "../../assets/icons/questionsPage/CopyIcon";
 import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
 import {useParams} from "react-router-dom";
-import {questionStore} from "@root/questions";
+import { questionStore, resetSomeField, removeQuestion } from "@root/questions";
 
 interface Props {
   switchState: string;
@@ -18,9 +18,9 @@ interface Props {
 
 export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) {
   const params = Number(useParams().quizId);
-  const {listQuestions, updateQuestionsList, createQuestion, removeQuestion, openedModalSettings, createOpenedModalSettings} = questionStore()
+  const {openedModalSettings} = questionStore()
   const openedModal = () => {
-    createOpenedModalSettings({openedModalSettings: "open"})
+    resetSomeField({openedModalSettings: "open"})
     console.log(openedModalSettings)
   }
   const theme = useTheme();
@@ -87,7 +87,7 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props)
         <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
           <CopyIcon color={"#4D4D4D"}/>
         </IconButton>
-        <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(params, totalIndex)}>
+        <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(totalIndex)}>
           <DeleteIcon color={"#4D4D4D"}/>
         </IconButton>
       </Box>

src/pages/Questions/ButtonsOptionsAndPict.tsx

@@ -9,7 +9,7 @@ import CopyIcon from "../../assets/icons/questionsPage/CopyIcon";
 import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
 import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
 import {useParams} from "react-router-dom";
-import {questionStore} from "@root/questions";
+import { questionStore, removeQuestion, resetSomeField} from "@root/questions";
 
 interface Props {
   switchState: string;
@@ -19,9 +19,9 @@ interface Props {
 
 export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }: Props) {
   const params = Number(useParams().quizId);
-  const {listQuestions, updateQuestionsList, createQuestion, removeQuestion, openedModalSettings, createOpenedModalSettings} = questionStore()
+  const {openedModalSettings} = questionStore()
   const openedModal = () => {
-    createOpenedModalSettings({openedModalSettings: "open"})
+    resetSomeField({openedModalSettings: "open"})
     console.log(openedModalSettings)
   }
   const theme = useTheme();
@@ -103,7 +103,7 @@ export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }:
         <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
           <CopyIcon color={"#4D4D4D"}/>
         </IconButton>
-        <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(params, totalIndex)}>
+        <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(totalIndex)}>
           <DeleteIcon color={"#4D4D4D"}/>
         </IconButton>
       </Box>

src/pages/Questions/QuestionPageCard.tsx

@@ -19,7 +19,7 @@ import SwitchQuestionsPage from "./SwitchQuestionsPage";
 import React, {useState} from "react";
 import DeleteIcon from "@icons/questionsPage/deleteIcon";
 import {useParams} from "react-router-dom";
-import {questionStore} from "@root/questions";
+import {questionStore, updateQuestionsList, removeQuestion} from "@root/questions";
 import CopyIcon from "@icons/questionsPage/CopyIcon";
 import CrossedEyeIcon from "@icons/CrossedEyeIcon";
 import HideIcon from "@icons/questionsPage/hideIcon";
@@ -36,11 +36,38 @@ import Page from "@icons/questionsPage/page";
 import RatingIcon from "@icons/questionsPage/rating";
 
 interface Props {
-    DeleteClick: () => void;
     totalIndex: number
 }
 
-export default function QuestionsPageCard({totalIndex, DeleteClick}: Props) {
+    const IconAndrom = (isExpanded:boolean, switchState:string) => {
+        switch (switchState) {
+            case 'variant':
+                return (<Answer color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
+            case 'images':
+                return (<OptionsPict color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
+            case 'varimg':
+                return (<OptionsAndPict color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
+            case 'emoji':
+                return (<Emoji color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
+            case 'text':
+                return (<Input color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
+            case 'select':
+                return (<DropDown color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
+            case 'date':
+                return (<Date color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
+            case 'number':
+                return (<Slider color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
+            case 'file':
+                return (<Download color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
+            case 'page':
+                return (<Page color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
+            case 'rating':
+                return (<RatingIcon color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
+            default:
+                return (<></>)
+        }
+    }
+export default function QuestionsPageCard({totalIndex}: Props) {
 
     function onDragStart(event: any) {
         event
@@ -50,49 +77,11 @@ export default function QuestionsPageCard({totalIndex, DeleteClick}: Props) {
 
 
     const theme = useTheme();
-    const params = Number(useParams().quizId);
+    const {listQuestions} = questionStore()
-    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
     const [isExpanded, setIsExpanded] = useState<boolean>(false);
-    const switchState = listQuestions[params][totalIndex].type
+    const switchState = listQuestions[totalIndex].type
-    const IconAndrom = () => {
+    console.log(listQuestions[totalIndex].type)
-        switch (switchState) {
+    console.log(totalIndex)
-            case 'variant':
-                return (<Answer color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
-                break;
-            case 'images':
-                return (<OptionsPict color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
-                break
-            case 'varimg':
-                return (<OptionsAndPict color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
-                break;
-            case 'emoji':
-                return (<Emoji color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
-                break;
-            case 'text':
-                return (<Input color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
-                break;
-            case 'select':
-                return (<DropDown color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
-                break;
-            case 'date':
-                return (<Date color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
-                break;
-            case 'number':
-                return (<Slider color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
-                break;
-            case 'file':
-                return (<Download color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
-                break;
-            case 'page':
-                return (<Page color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
-                break;
-            case 'rating':
-                return (<RatingIcon color={isExpanded ? "#9A9AAF" : "white"} sx={{height:"22px", width:"20px"}}/>);
-                break;
-            default:
-                return (<></>)
-        }
-    }
     return (
         <Paper
             draggable="true"
@@ -119,13 +108,13 @@ export default function QuestionsPageCard({totalIndex, DeleteClick}: Props) {
                         fullWidth
                         placeholder={"Заголовок вопроса"}
                         onChange={e => {
-                            updateQuestionsList(params, totalIndex, {title: e.target.value})
+                            updateQuestionsList(totalIndex, {title: e.target.value})
-                            console.log(listQuestions[params][totalIndex].title)
+                            console.log(listQuestions[totalIndex].title)
                         }}
                         InputProps={{
                             startAdornment: (
                                 <InputAdornment position="start">
-                                    {IconAndrom()}
+                                    {IconAndrom(isExpanded, switchState)}
                                 </InputAdornment>
                             ),
                         }}
@@ -179,7 +168,7 @@ export default function QuestionsPageCard({totalIndex, DeleteClick}: Props) {
 
                         />
                         <IconButton><CopyIcon color={"white"}/></IconButton>
-                        <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={DeleteClick}>
+                        <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(totalIndex)}>
                             <DeleteIcon color={"white"}/>
                         </IconButton>
                     </Box>

src/pages/Questions/QuestionsPage.tsx

@@ -6,13 +6,13 @@ import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
 import {quizStore} from "@root/quizes";
 import {useParams} from "react-router-dom";
 import QuestionsPageCard from "./QuestionPageCard";
-import {questionStore} from "@root/questions";
+import {questionStore, createQuestion} from "@root/questions";
-import QuizCard from "../createQuize/QuizCard";
+import QuestionsList from "./questionList";
 
 export default function QuestionsPage() {
     const {listQuizes, updateQuizesList} = quizStore();
     const params = Number(useParams().quizId);
-    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
+    const {listQuestions} = questionStore()
     const activeStep = listQuizes[params].step
     console.log(listQuestions)
     const handleNext = () => {
@@ -24,22 +24,6 @@ export default function QuestionsPage() {
         updateQuizesList(params, {step: result ? result : 1})
     };
 
-    function onDragOver(event: any) {
-        event.preventDefault();
-    }
-
-    function onDrop(event: any) {
-        const id = event
-            .dataTransfer
-            .getData('text');
-        const draggableElement = document.getElementById(id);
-        const dropzone = event.target;
-        dropzone.appendChild(draggableElement);
-        event
-            .dataTransfer
-            .clearData();
-    }
-
 
     const theme = useTheme();
   return (
@@ -54,15 +38,7 @@ export default function QuestionsPage() {
               textDecorationColor: theme.palette.brightPurple.main
           }}>Свернуть всё</Link>
       </Box>
-        <Box
+      <QuestionsList/>
-            onDragOver={onDragOver}
-            onDrop={onDrop}
-        >
-            {Object.values(listQuestions[params]).map((e, index) => (
-                    <QuestionsPageCard key={index} totalIndex={index} DeleteClick={() => removeQuestion(params,index)}/>
-                )
-            )}
-        </Box>
 
       <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
         <IconButton

src/pages/Questions/SwitchQuestionsPage.tsx

@@ -20,52 +20,41 @@ interface Props {
 
 export default function SwitchQuestionsPage ({totalIndex }: Props) {
     const params = Number(useParams().quizId);
-    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
+    const {listQuestions} = questionStore()
-    const switchState = listQuestions[params][totalIndex].type
+    const switchState = listQuestions[totalIndex].type
     switch (switchState) {
         case 'variant':
             return (<AnswerOptions totalIndex={totalIndex}/>);
-            break;
 
         case 'images':
             return (<OptionsPicture totalIndex={totalIndex}/>);
-            break;
 
         case 'varimg':
             return (<OptionsAndPicture totalIndex={totalIndex}/>);
-            break;
 
         case 'emoji':
             return (<Emoji totalIndex={totalIndex}/>);
-            break;
 
         case 'text':
             return (<OwnTextField totalIndex={totalIndex}/>);
-            break;
 
         case 'select':
             return (<DropDown totalIndex={totalIndex}/>);
-            break;
 
         case 'date':
             return (<DataOptions totalIndex={totalIndex}/>);
-            break;
 
         case 'number':
             return (<SliderOptions totalIndex={totalIndex}/>);
-            break;
 
         case 'file':
             return (<UploadFile totalIndex={totalIndex}/>);
-            break;
 
         case 'page':
             return (<PageOptions totalIndex={totalIndex}/>);
-            break;
 
         case 'rating':
             return (<RatingOptions totalIndex={totalIndex}/>);
-            break;
 
         default:
             return (<></>)

src/pages/Questions/TypeQuestions.tsx

@@ -13,7 +13,7 @@ import RatingIcon from "../../assets/icons/questionsPage/rating";
 import {Box, useTheme} from "@mui/material";
 import React from "react";
 import {useParams} from "react-router-dom";
-import {questionStore} from "@root/questions";
+import {questionStore, updateQuestionsList} from "@root/questions";
 
 interface Props {
     totalIndex: number
@@ -22,8 +22,8 @@ interface Props {
 export default function TypeQuestions({totalIndex }: Props) {
     const theme = useTheme()
     const params = Number(useParams().quizId);
-    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
+    const {listQuestions} = questionStore()
-    const switchState = listQuestions[params][totalIndex].type
+    const switchState = listQuestions[totalIndex].type
     const buttonTypeQuestions: { icon: JSX.Element; title: string; value: string }[] = [
         {
             icon: <Answer color={theme.palette.grey2.main}/>,
@@ -89,7 +89,7 @@ export default function TypeQuestions({totalIndex }: Props) {
                     key={title}
                     onClick={() => {
                         console.log(value)
-                        updateQuestionsList(params, totalIndex, {type: value})
+                        updateQuestionsList(totalIndex, {type: value})
                     }}
                     icon={icon}
                     text={title}

src/pages/Questions/answerOptions/AnswerOptions.tsx

@@ -5,7 +5,7 @@ import SwitchAnswerOptions from "./switchAnswerOptions";
 import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
 import QuestionsPageCard from "../QuestionPageCard";
 import {useParams} from "react-router-dom";
-import {questionStore} from "@root/questions";
+import { questionStore, updateQuestionsList } from "@root/questions";
 import PointsIcon from "@icons/questionsPage/PointsIcon";
 import DeleteIcon from "@icons/questionsPage/deleteIcon";
 import MessageIcon from "@icons/messagIcon";
@@ -20,8 +20,8 @@ interface Props {
 export default function AnswerOptions({totalIndex}: Props) {
     const params = Number(useParams().quizId);
 
-    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
+    const {listQuestions} = questionStore()
-    const Answer = listQuestions[params][totalIndex].content.variants
+    const Answer = listQuestions[totalIndex].content.variants
     console.log(Answer)
     const theme = useTheme();
     const [switchState, setSwitchState] = React.useState('setting');
@@ -74,9 +74,9 @@ export default function AnswerOptions({totalIndex}: Props) {
                                         onChange={(e) => {
                                             const answerNew = Answer
                                             answerNew[index].answer = e.target.value
-                                            let clonContent = listQuestions[params][totalIndex].content
+                                            let clonContent = listQuestions[totalIndex].content
                                             clonContent.variants = answerNew
-                                            updateQuestionsList(params, totalIndex, {content: clonContent})}}
+                                            updateQuestionsList(totalIndex, {content: clonContent})}}
                                         InputProps={{
                                             startAdornment: (
                                                 <InputAdornment position="start">
@@ -102,18 +102,18 @@ export default function AnswerOptions({totalIndex}: Props) {
                                                                           onChange={(e) => {
                                                                               const answerNew = Answer
                                                                               answerNew[index].hints = e.target.value
-                                                                              let clonContent = listQuestions[params][totalIndex].content
+                                                                              let clonContent = listQuestions[totalIndex].content
                                                                               clonContent.variants = answerNew
-                                                                              updateQuestionsList(params, totalIndex, {content: clonContent})}}
+                                                                              updateQuestionsList(totalIndex, {content: clonContent})}}
                                                         />
                                                     </Popover>
                                                     <IconButton
                                                         onClick={() => {
                                                             const answerNew = Answer
                                                             answerNew.splice(index, 1)
-                                                            let clonContent = listQuestions[params][totalIndex].content
+                                                            let clonContent = listQuestions[totalIndex].content
                                                             clonContent.variants = answerNew
-                                                            updateQuestionsList(params, totalIndex, {content: clonContent})
+                                                            updateQuestionsList(totalIndex, {content: clonContent})
                                                         }}
                                                     >
                                                         <DeleteIcon color={theme.palette.grey2.main}/>
@@ -152,9 +152,9 @@ export default function AnswerOptions({totalIndex}: Props) {
                          onClick={() => {
                              const answerNew = Answer
                              answerNew.push({answer: "",})
-                             let clonContent = listQuestions[params][totalIndex].content
+                             let clonContent = listQuestions[totalIndex].content
                              clonContent.variants = answerNew
-                             updateQuestionsList(params, totalIndex, {content: clonContent})
+                             updateQuestionsList(totalIndex, {content: clonContent})
                          }}
                     >
                         Добавьте ответ

src/pages/Questions/answerOptions/responseSettings.tsx

@@ -4,7 +4,7 @@ import InfoIcon from "../../../assets/icons/InfoIcon";
 import * as React from "react";
 import CustomTextField from "@ui_kit/CustomTextField";
 import {useParams} from "react-router-dom";
-import {questionStore} from "@root/questions";
+import {questionStore, updateQuestionsList} from "@root/questions";
 
 interface Props {
     totalIndex: number,
@@ -12,7 +12,7 @@ interface Props {
 
 export default function ResponseSettings({totalIndex}: Props) {
     const params = Number(useParams().quizId);
-    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
+    const {listQuestions} = questionStore()
     const [checked, setChecked] = React.useState([true, false]);
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setChecked([checked[0], event.target.checked, ]);
@@ -24,34 +24,34 @@ export default function ResponseSettings({totalIndex}: Props) {
                 <Typography>Настройки ответов</Typography>
                 <CustomCheckbox label={'Длинный текстовый ответ'}/>
                 <CustomCheckbox label={'Можно несколько'}
-                                checked={listQuestions[params][totalIndex].content.multi}
+                                checked={listQuestions[totalIndex].content.multi}
                                 handleChange={(e) => {
-                                    let clonContent = listQuestions[params][totalIndex].content
+                                    let clonContent = listQuestions[totalIndex].content
                                     clonContent.multi = e.target.checked
-                                    updateQuestionsList(params, totalIndex, {content: clonContent})
+                                    updateQuestionsList( totalIndex, {content: clonContent})
                                 }}
                 />
                 <CustomCheckbox label={'Вариант "свой ответ"'}
-                                checked={listQuestions[params][totalIndex].content.own}
+                                checked={listQuestions[totalIndex].content.own}
                                 handleChange={(e) => {
-                                    let clonContent = listQuestions[params][totalIndex].content
+                                    let clonContent = listQuestions[totalIndex].content
                                     clonContent.own = e.target.checked
-                                    updateQuestionsList(params, totalIndex, {content: clonContent})
+                                    updateQuestionsList(totalIndex, {content: clonContent})
                                 }}
                 />
             </Box>
             <Box sx={{padding: '20px', display: 'flex', flexDirection: "column"}}>
                 <Typography>Настройки вопросов</Typography>
-                <CustomCheckbox label={'Необязательный вопрос'} checked={!(listQuestions[params][totalIndex].required)}
+                <CustomCheckbox label={'Необязательный вопрос'} checked={!(listQuestions[totalIndex].required)}
                                 handleChange={(e) => {
-                                    updateQuestionsList(params, totalIndex, {required: !e.target.checked})
+                                    updateQuestionsList(totalIndex, {required: !e.target.checked})
-                                    console.log(listQuestions[params][totalIndex].required)}}/>
+                                    console.log(listQuestions[totalIndex].required)}}/>
                 <Box sx={{display: "flex"}}>
                     <CustomCheckbox label={'Внутреннее название вопроса'} checked={checked[1]} handleChange={handleChange}/> <InfoIcon />
                 </Box>
                 {checked[1] ?
-                    <CustomTextField placeholder={"Развёрнутое описание вопроса"} text={listQuestions[params][totalIndex].description}
+                    <CustomTextField placeholder={"Развёрнутое описание вопроса"} text={listQuestions[totalIndex].description}
-                                     onChange={e => updateQuestionsList(params, totalIndex, {description: e.target.value})}/>
+                                     onChange={e => updateQuestionsList(totalIndex, {description: e.target.value})}/>
                     :
                     <></>
                 }

src/pages/Questions/branchingQuestions.tsx

@@ -21,16 +21,15 @@ import { useState } from "react";
 import DeleteIcon from "@icons/questionsPage/deleteIcon";
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
-import {questionStore} from "@root/questions";
+import { questionStore, resetSomeField } from "@root/questions";
 
 export default function BranchingQuestions() {
-    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion, openedModalSettings, createOpenedModalSettings} = questionStore()
+    const {openedModalSettings} = questionStore()
     const theme = useTheme();
 
   const [condition, setCondition] = useState<boolean>(false);
   const handleClose = () => {
-      createOpenedModalSettings({openedModalSettings: ""})
+    resetSomeField({openedModalSettings: ""})
-      console.log(openedModalSettings)
 
   }
   const [display, setDisplay] = React.useState("1");

src/pages/Questions/questionList.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import {useParams} from "react-router-dom";
+import {Box} from "@mui/material";
+import QuestionsPageCard from "./QuestionPageCard";
+import {quizStore} from "@root/quizes";
+import {questionStore, removeQuestion} from "@root/questions";
+
+export default () => {
+    const quizId = Number(useParams().quizId);
+    const {listQuizes, updateQuizesList} = quizStore();
+    const {listQuestions} = questionStore()
+
+    function onDragOver(event: any) {
+        event.preventDefault();
+    }
+
+    function onDrop(event: any) {
+        const id = event
+            .dataTransfer
+            .getData('text');
+        const draggableElement = document.getElementById(id);
+        const dropzone = event.target;
+        dropzone.appendChild(draggableElement);
+        event
+            .dataTransfer
+            .clearData();
+    }
+    return (
+        <Box
+            onDragOver={onDragOver}
+            onDrop={onDrop}
+        >
+            {console.log(listQuestions)}
+            {listQuestions.map((e:any, index:number) => (
+                    <QuestionsPageCard key={e.id} totalIndex={index}/>
+                )
+            )}
+        </Box>
+    )
+}

src/pages/startPage/StartPage.tsx

@@ -12,7 +12,7 @@ import {quizStore} from "@root/quizes";
 import {useParams} from "react-router-dom";
 
 
-export default function StartPage() {
+export default function     StartPage() {
     const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
     const params = Number(useParams().quizId);
     const activeStep = listQuizes[params].step

src/pages/startPage/StartPageSettings.tsx

@@ -32,7 +32,7 @@ import DropZone from "./dropZone";
 import Extra from "./extra";
 import AlignCenterIcon from "@icons/AlignCenterIcon";
 import DropFav from "./dropfavicon";
-import {questionStore} from "@root/questions";
+import {createQuestion} from "@root/questions";
 
 interface HandleNext {
     handleNext: () => void;
@@ -50,7 +50,6 @@ type AlignType = "left" | "right" | "center";
 
 export default function StartPageSettings({ handleNext }: HandleNext) {
     const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
-    const {listQuestions, updateQuestionsList, createQuestion} = questionStore()
     const params = Number(useParams().quizId);
     const theme = useTheme();
     const designType = listQuizes[params].startpage

src/stores/questions.ts

@@ -1,90 +1,106 @@
 import {create} from "zustand";
 import {persist} from "zustand/middleware";
 
+
+type Variants = {
+    answer: string;
+    answerLong: string;
+    hints: string;
+}
+
+interface Question {
+    id: number;
+    title: string;
+    description: string;
+    type: string;
+    required: true,
+    deleted: true,
+    page: number;
+    content: {
+        variants: Variants[];
+        own: boolean;
+        multi: boolean;
+    },
+    version: number;
+    parent_ids: number[];
+    created_at: string;
+    updated_at: string;
+}
+
 interface QuestionStore {
     listQuestions: any;
-    updateQuestionsList: (id: number, index: number, values: unknown) => void;
+    openedModalSettings: string;
-    removeQuestion: any;
-    createQuestion: (id: number) => void;
-    openedModalSettings: any
-    createOpenedModalSettings: (data: any) => void;
 }
 
 export const questionStore = create<QuestionStore>()(
 
     persist(
-        (set, get) => ({
+        () => ({
-            listQuestions: {
+            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});
-            },
-
-            createQuestion:(id: number) => {
-                const idQ = getRandom(1000000, 10000000)
-                const array = get()["listQuestions"][id] || [];
-                array.push(
-                    {
-                        "id": idQ,
-                        "title": "",
-                        "description": "",
-                        "type": "",
-                        "required": true,
-                        "deleted": true,
-                        "page": 0,
-                        "content": {
-                            variants: [
-                                {
-                                    answer: "",
-                                    answerLong: "",
-                                    hints: ""
-                                }
-                            ],
-                            own: true,
-                            multi: true
-                        },
-                        "version": 0,
-                        "parent_ids": [
-                            0
-                        ],
-                        "created_at": "",
-                        "updated_at": ""
-                    }
-                )
-                const state = get()["listQuestions"] || {};
-                state[id] = array
-                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});
-            },
-
             openedModalSettings: "",
-
+        }),
-            createOpenedModalSettings: (data:any) => {
-                const oldState = get()
-                const newStore = {...oldState, ...data}
-                set(newStore)
-            }
-                }),
 
         {
             name: "question",
             }
     )
 );
+export const updateQuestionsList = (index: number, data: any) => {
+    const array = [...questionStore.getState()["listQuestions"]]
+    array.splice(index, 0, data)
+    questionStore.setState({listQuestions: array});
+}
+
+export const createQuestion = (id: number) => {
+    const idQ = getRandom(1000000, 10000000)
+    const newData = [...questionStore.getState()["listQuestions"]]//пересоздание массива
+    newData.push({
+        "id": idQ,
+        "title": "",
+        "description": "",
+        "type": "",
+        "required": true,
+        "deleted": true,
+        "page": 0,
+        "content": {
+            variants: [
+                {
+                    answer: "",
+                    answerLong: "",
+                    hints: ""
+                }
+            ],
+            own: true,
+            multi: true
+        },
+        "version": 0,
+        "parent_ids": [
+            0
+        ],
+        "created_at": "",
+        "updated_at": ""
+    })
+    questionStore.setState({listQuestions: newData});
+}
+
+export const removeQuestion = (index: number) => {
+    const array = [...questionStore.getState()["listQuestions"]]
+    array.splice(index, 1)
+    questionStore.setState({listQuestions: array})
+}
+
+export const resetSomeField = (data:any) => {questionStore.setState(data)}
+
+export const findQuestionById = (id_question: number):(null | any) => {
+    let found = null;
+    questionStore.getState()["listQuestions"].some((quiz:any, index:number) => {
+        if (quiz.id_question === id_question) {
+            found = {quiz, index}
+            return true
+        }
+    })
+    return found;
+}
 
 function getRandom(min: number, max: number) {
     min = Math.ceil(min);

src/ui_kit/switchStepPages.tsx

@@ -18,28 +18,20 @@ export default function SwitchStepPages({activeStep = 1, handleNext }: Props) {
     switch (activeStep) {
         case 1:
             return (<StepOne handleNext={handleNext}/>);
-            break;
         case 2:
             return (<Steptwo handleNext={handleNext}/>);
-            break
         case 3:
             return (<StartPageSettings handleNext={handleNext}/>);
-            break;
         case 4:
             return (<QuestionsPage/>);
-            break;
         case 5:
             return (<Result/>);
-            break;
         case 6:
             return (<Setting/>);
-            break;
         case 7:
             return (<ContactFormPage/>);
-            break;
         case 8:
             return (<InstallQuiz/>);
-            break;
         default:
             return (<></>)
     }