feat: updates from brunch dev

src/pages/Questions/AnswerDraggableList/StrictModeDroppable.tsx

@@ -0,0 +1,23 @@
+import { useState, useEffect } from "react";
+import { Droppable } from "react-beautiful-dnd";
+
+import type { DroppableProps } from "react-beautiful-dnd";
+
+export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
+  const [enabled, setEnabled] = useState(false);
+
+  useEffect(() => {
+    const animation = requestAnimationFrame(() => setEnabled(true));
+
+    return () => {
+      setEnabled(false);
+      cancelAnimationFrame(animation);
+    };
+  }, []);
+
+  if (!enabled) {
+    return null;
+  }
+
+  return <Droppable {...props}>{children}</Droppable>;
+};

src/pages/Questions/ButtonsOptionsAndPict.tsx

@@ -10,7 +10,6 @@ import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
 import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
 import { useParams } from "react-router-dom";
 import { questionStore, removeQuestion, resetSomeField } from "@root/questions";
-import { branchStore } from "@root/branches";
 
 import "./ButtonsOptionsAndPict.css";
 
@@ -27,7 +26,6 @@ export default function ButtonsOptionsAndPict({
 }: Props) {
   const params = Number(useParams().quizId);
   const { openedModalSettings } = questionStore();
-  const { branch } = branchStore();
   const theme = useTheme();
 
   const openedModal = () => {

src/pages/Questions/DropDown/DropDown.tsx

@@ -1,5 +1,9 @@
+import { useState } from "react";
 import { Box, Typography, Link, useTheme } from "@mui/material";
-import React from "react";
+import { AnswerDraggableList } from "../AnswerDraggableList";
+
+import { questionStore, updateQuestionsList } from "@root/questions";
+
 import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
 import SwitchDropDown from "./switchDropDown";
 import ButtonsOptions from "../ButtonsOptions";
@@ -9,35 +13,48 @@ interface Props {
 }
 
 export default function DropDown({ totalIndex }: Props) {
+  const [switchState, setSwitchState] = useState("setting");
+  const { listQuestions } = questionStore();
   const theme = useTheme();
-  const [switchState, setSwitchState] = React.useState("setting");
+  const variants = listQuestions[totalIndex].content.variants;
 
   const SSHC = (data: string) => {
     setSwitchState(data);
   };
 
+  const addNewAnswer = () => {
+    const answerNew = variants.slice();
+    answerNew.push({ answer: "", answerLong: "", hints: "" });
+
+    updateQuestionsList(totalIndex, {
+      content: { ...listQuestions[totalIndex].content, variants: answerNew },
+    });
+  };
+
   return (
     <>
       <Box sx={{ padding: "20px" }}>
-        <Typography
+        {variants.length === 0 ? (
-          sx={{
+          <Typography
-            padding: "0 0 33px 80px",
+            sx={{
-            fontWeight: 400,
+              padding: "0 0 33px 80px",
-            fontSize: "18px",
+              fontWeight: 400,
-            lineHeight: "21.33px",
+              fontSize: "18px",
-            color: theme.palette.grey2.main,
+              lineHeight: "21.33px",
-          }}
+              color: theme.palette.grey2.main,
-        >
+            }}
-          Добавьте ответ
+          >
-        </Typography>
+            Добавьте ответ
+          </Typography>
+        ) : (
+          <AnswerDraggableList variants={variants} totalIndex={totalIndex} />
+        )}
         <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
           <Link
             component="button"
             variant="body2"
             sx={{ color: theme.palette.brightPurple.main }}
-            // onClick={() => {
+            onClick={addNewAnswer}
-            //     console.info("I'm a button.");
-            // }}
           >
             Добавьте ответ
           </Link>

src/pages/Questions/DropDown/settingDropDown.tsx

@@ -1,25 +1,49 @@
-import {Box, Typography} from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import CustomTextField from "@ui_kit/CustomTextField";
+
+import { questionStore, updateQuestionsList } from "@root/questions";
+
 import InfoIcon from "../../../assets/icons/InfoIcon";
 
-export default function SettingDropDown() {
+type SettingDropDownProps = {
-    return(
+  totalIndex: number;
-        <>
+};
-            <Box sx={{display: 'flex', width: '100%', justifyContent: 'space-between'}}>
-                <Box sx={{padding: '20px', width: '100%'}}>
-                    <Typography sx={{marginBottom: '15px'}}>Настройки ответов</Typography>
-                    <CustomCheckbox label={'Можно несколько'}/>
 
-                    <Typography sx={{marginBottom: '15px'}}>Текст в выпадающем списке</Typography>
+export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
-                    <CustomTextField placeholder={'Выберите вариант'} text={''}/>
+  const { listQuestions } = questionStore();
-                </Box>
+
-                <Box sx={{padding: '20px'}}>
+  return (
-                    <Typography sx={{marginBottom: '15px'}}>Настройки вопросов</Typography>
+    <>
-                    <CustomCheckbox label={'Необязательный вопрос'}/>
+      <Box
-                    <CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
+        sx={{ display: "flex", width: "100%", justifyContent: "space-between" }}
-                </Box>
+      >
-            </Box>
+        <Box sx={{ padding: "20px", width: "100%" }}>
-        </>
+          <Typography sx={{ marginBottom: "15px" }}>
-    )
+            Настройки ответов
-}
+          </Typography>
+          <CustomCheckbox label={"Можно несколько"} />
+          <Typography sx={{ marginBottom: "15px" }}>
+            Текст в выпадающем списке
+          </Typography>
+          <CustomTextField
+            placeholder={"Выберите вариант"}
+            text={listQuestions[totalIndex].content.default}
+            onChange={({ target }) => {
+              const clonContent = listQuestions[totalIndex].content;
+              clonContent.default = target.value;
+              updateQuestionsList(totalIndex, { content: clonContent });
+            }}
+          />
+        </Box>
+        <Box sx={{ padding: "20px" }}>
+          <Typography sx={{ marginBottom: "15px" }}>
+            Настройки вопросов
+          </Typography>
+          <CustomCheckbox label={"Необязательный вопрос"} />
+          <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+        </Box>
+      </Box>
+    </>
+  );
+}

src/pages/Questions/DropDown/switchDropDown.tsx

@@ -14,7 +14,7 @@ export default function SwitchDropDown({
 }: Props) {
   switch (switchState) {
     case "setting":
-      return <SettingDropDown />;
+      return <SettingDropDown totalIndex={totalIndex} />;
       break;
     case "help":
       return <HelpQuestions totalIndex={totalIndex} />;

src/pages/Questions/OptionsPicture/OptionsPicture.tsx

@@ -1,36 +1,48 @@
-import { Box, Link, Typography, useTheme } from "@mui/material";
+import { useState } from "react";
-import React from "react";
+import { Box, Link, Typography, Button, useTheme } from "@mui/material";
+
+import ButtonsOptions from "../ButtonsOptions";
+import { questionStore, updateQuestionsList } from "@root/questions";
+
 import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
 import AddImage from "../../../assets/icons/questionsPage/addImage";
-import ButtonsOptions from "../ButtonsOptions";
 import SwitchAnswerOptionsPict from "./switchOptionsPict";
+
+import type { ChangeEvent } from "react";
+
 interface Props {
   totalIndex: number;
 }
+
 export default function OptionsPicture({ totalIndex }: Props) {
   const theme = useTheme();
-  const [switchState, setSwitchState] = React.useState("setting");
+  const [switchState, setSwitchState] = useState("setting");
-  // const [addInput, setAddInput] = React.useState([
+  const { listQuestions } = questionStore();
-  //     0: {name: "распутье", variants: ["дорога влево", "дорога вправо"]};
+
-  // ]);
   const SSHC = (data: string) => {
     setSwitchState(data);
   };
 
-  // const createCondition = (name) => {
+  const addImage = ({ target }: ChangeEvent<HTMLInputElement>) => {
-  //     addInput([...state, {name: name}])
+    if (target.files?.length) {
-  // }
+      const clonContent = listQuestions[totalIndex].content;
-  //
+
-  // const deleteCondition = (index) => {
+      clonContent.images.push(URL.createObjectURL(target.files[0]));
-  //
+
-  // }
+      updateQuestionsList(totalIndex, { content: clonContent });
+    }
+  };
+
   return (
     <>
       <Box sx={{ padding: "20px" }}>
         <Box
           sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
         >
-          <AddImage />
+          <Button component="label" sx={{ padding: "0px" }}>
+            <AddImage />
+            <input type="file" hidden onChange={addImage} />
+          </Button>
           <Typography
             sx={{
               padding: "0 0 0 20px",

src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx

@@ -1,7 +1,10 @@
-import {Box, Button, Typography, useTheme} from "@mui/material";
+import { useEffect } from "react";
+import { Box, Button, Typography, useTheme } from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
+
+import { questionStore, updateQuestionsList } from "@root/questions";
+
 import InfoIcon from "../../../assets/icons/InfoIcon";
-import { useState } from "react";
 import FormatIcon2 from "../../../assets/icons/questionsPage/FormatIcon2";
 import FormatIcon1 from "../../../assets/icons/questionsPage/FormatIcon1";
 import ProportionsIcon11 from "../../../assets/icons/questionsPage/ProportionsIcon11";
@@ -14,18 +17,38 @@ interface Props {
   onClick: () => void;
 }
 
+type SettingOpytionsPictProps = {
+  totalIndex: number;
+};
+
+const PROPORTIONS = [
+  { value: "1:1", icon: ProportionsIcon11 },
+  { value: "2:1", icon: ProportionsIcon21 },
+  { value: "1:2", icon: ProportionsIcon12 },
+];
+
 export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
   const theme = useTheme();
   return (
     <Button
       onClick={onClick}
       variant="outlined"
-      startIcon={<Icon color={isActive ? theme.palette.navbarbg.main : theme.palette.brightPurple.main} />}
+      startIcon={
+        <Icon
+          color={
+            isActive
+              ? theme.palette.navbarbg.main
+              : theme.palette.brightPurple.main
+          }
+        />
+      }
       sx={{
         backgroundColor: isActive ? theme.palette.brightPurple.main : "#eee4fc",
         borderRadius: 0,
         border: "none",
-        color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
+        color: isActive
+          ? theme.palette.brightPurple.main
+          : theme.palette.grey2.main,
         p: "7px",
         width: "auto",
         minWidth: 0,
@@ -35,19 +58,31 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
         },
         "&:hover": {
           border: "none",
-          borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
+          borderColor: isActive
+            ? theme.palette.brightPurple.main
+            : theme.palette.grey2.main,
         },
       }}
     />
   );
 }
 
-type Proportions = "oneOne" | "twoOne" | "oneTwo";
+export default function SettingOpytionsPict({
-type AlignType = "left" | "right";
+  totalIndex,
+}: SettingOpytionsPictProps) {
+  const { listQuestions } = questionStore();
 
-export default function SettingOpytionsPict() {
+  useEffect(() => {
-  const [proportions, setProportions] = useState<Proportions>("oneOne");
+    if (!listQuestions[totalIndex].content.xy) {
-  const [alignType, setAlignType] = useState<AlignType>("left");
+      updateProportions("1:1");
+    }
+  }, []);
+
+  const updateProportions = (proportions: string) => {
+    const clonContent = listQuestions[totalIndex].content;
+    clonContent.xy = proportions;
+    updateQuestionsList(totalIndex, { content: clonContent });
+  };
 
   return (
     <>
@@ -61,25 +96,43 @@ export default function SettingOpytionsPict() {
               marginBottom: "20px",
             }}
           >
-            <SelectIconButton
+            {PROPORTIONS.map(({ value, icon }, index) => (
-              onClick={() => setProportions("oneOne")}
+              <SelectIconButton
-              isActive={proportions === "oneOne"}
+                key={index}
-              Icon={ProportionsIcon11}
+                onClick={() => updateProportions(value)}
-            />
+                isActive={listQuestions[totalIndex].content.xy === value}
-            <SelectIconButton
+                Icon={icon}
-              onClick={() => setProportions("twoOne")}
+              />
-              isActive={proportions === "twoOne"}
+            ))}
-              Icon={ProportionsIcon21}
-            />
-            <SelectIconButton
-              onClick={() => setProportions("oneTwo")}
-              isActive={proportions === "oneTwo"}
-              Icon={ProportionsIcon12}
-            />
           </Box>
-          <Typography sx={{ marginBottom: "15px" }}>Настройки ответов</Typography>
+          <Typography sx={{ marginBottom: "15px" }}>
-          <CustomCheckbox label={"Можно несколько"} />
+            Настройки ответов
-          <CustomCheckbox label={"Большие картинки"} />
+          </Typography>
+
+          <CustomCheckbox
+            label={"Можно несколько"}
+            checked={listQuestions[totalIndex].content.multi}
+            handleChange={() =>
+              updateQuestionsList(totalIndex, {
+                content: {
+                  ...listQuestions[totalIndex].content,
+                  multi: !listQuestions[totalIndex].content.multi,
+                },
+              })
+            }
+          />
+          <CustomCheckbox
+            label={"Большие картинки"}
+            checked={listQuestions[totalIndex].content.large}
+            handleChange={() =>
+              updateQuestionsList(totalIndex, {
+                content: {
+                  ...listQuestions[totalIndex].content,
+                  large: !listQuestions[totalIndex].content.large,
+                },
+              })
+            }
+          />
           <CustomCheckbox label={'Вариант "свой ответ"'} />
         </Box>
         <Box sx={{ padding: "20px" }}>
@@ -91,14 +144,34 @@ export default function SettingOpytionsPict() {
               marginBottom: "20px",
             }}
           >
-            <SelectIconButton onClick={() => setAlignType("left")} isActive={alignType === "left"} Icon={FormatIcon2} />
             <SelectIconButton
-              onClick={() => setAlignType("right")}
+              onClick={() =>
-              isActive={alignType === "right"}
+                updateQuestionsList(totalIndex, {
+                  content: {
+                    ...listQuestions[totalIndex].content,
+                    format: "carousel",
+                  },
+                })
+              }
+              isActive={listQuestions[totalIndex].content.format === "carousel"}
+              Icon={FormatIcon2}
+            />
+            <SelectIconButton
+              onClick={() =>
+                updateQuestionsList(totalIndex, {
+                  content: {
+                    ...listQuestions[totalIndex].content,
+                    format: "masonry",
+                  },
+                })
+              }
+              isActive={listQuestions[totalIndex].content.format === "masonry"}
               Icon={FormatIcon1}
             />
           </Box>
-          <Typography sx={{ marginBottom: "15px" }}>Настройки вопросов</Typography>
+          <Typography sx={{ marginBottom: "15px" }}>
+            Настройки вопросов
+          </Typography>
           <CustomCheckbox label={"Необязательный вопрос"} />
           <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
         </Box>

src/pages/Questions/OptionsPicture/switchOptionsPict.tsx

@@ -14,13 +14,13 @@ export default function SwitchAnswerOptionsPict({
 }: Props) {
   switch (switchState) {
     case "setting":
-      return <SettingOpytionsPict />;
+      return <SettingOpytionsPict totalIndex={totalIndex} />;
       break;
     case "help":
       return <HelpQuestions totalIndex={totalIndex} />;
       break;
     case "branching":
-      return <BranchingQuestions totalIndex={totalIndex}/>;
+      return <BranchingQuestions totalIndex={totalIndex} />;
       break;
     default:
       return <></>;

src/pages/Questions/OwnTextField/settingTextField.tsx

@@ -13,15 +13,13 @@ import { questionStore, updateQuestionsList } from "@root/questions";
 
 import InfoIcon from "../../../assets/icons/InfoIcon";
 
-import type { QuestionType } from "@root/questions";
-
 type SettingTextFieldProps = {
   totalIndex: number;
 };
 
 type Answer = {
   name: string;
-  value: QuestionType;
+  value: "single" | "multi" | "number";
 };
 
 const ANSWER_TYPES: Answer[] = [
@@ -45,11 +43,17 @@ export default function SettingTextField({
             aria-labelledby="demo-controlled-radio-buttons-group"
             name="controlled-radio-buttons-group"
             value={ANSWER_TYPES.findIndex(
-              ({ value }) => value === listQuestions[totalIndex].content.type
+              ({ value }) => listQuestions[totalIndex].content[value]
             )}
             onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
-              const clonContent = listQuestions[totalIndex].content;
+              const clonContent = {
-              clonContent.type = ANSWER_TYPES[Number(target.value)].value;
+                ...listQuestions[totalIndex].content,
+                single: false,
+                multi: false,
+                number: false,
+                [ANSWER_TYPES[Number(target.value)].value]: true,
+              };
+
               updateQuestionsList(totalIndex, { content: clonContent });
             }}
           >

src/pages/Questions/UploadFile/UploadFile.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
 import {
   Box,
   FormControl,
@@ -8,7 +9,9 @@ import {
   useTheme,
 } from "@mui/material";
 import ButtonsOptions from "../ButtonsOptions";
-import React, { useState } from "react";
+
+import { questionStore, updateQuestionsList } from "@root/questions";
+
 import InfoIcon from "../../../assets/icons/InfoIcon";
 import ArrowDown from "../../../assets/icons/ArrowDownIcon";
 import SwitchUpload from "./switchUpload";
@@ -17,25 +20,41 @@ interface Props {
   totalIndex: number;
 }
 
+const DESIGN_TYPES = [
+  { name: "Все типы файлов", value: "all" },
+  { name: "Изображения", value: "picture" },
+  { name: "Видео", value: "video" },
+  { name: "Аудио", value: "audio" },
+  { name: "Документ", value: "document" },
+];
+
 export default function UploadFile({ totalIndex }: Props) {
+  const [switchState, setSwitchState] = useState("setting");
+  const { listQuestions } = questionStore();
   const theme = useTheme();
-  const [switchState, setSwitchState] = React.useState("setting");
+
   const SSHC = (data: string) => {
     setSwitchState(data);
   };
 
-  const designTypes = [
+  const handleChange = ({ target }: SelectChangeEvent) => {
-    ["Все типы файлов"],
+    const clonContent = listQuestions[totalIndex].content;
-    ["Изображения"],
+    clonContent.type = target.value;
-    ["Видео"],
+    updateQuestionsList(totalIndex, { content: clonContent });
-    ["Аудио"],
-    ["Документ"],
-  ];
-  const [designType, setDesignType] = useState(designTypes[0][0]);
-  const handleChange = (event: SelectChangeEvent) => {
-    setDesignType(event.target.value);
   };
 
+  useEffect(() => {
+    const isTypeSetted = DESIGN_TYPES.find(
+      ({ value }) => value === listQuestions[totalIndex].content.type
+    );
+
+    if (!isTypeSetted) {
+      const clonContent = listQuestions[totalIndex].content;
+      clonContent.type = DESIGN_TYPES[0].value;
+      updateQuestionsList(totalIndex, { content: clonContent });
+    }
+  }, []);
+
   return (
     <>
       <Box
@@ -61,7 +80,7 @@ export default function UploadFile({ totalIndex }: Props) {
             <Select
               id="category-select"
               variant="outlined"
-              value={designType}
+              value={listQuestions[totalIndex].content.type}
               displayEmpty
               onChange={handleChange}
               sx={{
@@ -105,10 +124,10 @@ export default function UploadFile({ totalIndex }: Props) {
               }}
               IconComponent={(props) => <ArrowDown {...props} />}
             >
-              {designTypes.map((type) => (
+              {DESIGN_TYPES.map(({ name, value }) => (
                 <MenuItem
-                  key={type[0]}
+                  key={value}
-                  value={type[0]}
+                  value={value}
                   sx={{
                     display: "flex",
                     alignItems: "center",
@@ -118,7 +137,7 @@ export default function UploadFile({ totalIndex }: Props) {
                     color: theme.palette.grey2.main,
                   }}
                 >
-                  {type[0]}
+                  {name}
                 </MenuItem>
               ))}
             </Select>

src/pages/Questions/UploadFile/settingUpload.tsx

@@ -1,15 +1,31 @@
-import {Box, Typography} from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
+
+import { questionStore, updateQuestionsList } from "@root/questions";
+
 import InfoIcon from "../../../assets/icons/InfoIcon";
 
+type SettingsUploadProps = {
+  totalIndex: number;
+};
 
-export default function SettingsUpload() {
+export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
-    return (
+  const { listQuestions } = questionStore();
-        <Box sx={{display: 'flex', flexDirection: 'column', padding: '20px'}}>
+
-                <Typography>Настройки вопроса</Typography>
+  return (
-                <CustomCheckbox label={'Автозаполнение адреса'}/>
+    <Box sx={{ display: "flex", flexDirection: "column", padding: "20px" }}>
-                <CustomCheckbox label={'Необязательный вопрос'}/>
+      <Typography>Настройки вопроса</Typography>
-                <CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
+      <CustomCheckbox
-        </Box>
+        label={"Автозаполнение адреса"}
-    );
+        checked={listQuestions[totalIndex].content.autofill}
-};
+        handleChange={({ target }) => {
+          const clonContent = listQuestions[totalIndex].content;
+          clonContent.autofill = target.checked;
+          updateQuestionsList(totalIndex, { content: clonContent });
+        }}
+      />
+      <CustomCheckbox label={"Необязательный вопрос"} />
+      <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+    </Box>
+  );
+}

src/pages/Questions/UploadFile/switchUpload.tsx

@@ -14,13 +14,13 @@ export default function SwitchUpload({
 }: Props) {
   switch (switchState) {
     case "setting":
-      return <SettingsUpload />;
+      return <SettingsUpload totalIndex={totalIndex} />;
       break;
     case "help":
       return <HelpQuestions totalIndex={totalIndex} />;
       break;
     case "branching":
-      return <BranchingQuestions totalIndex={totalIndex}/>;
+      return <BranchingQuestions totalIndex={totalIndex} />;
       break;
     default:
       return <></>;

src/pages/Questions/answerOptions/AnswerOptions.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { Box, Typography, Link, useTheme } from "@mui/material";
 import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
 import SwitchAnswerOptions from "./switchAnswerOptions";
-import { AnswerDraggableList } from "./AnswerDraggableList";
+import { AnswerDraggableList } from "../AnswerDraggableList";
 import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
 import { questionStore, updateQuestionsList } from "@root/questions";
 

src/pages/Questions/answerOptions/responseSettings.tsx

@@ -1,23 +1,31 @@
+import { useState, useEffect } from "react";
 import { Box, Typography } from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 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, updateQuestionsList } from "@root/questions";
 
+import type { ChangeEvent } from "react";
+
 interface Props {
   totalIndex: number;
 }
 
 export default function ResponseSettings({ totalIndex }: Props) {
-  const params = Number(useParams().quizId);
+  const [checked, setChecked] = useState(false);
   const { listQuestions } = questionStore();
-  const [checked, setChecked] = React.useState([true, false]);
+
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setChecked([checked[0], event.target.checked]);
+    setChecked(event.target.checked);
   };
 
+  useEffect(() => {
+    if (listQuestions[totalIndex].content.innerName.length) {
+      setChecked(true);
+    }
+  }, []);
+
   return (
     <Box sx={{ display: "flex" }}>
       <Box sx={{ padding: "20px", display: "flex", flexDirection: "column" }}>
@@ -62,18 +70,18 @@ export default function ResponseSettings({ totalIndex }: Props) {
         <Box sx={{ display: "flex" }}>
           <CustomCheckbox
             label={"Внутреннее название вопроса"}
-            checked={checked[1]}
+            checked={checked}
             handleChange={handleChange}
           />{" "}
           <InfoIcon />
         </Box>
-        {checked[1] && (
+        {checked && (
           <CustomTextField
             placeholder={"Развёрнутое описание вопроса"}
-            text={listQuestions[totalIndex].description}
+            text={listQuestions[totalIndex].content.innerName}
-            onChange={(e) => {
+            onChange={({ target }) => {
               let clonContent = listQuestions[totalIndex].content;
-              clonContent.innerName = e.target.value;
+              clonContent.innerName = target.value;
               updateQuestionsList(totalIndex, { content: clonContent });
             }}
           />

src/pages/Questions/branchingQuestions.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import {
   Box,
   Button,
@@ -18,7 +17,6 @@ import {
   resetSomeField,
   updateQuestionsList,
 } from "@root/questions";
-import { branchStore, updateBranchState } from "@root/branches";
 import { Select } from "./Select";
 
 import DeleteIcon from "@icons/questionsPage/deleteIcon";
@@ -42,20 +40,8 @@ export default function BranchingQuestions({
   totalIndex,
 }: BranchingQuestionsProps) {
   const { openedModalSettings, listQuestions } = questionStore();
-  const { branch } = branchStore();
   const theme = useTheme();
 
-  useEffect(() => {
-    updateBranchState({
-      action: listQuestions[totalIndex].content.rule.show
-        ? ACTIONS[0]
-        : ACTIONS[1],
-      condition: listQuestions[totalIndex].content.rule.or
-        ? CONDITIONS[0]
-        : CONDITIONS[1],
-    });
-  }, []);
-
   const handleClose = () => {
     resetSomeField({ openedModalSettings: "" });
   };
@@ -120,7 +106,6 @@ export default function BranchingQuestions({
                   const clonContent = listQuestions[totalIndex].content;
                   clonContent.rule.show = action === ACTIONS[0];
                   updateQuestionsList(totalIndex, { content: clonContent });
-                  updateBranchState({ action });
                 }}
               />
               <Typography sx={{ color: theme.palette.grey2.main }}>
@@ -165,7 +150,7 @@ export default function BranchingQuestions({
                   </Box>
                   <Select
                     empty
-                    activeItemIndex={Number(request.id) || -1}
+                    activeItemIndex={request.id ? Number(request.id) : -1}
                     items={STIPULATIONS}
                     onChange={(stipulation) => {
                       const clonContent = listQuestions[totalIndex].content;
@@ -180,7 +165,6 @@ export default function BranchingQuestions({
                       };
 
                       updateQuestionsList(totalIndex, { content: clonContent });
-                      updateBranchState({ stipulation });
                     }}
                     sx={{ marginBottom: "15px" }}
                   />
@@ -225,7 +209,6 @@ export default function BranchingQuestions({
                           updateQuestionsList(totalIndex, {
                             content: clonContent,
                           });
-                          updateBranchState({ answer });
                         }}
                         sx={{
                           marginBottom: "10px",
@@ -295,14 +278,13 @@ export default function BranchingQuestions({
               <FormControl>
                 <RadioGroup
                   aria-labelledby="demo-controlled-radio-buttons-group"
-                  defaultValue={branch.condition === CONDITIONS[0] ? 0 : 1}
+                  defaultValue={
+                    listQuestions[totalIndex].content.rule.or ? 0 : 1
+                  }
                   onChange={({ target }) => {
                     const clonContent = listQuestions[totalIndex].content;
                     clonContent.rule.or = target.value === CONDITIONS[0];
                     updateQuestionsList(totalIndex, { content: clonContent });
-                    updateBranchState({
-                      condition: CONDITIONS[Number(target.value)],
-                    });
                   }}
                 >
                   {CONDITIONS.map((condition, index) => (

src/stores/branches.ts

@@ -1,27 +0,0 @@
-import { create } from "zustand";
-
-export type Branch = {
-  action: string;
-  stipulation: string;
-  answer: string;
-  condition: string;
-};
-
-interface BranchStore {
-  branch: Branch;
-}
-
-export const branchStore = create<BranchStore>()(() => ({
-  branch: {
-    action: "",
-    stipulation: "",
-    answer: "",
-    condition: "",
-  },
-}));
-
-export const updateBranchState = (data: Partial<Branch>) => {
-  const state = { ...branchStore.getState().branch };
-
-  branchStore.setState({ branch: { ...state, ...data } });
-};

src/stores/questions.ts

@@ -7,8 +7,6 @@ export type Variants = {
   hints: string;
 };
 
-export type QuestionType = "single" | "multi" | "number";
-
 type Hint = {
   text: string;
   video: string;
@@ -37,13 +35,20 @@ export interface Question {
     variants: Variants[];
     hint: Hint;
     rule: Rule;
+    images: string[];
     large: boolean;
     multi: boolean;
     own: boolean;
     innerName: string;
     back: string;
     placeholder: string;
-    type: QuestionType;
+    type: string;
+    autofill: boolean;
+    default: string;
+    single: boolean;
+    number: boolean;
+    xy: string;
+    format: "carousel" | "masonry";
   };
   version: number;
   parent_ids: number[];
@@ -107,7 +112,14 @@ export const createQuestion = (id: number) => {
       innerName: "",
       back: "",
       placeholder: "",
-      type: "single",
+      type: "all",
+      autofill: true,
+      default: "",
+      images: [],
+      number: false,
+      single: false,
+      xy: "",
+      format: "carousel",
       variants: [
         {
           answer: "",