работа с стором вопросов

src/index.tsx

@@ -22,10 +22,7 @@ const root = ReactDOM.createRoot(
 );
 
 const routeslink: {path: string; page: JSX.Element; header: boolean; sidebar: boolean} [] = [
-    {path: "/list", page: <FirstQuiz/>, header: false, sidebar: false},
+    {path: "/list", page: <MyQuizzesFull/>, header: false, sidebar: false},
-    {path: "/list-empty", page: <FirstQuiz/>, header: false, sidebar: false},
-    {path: "/list-full", page: <MyQuizzesFull/>, header: false, sidebar: false},
-    {path: "/list-short", page: <MyQuizzes/>, header: false, sidebar: false},
     {path: "/questions/:quizId", page: <QuestionsPage/>, header: true, sidebar: true},
     {path: "/contacts", page: <ContactFormPage/>, header: true, sidebar: true},
     {path: "/result", page: <Result/>, header: true, sidebar: true},
@@ -41,7 +38,7 @@ root.render(
             {routeslink.map((e,i) =>(
                 <Route  key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar}/>} />
             ))}
-            <Route path="/create-quize/:quizId" element={<StartPage/>} />
+            <Route path="/quize-setting/:quizId" element={<StartPage/>} />
         </Routes>
     </BrowserRouter>
     </ThemeProvider>

src/pages/Questions/ButtonsOptions.tsx

@@ -7,13 +7,18 @@ import { Box, IconButton, useTheme } from "@mui/material";
 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";
 
 interface Props {
   switchState: string;
   SSHC: (data: string) => void;
+  totalIndex: number
 }
 
-export default function ButtonsOptions({ SSHC, switchState }: Props) {
+export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) {
+  const params = Number(useParams().quizId);
+  const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
   const theme = useTheme();
   const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [
     {
@@ -76,7 +81,7 @@ export default function ButtonsOptions({ SSHC, switchState }: Props) {
         <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
           <CopyIcon />
         </IconButton>
-        <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
+        <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(params, totalIndex)}>
           <DeleteIcon />
         </IconButton>
       </Box>

src/pages/Questions/ButtonsOptionsAndPict.tsx

@@ -8,13 +8,18 @@ import HideIcon from "../../assets/icons/questionsPage/hideIcon";
 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";
 
 interface Props {
   switchState: string;
   SSHC: (data: string) => void;
+  totalIndex: number
 }
 
-export default function ButtonsOptionsAndPict({ SSHC, switchState }: Props) {
+export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }: Props) {
+  const params = Number(useParams().quizId);
+  const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
   const theme = useTheme();
   return (
     <Box
@@ -92,7 +97,7 @@ export default function ButtonsOptionsAndPict({ SSHC, switchState }: Props) {
         <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
           <CopyIcon />
         </IconButton>
-        <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
+        <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(params, totalIndex)}>
           <DeleteIcon />
         </IconButton>
       </Box>

src/pages/Questions/DataOptions/DataOptions.tsx

@@ -7,7 +7,11 @@ import SelectableButton from "@ui_kit/SelectableButton";
 
 type dataType = "calendar" | "mask";
 
-export default function DataOptions() {
+interface Props{
+    totalIndex: number
+}
+
+export default function DataOptions({totalIndex}: Props) {
     const theme = useTheme();
     const [switchState, setSwitchState] = React.useState('setting');
     const SSHC = (data: string) => {
@@ -45,7 +49,7 @@ export default function DataOptions() {
                     <InfoIcon/>
                 </Box>
             </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC}/>
+            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
             <SwitchData switchState={switchState}/>
         </>
     )

src/pages/Questions/DropDown/DropDown.tsx

@@ -4,8 +4,12 @@ import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
 import SwitchDropDown from "./switchDropDown";
 import ButtonsOptions from "../ButtonsOptions";
 
+interface Props {
+    totalIndex: number
+}
 
-export default function DropDown() {
+
+export default function DropDown({totalIndex}: Props) {
     const theme = useTheme();
     const [switchState, setSwitchState] = React.useState('setting');
 
@@ -49,7 +53,7 @@ export default function DropDown() {
                     <EnterIcon/>
                 </Box>
             </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC}/>
+            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
             <SwitchDropDown switchState={switchState}/>
         </>
     )

src/pages/Questions/Emoji/Emoji.tsx

@@ -5,7 +5,10 @@ import SwitchEmoji from "./switchEmoji";
 import React from "react";
 import AddEmoji from "../../../assets/icons/questionsPage/addEmoji";
 
-export default function Emoji() {
+interface Props{
+    totalIndex: number
+}
+export default function Emoji({totalIndex}: Props) {
     const theme = useTheme();
     const [switchState, setSwitchState] = React.useState('setting');
     const SSHC = (data: string) => {
@@ -51,7 +54,7 @@ export default function Emoji() {
                     <EnterIcon/>
                 </Box>
             </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC}/>
+            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
             <SwitchEmoji switchState={switchState}/>
         </>
     )

src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx

@@ -5,7 +5,11 @@ import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
 import SwitchOptionsAndPict from "./switchOptionsAndPict";
 import React from "react";
 
-export default function OptionsAndPicture() {
+interface Props {
+    totalIndex: number
+}
+
+export default function OptionsAndPicture({totalIndex}: Props) {
     const theme = useTheme();
     const [switchState, setSwitchState] = React.useState('setting');
     const SSHC = (data: string) => {
@@ -51,7 +55,7 @@ return (
                 <EnterIcon/>
             </Box>
         </Box>
-        <ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC}/>
+        <ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
         <SwitchOptionsAndPict switchState={switchState}/>
     </>
 )

src/pages/Questions/OptionsPicture/OptionsPicture.tsx

@@ -4,8 +4,10 @@ import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
 import AddImage from "../../../assets/icons/questionsPage/addImage";
 import ButtonsOptions from "../ButtonsOptions";
 import SwitchAnswerOptionsPict from "./switchOptionsPict";
-
+ interface Props {
-export default function OptionsPicture() {
+     totalIndex: number
+ }
+export default function OptionsPicture({totalIndex}: Props) {
     const theme = useTheme();
     const [switchState, setSwitchState] = React.useState('setting');
     // const [addInput, setAddInput] = React.useState([
@@ -62,7 +64,7 @@ export default function OptionsPicture() {
                     <EnterIcon/>
                 </Box>
             </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC}/>
+            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
             <SwitchAnswerOptionsPict switchState={switchState}/>
         </>
     )

src/pages/Questions/OwnTextField/OwnTextField.tsx

@@ -5,7 +5,10 @@ import React from "react";
 import CustomTextField from "@ui_kit/CustomTextField";
 import InfoIcon from "../../../assets/icons/InfoIcon";
 
-export default function OwnTextField() {
+interface Props {
+    totalIndex: number
+}
+export default function OwnTextField({totalIndex}: Props) {
     const theme = useTheme();
     const [switchState, setSwitchState] = React.useState('setting');
     const SSHC = (data: string) => {
@@ -33,7 +36,7 @@ export default function OwnTextField() {
                     <InfoIcon/>
                 </Box>
             </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC}/>
+            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
             <SwitchTextField switchState={switchState}/>
         </>
     )

src/pages/Questions/PageOptions/PageOptions.tsx

@@ -8,9 +8,10 @@ import SwitchPageOptions from "./switchPageOptions";
 
 type Props = {
   disableInput?: boolean;
+  totalIndex: number
 };
 
-export default function PageOptions({ disableInput }: Props) {
+export default function PageOptions({ disableInput, totalIndex }: Props) {
   const theme = useTheme();
   const [switchState, setSwitchState] = React.useState("setting");
   const SSHC = (data: string) => {
@@ -58,7 +59,7 @@ export default function PageOptions({ disableInput }: Props) {
           </Typography>
         </Box>
       </Box>
-      <ButtonsOptions switchState={switchState} SSHC={SSHC} />
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
       <SwitchPageOptions switchState={switchState} />
     </>
   );

src/pages/Questions/QuestionPageCard.tsx

@@ -1,38 +1,58 @@
 import {Box, IconButton, Paper} from "@mui/material";
 import CustomTextField from "@ui_kit/CustomTextField";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import OneIcon from "@icons/questionsPage/OneIcon";
 import PointsIcon from "@icons/questionsPage/PointsIcon";
 import TypeQuestions from "./TypeQuestions";
 import SwitchQuestionsPage from "./SwitchQuestionsPage";
-import React from "react";
+import React, {useState} from "react";
+import DeleteIcon from "@icons/questionsPage/deleteIcon";
+import {useParams} from "react-router-dom";
+import {questionStore} from "@root/questions";
 
 interface Props {
     switchState: string;
     SSHC: (data: string) => void;
+    DeleteClick: () => void;
+    totalIndex: number
 }
 
-export default function QuestionsPageCard({ SSHC, switchState }: Props) {
+export default function QuestionsPageCard({ SSHC, switchState, totalIndex }: Props) {
+    const params = Number(useParams().quizId);
+    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
+    const [isExpanded, setIsExpanded] = useState<boolean>(false);
     return (
-        <Paper sx={{ maxWidth: "796px", width: "100%", borderRadius: "12px", margin: "20px 0" }}>
+        <Paper sx={{ maxWidth: "796px", width: "100%", borderRadius: "12px", margin: "20px 0", backgroundColor: isExpanded ? "white" : "#333647" }}>
             <Box
                 sx={{ width: "100%", maxWidth: "760px", display: "flex", alignItems: "center", gap: "10px", padding: "20px" }}
             >
-                <CustomTextField placeholder="Заголовок вопроса" text={""} />
+                <CustomTextField placeholder="Заголовок вопроса" text={""}
-                <IconButton>
+                                 onChange={e => {updateQuestionsList(params, totalIndex, {title: e.target.value})
+                                     console.log(listQuestions[params][totalIndex].title)
+                                 }
+                                 }/>
+                <IconButton onClick={() => setIsExpanded((prev) => !prev)}>
                     {" "}
-                    <ExpandMoreIcon />{" "}
+                    {isExpanded ?
+                    <ExpandMoreIcon />
+                    :<ExpandLessIcon  fill="#7E2AEA"/>
+                    }
                 </IconButton>
                 <OneIcon />
                 <PointsIcon />
+                <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
+                    <DeleteIcon />
+                </IconButton>
             </Box>
-
+            {isExpanded && (
-            <Box sx={{ display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px" }}>
+                <Box sx={{display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px"}}>
-                {switchState.length === 0 ?
+                    {switchState.length === 0 ?
-                    <TypeQuestions switchState={switchState} SSHC={SSHC}/>
+                        <TypeQuestions switchState={switchState} SSHC={SSHC}/>
-                    :
+                        :
-                    <SwitchQuestionsPage switchState={switchState}/>}
+                        <SwitchQuestionsPage switchState={switchState} totalIndex={totalIndex}/>}
-            </Box>
+                </Box>)
+            }
         </Paper>
 
     )

src/pages/Questions/QuestionsPage.tsx

@@ -12,9 +12,9 @@ import QuizCard from "../createQuize/QuizCard";
 export default function QuestionsPage() {
     const {listQuizes, updateQuizesList} = quizStore();
     const params = Number(useParams().quizId);
-    const {listQuestions, updateQuestionsList, removeQuestion, createBlankQuestions} = questionStore()
+    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
     const activeStep = listQuizes[params].step
-
+    console.log(listQuestions)
     const handleNext = () => {
         updateQuizesList(params, {step: listQuizes[params].step + 1})
     }
@@ -32,7 +32,7 @@ export default function QuestionsPage() {
   const theme = useTheme();
   return (
     <>
-      <Stepper activeStep={activeStep} desc={"Задайте вопросы"} />
+      {/*<Stepper activeStep={activeStep} desc={"Задайте вопросы"} />*/}
       <Box sx={{ maxWidth: "796px", width: "100%", display: "flex", justifyContent: "space-between", margin: "60px 0 40px 0",}}>
           <Typography variant={"h5"}>Заголовок квиза</Typography>
           <Link sx={{
@@ -43,8 +43,8 @@ export default function QuestionsPage() {
           }}>Свернуть всё</Link>
       </Box>
 
-        {Object.values(listQuestions).map((e, i) => (
+        {Object.values(listQuestions[params]).map((e, index) => (
-            <QuestionsPageCard switchState={switchState} SSHC={SSHC}/>
+            <QuestionsPageCard key={index} totalIndex={index} switchState={switchState} SSHC={SSHC} DeleteClick={() => removeQuestion(params,index)}/>
             )
         )}
 
@@ -52,7 +52,7 @@ export default function QuestionsPage() {
 
       <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
         <IconButton
-            onClick={() => {createBlankQuestions()
+            onClick={() => {createQuestion(params)
             console.log(listQuestions)
             }}
         >

src/pages/Questions/RatingOptions/RatingOptions.tsx

@@ -5,8 +5,11 @@ import Rating from '@mui/material/Rating';
 import RatingStar from "../../../assets/icons/questionsPage/ratingStar";
 import SwitchRating from "./switchRating";
 
+interface Props{
+    totalIndex: number
+}
 
-export default function RatingOptions() {
+export default function RatingOptions({totalIndex}: Props) {
     const theme = useTheme();
     const [switchState, setSwitchState] = React.useState('setting');
     const SSHC = (data: string) => {
@@ -37,7 +40,7 @@ export default function RatingOptions() {
                     <Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Позитивно</Typography>
                 </Box>
             </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC}/>
+            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
             <SwitchRating switchState={switchState}/>
         </>
     )

src/pages/Questions/SliderOptions/SliderOptions.tsx

@@ -4,7 +4,11 @@ import React from "react";
 import CustomTextField from "@ui_kit/CustomTextField";
 import SwitchSlider from "./switchSlider";
 
-export default function SliderOptions() {
+interface Props{
+    totalIndex: number
+}
+
+export default function SliderOptions({totalIndex}: Props) {
     const theme = useTheme();
     const [switchState, setSwitchState] = React.useState('setting');
     const SSHC = (data: string) => {
@@ -43,7 +47,7 @@ export default function SliderOptions() {
 
                 </Box>
             </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC}/>
+            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
             <SwitchSlider switchState={switchState}/>
         </>
     )

src/pages/Questions/SwitchQuestionsPage.tsx

@@ -14,52 +14,54 @@ import UploadFile from "./UploadFile/UploadFile";
 
 interface Props {
     switchState: string,
+    // DeleteClick: () => void;
+    totalIndex: number,
 }
 
-export default function SwitchQuestionsPage ({switchState = '' }: Props) {
+export default function SwitchQuestionsPage ({switchState = '', totalIndex }: Props) {
     switch (switchState) {
         case 'answer':
-            return (<AnswerOptions />);
+            return (<AnswerOptions totalIndex={totalIndex}/>);
             break;
 
         case 'answerpict':
-            return (<OptionsPicture />);
+            return (<OptionsPicture totalIndex={totalIndex}/>);
             break;
 
         case 'answerandpict':
-            return (<OptionsAndPicture />);
+            return (<OptionsAndPicture totalIndex={totalIndex}/>);
             break;
 
         case 'emoji':
-            return (<Emoji />);
+            return (<Emoji totalIndex={totalIndex}/>);
             break;
 
         case 'textfield':
-            return (<OwnTextField />);
+            return (<OwnTextField totalIndex={totalIndex}/>);
             break;
 
         case 'dropdown':
-            return (<DropDown />);
+            return (<DropDown totalIndex={totalIndex}/>);
             break;
 
         case 'date':
-            return (<DataOptions />);
+            return (<DataOptions totalIndex={totalIndex}/>);
             break;
 
         case 'slider':
-            return (<SliderOptions />);
+            return (<SliderOptions totalIndex={totalIndex}/>);
             break;
 
         case 'uploader':
-            return (<UploadFile />);
+            return (<UploadFile totalIndex={totalIndex}/>);
             break;
 
         case 'page':
-            return (<PageOptions />);
+            return (<PageOptions totalIndex={totalIndex}/>);
             break;
 
         case 'rating':
-            return (<RatingOptions />);
+            return (<RatingOptions totalIndex={totalIndex}/>);
             break;
 
         default:

src/pages/Questions/UploadFile/UploadFile.tsx

@@ -5,7 +5,11 @@ import InfoIcon from "../../../assets/icons/InfoIcon";
 import ArrowDown from "../../../assets/icons/ArrowDownIcon";
 import SwitchUpload from "./switchUpload";
 
-export default function UploadFile() {
+interface Props{
+    totalIndex: number
+}
+
+export default function UploadFile({totalIndex}: Props) {
     const theme = useTheme();
     const [switchState, setSwitchState] = React.useState('setting');
     const SSHC = (data: string) => {
@@ -122,7 +126,7 @@ export default function UploadFile() {
                     <InfoIcon/>
                 </Box>
             </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC}/>
+            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
             <SwitchUpload switchState={switchState}/>
         </>
     )

src/pages/Questions/answerOptions/AnswerOptions.tsx

@@ -5,7 +5,12 @@ import SwitchAnswerOptions from "./switchAnswerOptions";
 import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
 
 
-export default function AnswerOptions() {
+interface Props {
+    totalIndex: number,
+}
+
+
+export default function AnswerOptions({totalIndex}: Props) {
     const theme = useTheme();
     const [switchState, setSwitchState] = React.useState('setting');
     const SSHC = (data: string) => {
@@ -48,7 +53,7 @@ export default function AnswerOptions() {
                     <EnterIcon/>
                 </Box>
             </Box>
-            <ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC}/>
+            <ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
             <SwitchAnswerOptions switchState={switchState}/>
         </>
     )

src/pages/createQuize/FirstQuiz.tsx

@@ -35,7 +35,7 @@ export default function FirstQuiz() {
       <Button
         variant="contained"
         onClick={() => {
-            navigate(`/create-quize/${createBlank()}`);
+            navigate(`/quize-setting/${createBlank()}`);
         }}
       >
         Создать +

src/pages/createQuize/MyQuizzesFull.tsx

@@ -40,7 +40,7 @@ export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
                                 variant="contained"
                                 sx={{padding: "10px 47px"}}
                                 onClick={() => {
-                                    navigate(`/create-quize/${createBlank()}`);
+                                    navigate(`/quize-setting/${createBlank()}`);
                                 }}
                             >Создать +</Button>
                         </Box>
@@ -62,7 +62,7 @@ export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
                                                   removeQuiz(e.id)
                                               }}
                                               onClickEdit={() =>
-                                                  navigate(`/create-quize/${e.id}`)
+                                                  navigate(`/quize-setting/${e.id}`)
                                               }
                                     />
                                 )

src/pages/startPage/StartPage.tsx

@@ -1,5 +1,5 @@
 import Stepper from '@ui_kit/Stepper';
-import SwitchStepPages from "./switchStepPages";
+import SwitchStepPages from "@ui_kit/switchStepPages";
 import React from "react";
 import PenaLogo from "@ui_kit/PenaLogo";
 import {Box, Button, Container, FormControl, IconButton, TextField, useTheme} from "@mui/material";

src/pages/startPage/StartPageSettings.tsx

@@ -32,6 +32,7 @@ import DropZone from "./dropZone";
 import Extra from "./extra";
 import AlignCenterIcon from "@icons/AlignCenterIcon";
 import DropFav from "./dropfavicon";
+import {questionStore} from "@root/questions";
 
 interface HandleNext {
     handleNext: () => void;
@@ -49,8 +50,8 @@ 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 navigate = useNavigate()
     const theme = useTheme();
     const designType = listQuizes[params].startpage
     const StartPageClone = listQuizes[params]
@@ -443,7 +444,7 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
                         SPageClone.startpage.background.video = "https://youtu.be/dbaPkCiLPKQ"
                         updateQuizesList(params, {config: SPageClone })
                         handleNext()
-                        navigate(`/questions/${params}`)
+                        createQuestion(params)
                     }}
                 >Настроить вопросы</Button>
             </Box>

src/stores/questions.ts

@@ -4,10 +4,10 @@ import {quizStore} from "@root/quizes";
 import {useParams} from "react-router-dom";
 
 interface QuestionStore {
-    listQuestions: { [key: number]: any};
+    listQuestions: any;
-    updateQuestionsList: (id: number, values: unknown) => void;
+    updateQuestionsList: (id: number, index: number, values: unknown) => void;
-    removeQuestion: (id: number) => void;
+    removeQuestion: any;
-    createBlankQuestions: () => void;
+    createQuestion: (id: number) => void;
 }
 
 export const questionStore = create<QuestionStore>()(
@@ -15,36 +15,42 @@ export const questionStore = create<QuestionStore>()(
     persist(
         (set, get) => ({
             listQuestions: {
+            //     1871018: [
+            //     {
+            //         "title": "",
+            //         "description": "",
+            //         "type": "",
+            //         "required": true,
+            //         "deleted": true,
+            //         "page": 0,
+            //         "content": "",
+            //         "version": 0,
+            //         "parent_ids": [
+            //             0
+            //         ],
+            //         "created_at": "",
+            //         "updated_at": ""
+            //     },
+            // ]
             },
-
+            updateQuestionsList: (id: number, index: number, values: any) => {
-            updateQuestionsList: (id: number, values: any) => {
+                const array = get()["listQuestions"][id] || [];
-                const state = get()["listQuestions"] || {};
+                array[index] = {
-                state[id] = {
+                    ...array[index],
-                    ...state[id],
                     ...values
                 };
+                const state = get()["listQuestions"] || {};
+                state[id] = array
                 set({listQuestions: state});
             },
-                removeQuestion: (id) => {
-                    const state = get()["listQuestions"] || {};
 
-                    const newState = Object.entries(state).reduce<any>((accumulator, [key, value], index, array) => {
+            createQuestion:(id: number) => {
-                        if (key !== id.toString()) {
+                const array = get()["listQuestions"][id] || [];
-                            accumulator[key] = value;
+                array.push(
-                        }
+                    {
-                        return accumulator;
+                        "title": "",
-                    }, {});
+                        "description": "",
-                    set({listQuestions: newState});
+                        "type": "",
-                },
-                createBlankQuestions: () => {
-                    const newListQuestions = get()["listQuestions"] || {};
-                    const id = getRandom(1000000, 10000000)
-                    newListQuestions[id] = {
-                        "id": id,
-                        //"quiz_id": listQuizes.id, // id опроса, к которому вопрос принадлежит
-                        "title": "", // заголовок вопроса
-                        "description": "", // развёрнутое описание вопроса
-                        "type": "", // button, text, select, checkbox, file, none
                         "required": true,
                         "deleted": true,
                         "page": 0,
@@ -55,18 +61,24 @@ export const questionStore = create<QuestionStore>()(
                         ],
                         "created_at": "",
                         "updated_at": ""
-                    };
+                    }
-                    set({listQuestions: newListQuestions});
+                )
-                    return id;
+                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});
+            },
                 }),
+
         {
             name: "question",
             }
     )
-);
+);
-function getRandom(min: number, max: number) {
-    min = Math.ceil(min);
-    max = Math.floor(max);
-    return Math.floor(Math.random() * (max - min)) + min;
-}

src/ui_kit/switchStepPages.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import StepOne from "./stepOne";
+import StepOne from "../pages/startPage/stepOne";
-import Steptwo from "./steptwo";
+import Steptwo from "../pages/startPage/steptwo";
-import StartPageSettings from "./StartPageSettings";
+import StartPageSettings from "../pages/startPage/StartPageSettings";
+import QuestionsPage from "../pages/Questions/QuestionsPage";
 
 interface Props {
     activeStep: number,
@@ -20,6 +21,15 @@ export default function SwitchStepPages({activeStep = 1, handleNext }: Props) {
         case 3:
             return (<StartPageSettings handleNext={handleNext}/>);
             break;
+        case 4:
+            return (<QuestionsPage/>);
+            break;
+        case 5:
+            return (<StartPageSettings handleNext={handleNext}/>);
+            break;
+        case 6:
+            return (<StartPageSettings handleNext={handleNext}/>);
+            break;
         default:
             return (<></>)
     }