извлечение из стора значения типа вопроса для сохранения результата

src/assets/icons/CrossedEyeIcon.tsx

@@ -5,37 +5,37 @@ export default function CrossedEyeIcon() {
       <path
         d="M7.5 7.5625L22.5 24.0625"
         stroke="#7E2AEA"
-        stroke-width="1.5"
+        strokeWidth="1.5"
-        stroke-linecap="round"
+        strokeLinecap="round"
-        stroke-linejoin="round"
+        strokeLinejoin="round"
       />
       <path
         d="M17.5215 18.5871C16.8333 19.2175 15.9329 19.5657 14.9996 19.5621C14.2427 19.562 13.5036 19.3329 12.8794 18.9049C12.2551 18.4769 11.775 17.87 11.5022 17.164C11.2293 16.458 11.1765 15.686 11.3506 14.9494C11.5247 14.2128 11.9176 13.5462 12.4777 13.0371"
         stroke="#7E2AEA"
-        stroke-width="1.5"
+        strokeWidth="1.5"
-        stroke-linecap="round"
+        strokeLinecap="round"
-        stroke-linejoin="round"
+        strokeLinejoin="round"
       />
       <path
         d="M9.9375 10.2441C6.1125 12.1754 4.5 15.8129 4.5 15.8129C4.5 15.8129 7.5 22.5629 15 22.5629C16.7574 22.5772 18.4929 22.1723 20.0625 21.3816"
         stroke="#7E2AEA"
-        stroke-width="1.5"
+        strokeWidth="1.5"
-        stroke-linecap="round"
+        strokeLinecap="round"
-        stroke-linejoin="round"
+        strokeLinejoin="round"
       />
       <path
         d="M22.5594 19.6656C24.6031 17.8375 25.5031 15.8125 25.5031 15.8125C25.5031 15.8125 22.5031 9.06252 15.0031 9.06252C14.3529 9.06124 13.7038 9.11455 13.0625 9.2219"
         stroke="#7E2AEA"
-        stroke-width="1.5"
+        strokeWidth="1.5"
-        stroke-linecap="round"
+        strokeLinecap="round"
-        stroke-linejoin="round"
+        strokeLinejoin="round"
       />
       <path
         d="M15.7031 12.1289C16.5006 12.28 17.2273 12.6864 17.7735 13.2868C18.3198 13.8871 18.6559 14.6489 18.7313 15.457"
         stroke="#7E2AEA"
-        stroke-width="1.5"
+        strokeWidth="1.5"
-        stroke-linecap="round"
+        strokeLinecap="round"
-        stroke-linejoin="round"
+        strokeLinejoin="round"
       />
     </svg>
   );

src/assets/icons/questionsPage/hideIcon.tsx

@@ -18,9 +18,9 @@ export default function HideIcon() {
             }}
         >
             <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M14.7218 18.4322C13.8897 18.6339 12.9835 18.75 12 18.75C4.5 18.75 1.5 12 1.5 12C1.5 12 4.5 5.25 12 5.25C19.5 5.25 22.5 12 22.5 12C22.5 12 21.7941 14.0139 19 16" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M14.7218 18.4322C13.8897 18.6339 12.9835 18.75 12 18.75C4.5 18.75 1.5 12 1.5 12C1.5 12 4.5 5.25 12 5.25C19.5 5.25 22.5 12 22.5 12C22.5 12 21.7941 14.0139 19 16" stroke="#4D4D4D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-                <path d="M24 16L19.5 20L15 16" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M24 16L19.5 20L15 16" stroke="#4D4D4D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-                <path d="M12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75Z" stroke="#4D4D4D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75Z" stroke="#4D4D4D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
             </svg>
         </Box>
     );

src/pages/Questions/QuestionPageCard.tsx

@@ -1,4 +1,4 @@
-import {Box, IconButton, Paper} from "@mui/material";
+import {Box, Checkbox, FormControlLabel, IconButton, Paper, useTheme} from "@mui/material";
 import CustomTextField from "@ui_kit/CustomTextField";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
@@ -10,20 +10,25 @@ import React, {useState} from "react";
 import DeleteIcon from "@icons/questionsPage/deleteIcon";
 import {useParams} from "react-router-dom";
 import {questionStore} from "@root/questions";
+import CustomCheckbox from "@ui_kit/CustomCheckbox";
+import CopyIcon from "@icons/questionsPage/CopyIcon";
+import CrossedEyeIcon from "@icons/CrossedEyeIcon";
+import EyeIcon from "@icons/EyeIcon";
+import HideIcon from "@icons/questionsPage/hideIcon";
 
 interface Props {
-    switchState: string;
-    SSHC: (data: string) => void;
     DeleteClick: () => void;
     totalIndex: number
 }
 
-export default function QuestionsPageCard({ SSHC, switchState, totalIndex }: Props) {
+export default function QuestionsPageCard({totalIndex, DeleteClick}: Props) {
+    const theme = useTheme();
     const params = Number(useParams().quizId);
     const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
     const [isExpanded, setIsExpanded] = useState<boolean>(false);
+    const switchState = listQuestions[params][totalIndex].type
     return (
-        <Paper sx={{ maxWidth: "796px", width: "100%", borderRadius: "12px", margin: "20px 0", backgroundColor: isExpanded ? "white" : "#333647" }}>
+        <Paper draggable="true" 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" }}
             >
@@ -39,18 +44,37 @@ export default function QuestionsPageCard({ SSHC, switchState, totalIndex }: Pro
                     :<ExpandLessIcon  fill="#7E2AEA"/>
                     }
                 </IconButton>
-                <OneIcon />
+                <Box sx={{display: "flex"}}>
-                <PointsIcon />
+                    <FormControlLabel
-                <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
+                        control={
+                            <Checkbox
+                                icon={<HideIcon/>}
+                                checkedIcon={<CrossedEyeIcon />}
+                            />}
+                        label={""}
+                        sx={{
+                            color: theme.palette.grey2.main,
+                            ml: "-9px",
+                            mr: 0,
+                            userSelect: "none",
+                        }}
+
+                    />
+                    <IconButton><CopyIcon/></IconButton>
+                    <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={DeleteClick}>
                         <DeleteIcon />
                     </IconButton>
                 </Box>
+                <OneIcon />
+                <PointsIcon />
+
+            </Box>
             {isExpanded && (
                 <Box sx={{display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px"}}>
                     {switchState.length === 0 ?
-                        <TypeQuestions switchState={switchState} SSHC={SSHC}/>
+                        <TypeQuestions totalIndex={totalIndex}/>
                         :
-                        <SwitchQuestionsPage switchState={switchState} totalIndex={totalIndex}/>}
+                        <SwitchQuestionsPage totalIndex={totalIndex}/>}
                 </Box>)
             }
         </Paper>

src/pages/Questions/QuestionsPage.tsx

@@ -23,11 +23,10 @@ export default function QuestionsPage() {
         let result = listQuizes[params].step - 1
         updateQuizesList(params, {step: result ? result : 1})
     };
-
+    // const [switchState, setSwitchState] = React.useState('');
-    const [switchState, setSwitchState] = React.useState('');
+    // const SSHC = (data: string) => {
-    const SSHC = (data: string) => {
+    //     setSwitchState(data)
-        setSwitchState(data)
+    // }
-    }
 
   const theme = useTheme();
   return (
@@ -44,7 +43,7 @@ export default function QuestionsPage() {
       </Box>
 
         {Object.values(listQuestions[params]).map((e, index) => (
-            <QuestionsPageCard key={index} totalIndex={index} switchState={switchState} SSHC={SSHC} DeleteClick={() => removeQuestion(params,index)}/>
+            <QuestionsPageCard key={index} totalIndex={index} DeleteClick={() => removeQuestion(params,index)}/>
             )
         )}
 

src/pages/Questions/SwitchQuestionsPage.tsx

@@ -11,14 +11,17 @@ import RatingOptions from "./RatingOptions/RatingOptions";
 import Emoji from "./Emoji/Emoji";
 import DropDown from "./DropDown/DropDown";
 import UploadFile from "./UploadFile/UploadFile";
+import {useParams} from "react-router-dom";
+import {questionStore} from "@root/questions";
 
 interface Props {
-    switchState: string,
-    // DeleteClick: () => void;
     totalIndex: number,
 }
 
-export default function SwitchQuestionsPage ({switchState = '', totalIndex }: Props) {
+export default function SwitchQuestionsPage ({totalIndex }: Props) {
+    const params = Number(useParams().quizId);
+    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
+    const switchState = listQuestions[params][totalIndex].type
     switch (switchState) {
         case 'answer':
             return (<AnswerOptions totalIndex={totalIndex}/>);

src/pages/Questions/TypeQuestions.tsx

@@ -12,28 +12,32 @@ import Page from "../../assets/icons/questionsPage/page";
 import RatingIcon from "../../assets/icons/questionsPage/rating";
 import {Box} from "@mui/material";
 import React from "react";
+import {useParams} from "react-router-dom";
+import {questionStore} from "@root/questions";
 
 interface Props {
-    switchState: string;
+    totalIndex: number
-    SSHC: (data: string) => void;
 }
 
-export default function TypeQuestions({ SSHC, switchState }: Props) {
+export default function TypeQuestions({totalIndex }: Props) {
+    const params = Number(useParams().quizId);
+    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
+    const switchState = listQuestions[params][totalIndex].type
     const buttonTypeQuestions: { icon: JSX.Element; title: string; value: string }[] = [
         {
             icon: <Answer/>,
             title: 'Варианты ответов',
-            value: 'answer',
+            value: 'variant',
         },
         {
             icon: <OptionsPict/>,
             title: 'Варианты с картинками',
-            value: 'answerpict',
+            value: 'images',
         },
         {
             icon: <OptionsAndPict/>,
             title: 'Варианты и картинка',
-            value: 'answerandpict',
+            value: 'varimg',
         },
         {
             icon: <Emoji/>,
@@ -43,12 +47,12 @@ export default function TypeQuestions({ SSHC, switchState }: Props) {
         {
             icon: <Input/>,
             title: 'Своё поле для ввода',
-            value: 'textfield',
+            value: 'text',
         },
         {
             icon: <DropDown/>,
             title: 'Выпадающий список',
-            value: 'dropdown',
+            value: 'select',
         },
         {
             icon: <Date/>,
@@ -58,12 +62,12 @@ export default function TypeQuestions({ SSHC, switchState }: Props) {
         {
             icon: <Slider/>,
             title: 'Ползунок',
-            value: 'slider',
+            value: 'number',
         },
         {
             icon: <Download/>,
             title: 'Загрузка файла',
-            value: 'uploader',
+            value: 'file',
         },
         {
             icon: <Page/>,
@@ -83,8 +87,8 @@ export default function TypeQuestions({ SSHC, switchState }: Props) {
                 <QuestionsMiniButton
                     key={title}
                     onClick={() => {
-                        SSHC(value);
                         console.log(value)
+                        updateQuestionsList(params, totalIndex, {type: value})
                     }}
                     icon={icon}
                     text={title}

src/stores/questions.ts

@@ -15,23 +15,6 @@ 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) => {
                 const array = get()["listQuestions"][id] || [];