feat: questions store hint

src/pages/Questions/DataOptions/DataOptions.tsx

@@ -1,56 +1,70 @@
-import {Box, Typography, useTheme} from "@mui/material";
+import { Box, Typography, useTheme } from "@mui/material";
 import ButtonsOptions from "../ButtonsOptions";
 import SwitchData from "./switchData";
-import React, {useState} from "react";
+import React, { useState } from "react";
 import InfoIcon from "../../../assets/icons/InfoIcon";
 import SelectableButton from "@ui_kit/SelectableButton";
 
 type dataType = "calendar" | "mask";
 
-interface Props{
+interface Props {
-    totalIndex: number
+  totalIndex: number;
 }
 
-export default function DataOptions({totalIndex}: Props) {
+export default function DataOptions({ totalIndex }: Props) {
   const theme = useTheme();
-    const [switchState, setSwitchState] = React.useState('setting');
+  const [switchState, setSwitchState] = React.useState("setting");
   const SSHC = (data: string) => {
-        setSwitchState(data)
+    setSwitchState(data);
-    }
+  };
 
   const [dataType, setDataType] = useState<dataType>("calendar");
   return (
     <>
       <Box
         sx={{
-                    width: '100%',
+          width: "100%",
-                    maxWidth: '640px',
+          maxWidth: "640px",
-                    display: 'flex',
+          display: "flex",
-                    padding: '20px',
+          padding: "20px",
-                    flexDirection: 'column',
+          flexDirection: "column",
-                    gap: '20px'}}
+          gap: "20px",
+        }}
+      >
+        <Box sx={{ gap: "10px", display: "flex" }}>
+          <SelectableButton
+            isSelected={dataType === "calendar"}
+            onClick={() => setDataType("calendar")}
           >
-
-                <Box sx={{gap: '10px', display: 'flex'}}>
-                    <SelectableButton isSelected={dataType === "calendar"} onClick={() => setDataType("calendar")}>
             Использовать календарь
           </SelectableButton>
-                    <SelectableButton isSelected={dataType === "mask"} onClick={() => setDataType("mask")}>
+          <SelectableButton
+            isSelected={dataType === "mask"}
+            onClick={() => setDataType("mask")}
+          >
             Использовать маску
           </SelectableButton>
         </Box>
-                <Box sx={{display: 'flex', alignItems: 'center', gap: '12px'}}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
-                    <Typography sx={{
+          <Typography
+            sx={{
               fontWeight: 400,
-                        fontSize: '16px',
+              fontSize: "16px",
-                        lineHeight: '18.96px',
+              lineHeight: "18.96px",
-                        color: theme.palette.grey2.main
+              color: theme.palette.grey2.main,
-                    }}>Пользователю будет предложено выбрать дату</Typography>
+            }}
-                    <InfoIcon/>
+          >
+            Пользователю будет предложено выбрать дату
+          </Typography>
+          <InfoIcon />
         </Box>
       </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
+      <ButtonsOptions
-            <SwitchData switchState={switchState}/>
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
+      <SwitchData switchState={switchState} totalIndex={totalIndex} />
     </>
-    )
+  );
 }

src/pages/Questions/DataOptions/switchData.tsx

@@ -1,26 +1,28 @@
-import * as React from 'react';
+import * as React from "react";
 import HelpQuestions from "../helpQuestions";
 import SettingData from "./settingData";
 import BranchingQuestions from "../branchingQuestions";
 
-
 interface Props {
-    switchState: string,
+  switchState: string;
+  totalIndex: number;
 }
 
-export default function SwitchData({switchState = 'setting' }: Props) {
+export default function SwitchData({
-
+  switchState = "setting",
+  totalIndex,
+}: Props) {
   switch (switchState) {
-        case 'setting':
+    case "setting":
-            return (<SettingData/>);
+      return <SettingData />;
       break;
-        case 'help':
+    case "help":
-            return (<HelpQuestions/>);
+      return <HelpQuestions totalIndex={totalIndex} />;
-            break
+      break;
-        case 'branching':
+    case "branching":
-            return (<BranchingQuestions/>);
+      return <BranchingQuestions />;
       break;
     default:
-            return (<></>)
+      return <></>;
   }
 }

src/pages/Questions/DropDown/DropDown.tsx

@@ -1,41 +1,40 @@
-import {Box, Typography, Link, useTheme} from "@mui/material";
+import { Box, Typography, Link, useTheme } from "@mui/material";
 import React from "react";
 import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
 import SwitchDropDown from "./switchDropDown";
 import ButtonsOptions from "../ButtonsOptions";
 
 interface Props {
-    totalIndex: number
+  totalIndex: number;
 }
 
-
+export default function DropDown({ totalIndex }: Props) {
-export default function DropDown({totalIndex}: Props) {
   const theme = useTheme();
-    const [switchState, setSwitchState] = React.useState('setting');
+  const [switchState, setSwitchState] = React.useState("setting");
 
   const SSHC = (data: string) => {
-        setSwitchState(data)
+    setSwitchState(data);
-    }
+  };
 
   return (
     <>
-            <Box sx={{ padding: '20px'}}>
+      <Box sx={{ padding: "20px" }}>
         <Typography
           sx={{
-                        padding: '0 0 33px 80px',
+            padding: "0 0 33px 80px",
             fontWeight: 400,
-                        fontSize: '18px',
+            fontSize: "18px",
-                        lineHeight: '21.33px',
+            lineHeight: "21.33px",
-                        color: theme.palette.grey2.main
+            color: theme.palette.grey2.main,
           }}
         >
           Добавьте ответ
         </Typography>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px'}}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
           <Link
             component="button"
             variant="body2"
-                        sx={{color: theme.palette.brightPurple.main}}
+            sx={{ color: theme.palette.brightPurple.main }}
             // onClick={() => {
             //     console.info("I'm a button.");
             // }}
@@ -45,16 +44,22 @@ export default function DropDown({totalIndex}: Props) {
           <Typography
             sx={{
               fontWeight: 400,
-                            fontSize: '18px',
+              fontSize: "18px",
-                            lineHeight: '21.33px',
+              lineHeight: "21.33px",
-                            color: theme.palette.grey2.main
+              color: theme.palette.grey2.main,
             }}
-                    >или нажмите Enter</Typography>
+          >
-                    <EnterIcon/>
+            или нажмите Enter
+          </Typography>
+          <EnterIcon />
         </Box>
       </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
+      <ButtonsOptions
-            <SwitchDropDown switchState={switchState}/>
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
+      <SwitchDropDown switchState={switchState} totalIndex={totalIndex} />
     </>
-    )
+  );
 }

src/pages/Questions/DropDown/switchDropDown.tsx

@@ -1,26 +1,28 @@
-import * as React from 'react';
+import * as React from "react";
 import HelpQuestions from "../helpQuestions";
 import SettingDropDown from "./settingDropDown";
 import BranchingQuestions from "../branchingQuestions";
 
-
 interface Props {
-    switchState: string,
+  switchState: string;
+  totalIndex: number;
 }
 
-export default function SwitchDropDown({switchState = 'setting' }: Props) {
+export default function SwitchDropDown({
-
+  switchState = "setting",
+  totalIndex,
+}: Props) {
   switch (switchState) {
-        case 'setting':
+    case "setting":
-            return (<SettingDropDown/>);
+      return <SettingDropDown />;
       break;
-        case 'help':
+    case "help":
-            return (<HelpQuestions/>);
+      return <HelpQuestions totalIndex={totalIndex} />;
-            break
+      break;
-        case 'branching':
+    case "branching":
-            return (<BranchingQuestions/>);
+      return <BranchingQuestions />;
       break;
     default:
-            return (<></>)
+      return <></>;
   }
 }

src/pages/Questions/Emoji/Emoji.tsx

@@ -1,42 +1,43 @@
-import {Box, Link, Typography, useTheme} from "@mui/material";
+import { Box, Link, Typography, useTheme } from "@mui/material";
 import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
 import ButtonsOptions from "../ButtonsOptions";
 import SwitchEmoji from "./switchEmoji";
 import React from "react";
 import AddEmoji from "../../../assets/icons/questionsPage/addEmoji";
 
-interface Props{
+interface Props {
-    totalIndex: number
+  totalIndex: number;
 }
-export default function Emoji({totalIndex}: Props) {
+export default function Emoji({ totalIndex }: Props) {
   const theme = useTheme();
-    const [switchState, setSwitchState] = React.useState('setting');
+  const [switchState, setSwitchState] = React.useState("setting");
   const SSHC = (data: string) => {
-        setSwitchState(data)
+    setSwitchState(data);
-    }
+  };
   return (
     <>
-            <Box sx={{ padding: '20px'}}>
+      <Box sx={{ padding: "20px" }}>
-                <Box sx={{display: 'flex', alignItems: 'center', paddingBottom: '25px'}}>
+        <Box
-                    <AddEmoji/>
+          sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
+        >
+          <AddEmoji />
           <Typography
             sx={{
-                            padding: '0 0 0 20px',
+              padding: "0 0 0 20px",
               fontWeight: 400,
-                            fontSize: '18px',
+              fontSize: "18px",
-                            lineHeight: '21.33px',
+              lineHeight: "21.33px",
-                            color: theme.palette.grey2.main
+              color: theme.palette.grey2.main,
             }}
           >
             Добавьте ответ
           </Typography>
         </Box>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px'}}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
-
           <Link
             component="button"
             variant="body2"
-                        sx={{color: theme.palette.brightPurple.main}}
+            sx={{ color: theme.palette.brightPurple.main }}
             // onClick={() => {
             //     console.info("I'm a button.");
             // }}
@@ -46,16 +47,22 @@ export default function Emoji({totalIndex}: Props) {
           <Typography
             sx={{
               fontWeight: 400,
-                            fontSize: '18px',
+              fontSize: "18px",
-                            lineHeight: '21.33px',
+              lineHeight: "21.33px",
-                            color: theme.palette.grey2.main
+              color: theme.palette.grey2.main,
             }}
-                    >или нажмите Enter</Typography>
+          >
-                    <EnterIcon/>
+            или нажмите Enter
+          </Typography>
+          <EnterIcon />
         </Box>
       </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
+      <ButtonsOptions
-            <SwitchEmoji switchState={switchState}/>
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
+      <SwitchEmoji switchState={switchState} totalIndex={totalIndex} />
     </>
-    )
+  );
 }

src/pages/Questions/Emoji/switchEmoji.tsx

@@ -1,26 +1,28 @@
-import * as React from 'react';
+import * as React from "react";
 import BranchingQuestions from "../branchingQuestions";
 import HelpQuestions from "../helpQuestions";
 import SettingEmoji from "./settingEmoji";
 
-
 interface Props {
-    switchState: string,
+  switchState: string;
+  totalIndex: number;
 }
 
-export default function SwitchEmoji({switchState = 'setting' }: Props) {
+export default function SwitchEmoji({
-
+  switchState = "setting",
+  totalIndex,
+}: Props) {
   switch (switchState) {
-        case 'setting':
+    case "setting":
-            return (<SettingEmoji/>);
+      return <SettingEmoji />;
       break;
-        case 'help':
+    case "help":
-            return (<HelpQuestions/>);
+      return <HelpQuestions totalIndex={totalIndex} />;
-            break
+      break;
-        case 'branching':
+    case "branching":
-            return (<BranchingQuestions/>);
+      return <BranchingQuestions />;
       break;
     default:
-            return (<></>)
+      return <></>;
   }
 }

src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx

@@ -18,7 +18,9 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
   return (
     <>
       <Box sx={{ padding: "20px" }}>
-        <Box sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}>
+        <Box
+          sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
+        >
           <AddImage />
           <Typography
             sx={{
@@ -56,8 +58,12 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
           <EnterIcon />
         </Box>
       </Box>
-      <ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
+      <ButtonsOptionsAndPict
-      <SwitchOptionsAndPict switchState={switchState} />
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
+      <SwitchOptionsAndPict switchState={switchState} totalIndex={totalIndex} />
     </>
   );
 }

src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx

@@ -1,30 +1,32 @@
-import * as React from 'react';
+import * as React from "react";
 import BranchingQuestions from "../branchingQuestions";
 import SettingOptionsAndPict from "./SettingOptionsAndPict";
 import HelpQuestions from "../helpQuestions";
 import UploadImage from "../UploadImage";
 
-
 interface Props {
-    switchState: string,
+  switchState: string;
+  totalIndex: number;
 }
 
-export default function SwitchOptionsAndPict({switchState = 'setting' }: Props) {
+export default function SwitchOptionsAndPict({
-
+  switchState = "setting",
+  totalIndex,
+}: Props) {
   switch (switchState) {
-        case 'setting':
+    case "setting":
-            return (<SettingOptionsAndPict/>);
+      return <SettingOptionsAndPict />;
       break;
-        case 'help':
+    case "help":
-            return (<HelpQuestions/>);
+      return <HelpQuestions totalIndex={totalIndex} />;
-            break
-        case 'branching':
-            return (<BranchingQuestions/>);
       break;
-        case 'image':
+    case "branching":
-            return (<UploadImage/>);
+      return <BranchingQuestions />;
+      break;
+    case "image":
+      return <UploadImage />;
       break;
     default:
-            return (<></>)
+      return <></>;
   }
 }

src/pages/Questions/OptionsPicture/OptionsPicture.tsx

@@ -1,21 +1,21 @@
-import {Box, Link, Typography, useTheme} from "@mui/material";
+import { Box, Link, Typography, useTheme } from "@mui/material";
 import React from "react";
 import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
 import AddImage from "../../../assets/icons/questionsPage/addImage";
 import ButtonsOptions from "../ButtonsOptions";
 import SwitchAnswerOptionsPict from "./switchOptionsPict";
- interface Props {
+interface Props {
-     totalIndex: number
+  totalIndex: number;
- }
+}
-export default function OptionsPicture({totalIndex}: Props) {
+export default function OptionsPicture({ totalIndex }: Props) {
   const theme = useTheme();
-    const [switchState, setSwitchState] = React.useState('setting');
+  const [switchState, setSwitchState] = React.useState("setting");
   // const [addInput, setAddInput] = React.useState([
   //     0: {name: "распутье", variants: ["дорога влево", "дорога вправо"]};
   // ]);
   const SSHC = (data: string) => {
-        setSwitchState(data)
+    setSwitchState(data);
-    }
+  };
 
   // const createCondition = (name) => {
   //     addInput([...state, {name: name}])
@@ -26,27 +26,29 @@ export default function OptionsPicture({totalIndex}: Props) {
   // }
   return (
     <>
-            <Box sx={{ padding: '20px'}}>
+      <Box sx={{ padding: "20px" }}>
-                <Box sx={{display: 'flex', alignItems: 'center', paddingBottom: '25px'}}>
+        <Box
-                    <AddImage/>
+          sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
+        >
+          <AddImage />
           <Typography
             sx={{
-                            padding: '0 0 0 20px',
+              padding: "0 0 0 20px",
               fontWeight: 400,
-                            fontSize: '18px',
+              fontSize: "18px",
-                            lineHeight: '21.33px',
+              lineHeight: "21.33px",
-                            color: theme.palette.grey2.main
+              color: theme.palette.grey2.main,
             }}
           >
             Добавьте ответ
           </Typography>
         </Box>
 
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px'}}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
           <Link
             component="button"
             variant="body2"
-                        sx={{color: theme.palette.brightPurple.main}}
+            sx={{ color: theme.palette.brightPurple.main }}
             // onClick={() => {
             //     console.info("I'm a button.");
             // }}
@@ -56,16 +58,25 @@ export default function OptionsPicture({totalIndex}: Props) {
           <Typography
             sx={{
               fontWeight: 400,
-                            fontSize: '18px',
+              fontSize: "18px",
-                            lineHeight: '21.33px',
+              lineHeight: "21.33px",
-                            color: theme.palette.grey2.main
+              color: theme.palette.grey2.main,
             }}
-                    >или нажмите Enter</Typography>
+          >
-                    <EnterIcon/>
+            или нажмите Enter
+          </Typography>
+          <EnterIcon />
         </Box>
       </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
+      <ButtonsOptions
-            <SwitchAnswerOptionsPict switchState={switchState}/>
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
+      <SwitchAnswerOptionsPict
+        switchState={switchState}
+        totalIndex={totalIndex}
+      />
     </>
-    )
+  );
 }

src/pages/Questions/OptionsPicture/switchOptionsPict.tsx

@@ -1,26 +1,28 @@
-import * as React from 'react';
+import * as React from "react";
 import BranchingQuestions from "../branchingQuestions";
 import SettingOpytionsPict from "./settingOpytionsPict";
 import HelpQuestions from "../helpQuestions";
 
-
 interface Props {
-    switchState: string,
+  switchState: string;
+  totalIndex: number;
 }
 
-export default function SwitchAnswerOptionsPict({switchState = 'setting' }: Props) {
+export default function SwitchAnswerOptionsPict({
-
+  switchState = "setting",
+  totalIndex,
+}: Props) {
   switch (switchState) {
-        case 'setting':
+    case "setting":
-            return (<SettingOpytionsPict/>);
+      return <SettingOpytionsPict />;
       break;
-        case 'help':
+    case "help":
-            return (<HelpQuestions/>);
+      return <HelpQuestions totalIndex={totalIndex} />;
-            break
+      break;
-        case 'branching':
+    case "branching":
-            return (<BranchingQuestions/>);
+      return <BranchingQuestions />;
       break;
     default:
-            return (<></>)
+      return <></>;
   }
 }

src/pages/Questions/OwnTextField/OwnTextField.tsx

@@ -1,4 +1,4 @@
-import {Box, Typography, useTheme} from "@mui/material";
+import { Box, Typography, useTheme } from "@mui/material";
 import ButtonsOptions from "../ButtonsOptions";
 import SwitchTextField from "./switchTextField";
 import React from "react";
@@ -6,38 +6,47 @@ import CustomTextField from "@ui_kit/CustomTextField";
 import InfoIcon from "../../../assets/icons/InfoIcon";
 
 interface Props {
-    totalIndex: number
+  totalIndex: number;
 }
-export default function OwnTextField({totalIndex}: Props) {
+export default function OwnTextField({ totalIndex }: Props) {
   const theme = useTheme();
-    const [switchState, setSwitchState] = React.useState('setting');
+  const [switchState, setSwitchState] = React.useState("setting");
   const SSHC = (data: string) => {
-        setSwitchState(data)
+    setSwitchState(data);
-    }
+  };
   return (
     <>
       <Box
         sx={{
-                    width: '100%',
+          width: "100%",
-                    maxWidth: '640px',
+          maxWidth: "640px",
-                    display: 'flex',
+          display: "flex",
-                    padding: '20px',
+          padding: "20px",
-                    flexDirection: 'column',
+          flexDirection: "column",
-                    gap: '20px'}}
+          gap: "20px",
+        }}
       >
-               <CustomTextField placeholder={"Пример ответа"} text={''}/>
+        <CustomTextField placeholder={"Пример ответа"} text={""} />
-                <Box sx={{display: 'flex', alignItems: 'center', gap: '12px'}}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
-                    <Typography sx={{
+          <Typography
+            sx={{
               fontWeight: 400,
-                        fontSize: '16px',
+              fontSize: "16px",
-                        lineHeight: '18.96px',
+              lineHeight: "18.96px",
-                        color: theme.palette.grey2.main
+              color: theme.palette.grey2.main,
-                    }}>Пользователю будет дано поле для ввода значения  </Typography>
+            }}
-                    <InfoIcon/>
+          >
+            Пользователю будет дано поле для ввода значения{" "}
+          </Typography>
+          <InfoIcon />
         </Box>
       </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
+      <ButtonsOptions
-            <SwitchTextField switchState={switchState}/>
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
+      <SwitchTextField switchState={switchState} totalIndex={totalIndex} />
     </>
-    )
+  );
 }

src/pages/Questions/OwnTextField/switchTextField.tsx

@@ -1,26 +1,28 @@
-import * as React from 'react';
+import * as React from "react";
 import BranchingQuestions from "../branchingQuestions";
 import HelpQuestions from "../helpQuestions";
 import SettingTextField from "./settingTextField";
 
-
 interface Props {
-    switchState: string,
+  switchState: string;
+  totalIndex: number;
 }
 
-export default function SwitchTextField({switchState = 'setting' }: Props) {
+export default function SwitchTextField({
-
+  switchState = "setting",
+  totalIndex,
+}: Props) {
   switch (switchState) {
-        case 'setting':
+    case "setting":
-            return (<SettingTextField/>);
+      return <SettingTextField />;
       break;
-        case 'help':
+    case "help":
-            return (<HelpQuestions/>);
+      return <HelpQuestions totalIndex={totalIndex} />;
-            break
+      break;
-        case 'branching':
+    case "branching":
-            return (<BranchingQuestions/>);
+      return <BranchingQuestions />;
       break;
     default:
-            return (<></>)
+      return <></>;
   }
 }

src/pages/Questions/PageOptions/PageOptions.tsx

@@ -59,8 +59,12 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
           </Typography>
         </Box>
       </Box>
-      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
+      <ButtonsOptions
-      <SwitchPageOptions switchState={switchState} />
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
+      <SwitchPageOptions switchState={switchState} totalIndex={totalIndex} />
     </>
   );
 }

src/pages/Questions/PageOptions/switchPageOptions.tsx

@@ -2,24 +2,26 @@ import BranchingQuestions from "../branchingQuestions";
 import HelpQuestions from "../helpQuestions";
 import SettingPageOptions from "./SettingPageOptions";
 
-
 interface Props {
-    switchState: string,
+  switchState: string;
+  totalIndex: number;
 }
 
-export default function SwitchPageOptions({switchState = 'setting' }: Props) {
+export default function SwitchPageOptions({
-
+  switchState = "setting",
+  totalIndex,
+}: Props) {
   switch (switchState) {
-        case 'setting':
+    case "setting":
-            return (<SettingPageOptions/>);
+      return <SettingPageOptions />;
       break;
-        case 'help':
+    case "help":
-            return (<HelpQuestions/>);
+      return <HelpQuestions totalIndex={totalIndex} />;
-            break
+      break;
-        case 'branching':
+    case "branching":
-            return (<BranchingQuestions/>);
+      return <BranchingQuestions />;
       break;
     default:
-            return (<></>)
+      return <></>;
   }
 }

src/pages/Questions/RatingOptions/RatingOptions.tsx

@@ -1,47 +1,76 @@
-import {Box, Typography, useTheme} from "@mui/material";
+import { Box, Typography, useTheme } from "@mui/material";
 import ButtonsOptions from "../ButtonsOptions";
 import React from "react";
-import Rating from '@mui/material/Rating';
+import Rating from "@mui/material/Rating";
 import RatingStar from "../../../assets/icons/questionsPage/ratingStar";
 import SwitchRating from "./switchRating";
 
-interface Props{
+interface Props {
-    totalIndex: number
+  totalIndex: number;
 }
 
-export default function RatingOptions({totalIndex}: Props) {
+export default function RatingOptions({ totalIndex }: Props) {
   const theme = useTheme();
-    const [switchState, setSwitchState] = React.useState('setting');
+  const [switchState, setSwitchState] = React.useState("setting");
   const SSHC = (data: string) => {
-        setSwitchState(data)
+    setSwitchState(data);
-    }
+  };
   return (
     <>
       <Box
         sx={{
-                    width: '100%',
+          width: "100%",
-                    maxWidth: '310px',
+          maxWidth: "310px",
-                    display: 'flex',
+          display: "flex",
-                    padding: '20px',
+          padding: "20px",
-                    flexDirection: 'column',
+          flexDirection: "column",
-                    gap: '20px'}}
+          gap: "20px",
+        }}
       >
         <Rating
           name="customized-color"
           defaultValue={2}
-                    getLabelText={(value: number) => `${value} Heart${value !== 1 ? 's' : ''}`}
+          getLabelText={(value: number) =>
+            `${value} Heart${value !== 1 ? "s" : ""}`
+          }
           precision={1}
-                    icon={<RatingStar color={theme.palette.brightPurple.main}/>}
+          icon={<RatingStar color={theme.palette.brightPurple.main} />}
-                    emptyIcon={<RatingStar color={"#9A9AAF"}/>}
+          emptyIcon={<RatingStar color={"#9A9AAF"} />}
-                    sx={{display: 'flex', gap: '15px'}}
+          sx={{ display: "flex", gap: "15px" }}
         />
-                <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
+        <Box
-                    <Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Негативно</Typography>
+          sx={{
-                    <Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Позитивно</Typography>
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
+          <Typography
+            sx={{
+              color: theme.palette.grey2.main,
+              fontSize: "16px",
+              fontWeight: 400,
+            }}
+          >
+            Негативно
+          </Typography>
+          <Typography
+            sx={{
+              color: theme.palette.grey2.main,
+              fontSize: "16px",
+              fontWeight: 400,
+            }}
+          >
+            Позитивно
+          </Typography>
         </Box>
       </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
+      <ButtonsOptions
-            <SwitchRating switchState={switchState}/>
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
+      <SwitchRating switchState={switchState} totalIndex={totalIndex} />
     </>
-    )
+  );
 }

src/pages/Questions/RatingOptions/switchRating.tsx

@@ -2,24 +2,26 @@ import BranchingQuestions from "../branchingQuestions";
 import HelpQuestions from "../helpQuestions";
 import SettingRating from "./settingRating";
 
-
 interface Props {
-    switchState: string,
+  switchState: string;
+  totalIndex: number;
 }
 
-export default function SwitchRating({switchState = 'setting' }: Props) {
+export default function SwitchRating({
-
+  switchState = "setting",
+  totalIndex,
+}: Props) {
   switch (switchState) {
-        case 'setting':
+    case "setting":
-            return (<SettingRating/>);
+      return <SettingRating />;
       break;
-        case 'help':
+    case "help":
-            return (<HelpQuestions/>);
+      return <HelpQuestions totalIndex={totalIndex} />;
-            break
+      break;
-        case 'branching':
+    case "branching":
-            return (<BranchingQuestions/>);
+      return <BranchingQuestions />;
       break;
     default:
-            return (<></>)
+      return <></>;
   }
 }

src/pages/Questions/SliderOptions/SliderOptions.tsx

@@ -1,54 +1,63 @@
-import {Box, Typography, useTheme} from "@mui/material";
+import { Box, Typography, useTheme } from "@mui/material";
 import ButtonsOptions from "../ButtonsOptions";
 import React from "react";
 import CustomTextField from "@ui_kit/CustomTextField";
 import SwitchSlider from "./switchSlider";
 
-interface Props{
+interface Props {
-    totalIndex: number
+  totalIndex: number;
 }
 
-export default function SliderOptions({totalIndex}: Props) {
+export default function SliderOptions({ totalIndex }: Props) {
   const theme = useTheme();
-    const [switchState, setSwitchState] = React.useState('setting');
+  const [switchState, setSwitchState] = React.useState("setting");
   const SSHC = (data: string) => {
-        setSwitchState(data)
+    setSwitchState(data);
-    }
+  };
 
   return (
     <>
       <Box
         sx={{
-                    width: '100%',
+          width: "100%",
-                    maxWidth: '640px',
+          maxWidth: "640px",
-                    display: 'flex',
+          display: "flex",
-                    padding: '20px',
+          padding: "20px",
-                    flexDirection: 'column',
+          flexDirection: "column",
-                    gap: '20px'}}
+          gap: "20px",
+        }}
       >
-
+        <Box sx={{ gap: "10px", display: "flex", flexDirection: "column" }}>
-                <Box sx={{gap: '10px', display: 'flex', flexDirection: 'column'}}>
           <Typography>Выбор значения из диапазона</Typography>
-                    <Box sx={{display: 'flex', alignItems: 'center', gap: '20px'}}>
+          <Box sx={{ display: "flex", alignItems: "center", gap: "20px" }}>
-                        <CustomTextField placeholder={'0'} text={''}/>
+            <CustomTextField placeholder={"0"} text={""} />
             <Typography>—</Typography>
-                        <CustomTextField placeholder={'100'} text={''}/>
+            <CustomTextField placeholder={"100"} text={""} />
           </Box>
         </Box>
-                <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
           <Box>
             <Typography>Начальное значение</Typography>
-                        <CustomTextField placeholder={'50'} text={''}/>
+            <CustomTextField placeholder={"50"} text={""} />
           </Box>
           <Box>
             <Typography>Шаг</Typography>
-                        <CustomTextField placeholder={'1'} text={''}/>
+            <CustomTextField placeholder={"1"} text={""} />
-                    </Box>
-
           </Box>
         </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
+      </Box>
-            <SwitchSlider switchState={switchState}/>
+      <ButtonsOptions
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
+      <SwitchSlider switchState={switchState} totalIndex={totalIndex} />
     </>
-    )
+  );
 }

src/pages/Questions/SliderOptions/switchSlider.tsx

@@ -1,26 +1,28 @@
-import * as React from 'react';
+import * as React from "react";
 import HelpQuestions from "../helpQuestions";
 import BranchingQuestions from "../branchingQuestions";
 import SettingSlider from "./settingSlider";
 
-
 interface Props {
-    switchState: string,
+  switchState: string;
+  totalIndex: number;
 }
 
-export default function SwitchSlider({switchState = 'setting' }: Props) {
+export default function SwitchSlider({
-
+  switchState = "setting",
+  totalIndex,
+}: Props) {
   switch (switchState) {
-        case 'setting':
+    case "setting":
-            return (<SettingSlider/>);
+      return <SettingSlider />;
       break;
-        case 'help':
+    case "help":
-            return (<HelpQuestions/>);
+      return <HelpQuestions totalIndex={totalIndex} />;
-            break
+      break;
-        case 'branching':
+    case "branching":
-            return (<BranchingQuestions/>);
+      return <BranchingQuestions />;
       break;
     default:
-            return (<></>)
+      return <></>;
   }
 }

src/pages/Questions/UploadFile/UploadFile.tsx

@@ -1,46 +1,54 @@
-import {Box, FormControl, MenuItem, Select, SelectChangeEvent, Typography, useTheme} from "@mui/material";
+import {
+  Box,
+  FormControl,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import ButtonsOptions from "../ButtonsOptions";
-import React, {useState} from "react";
+import React, { useState } from "react";
 import InfoIcon from "../../../assets/icons/InfoIcon";
 import ArrowDown from "../../../assets/icons/ArrowDownIcon";
 import SwitchUpload from "./switchUpload";
 
-interface Props{
+interface Props {
-    totalIndex: number
+  totalIndex: number;
 }
 
-export default function UploadFile({totalIndex}: Props) {
+export default function UploadFile({ totalIndex }: Props) {
   const theme = useTheme();
-    const [switchState, setSwitchState] = React.useState('setting');
+  const [switchState, setSwitchState] = React.useState("setting");
   const SSHC = (data: string) => {
-        setSwitchState(data)
+    setSwitchState(data);
-    }
+  };
 
   const designTypes = [
     ["Все типы файлов"],
     ["Изображения"],
     ["Видео"],
     ["Аудио"],
-        ["Документ"]
+    ["Документ"],
-    ]
+  ];
   const [designType, setDesignType] = useState(designTypes[0][0]);
   const handleChange = (event: SelectChangeEvent) => {
     setDesignType(event.target.value);
-    }
+  };
 
   return (
     <>
       <Box
         sx={{
-                    width: '100%',
+          width: "100%",
-                    maxWidth: '640px',
+          maxWidth: "640px",
-                    display: 'flex',
+          display: "flex",
-                    padding: '20px',
+          padding: "20px",
-                    flexDirection: 'column',
+          flexDirection: "column",
-                    gap: '20px'}}
+          gap: "20px",
+        }}
       >
-
+        <Box sx={{ gap: "10px", display: "flex" }}>
-                <Box sx={{gap: '10px', display: 'flex'}}>
           <FormControl
             fullWidth
             size="small"
@@ -82,7 +90,7 @@ export default function UploadFile({totalIndex}: Props) {
                     "& .Mui-selected": {
                       backgroundColor: theme.palette.background.default,
                       color: theme.palette.brightPurple.main,
-                                        }
+                    },
                   },
                 },
               }}
@@ -93,11 +101,11 @@ export default function UploadFile({totalIndex}: Props) {
                   alignItems: "center",
                   px: "9px",
                   gap: "20px",
-                                }
+                },
               }}
-                            IconComponent={props => <ArrowDown {...props} />}
+              IconComponent={(props) => <ArrowDown {...props} />}
             >
-                            {designTypes.map(type =>
+              {designTypes.map((type) => (
                 <MenuItem
                   key={type[0]}
                   value={type[0]}
@@ -112,22 +120,30 @@ export default function UploadFile({totalIndex}: Props) {
                 >
                   {type[0]}
                 </MenuItem>
-                            )}
+              ))}
             </Select>
           </FormControl>
         </Box>
-                <Box sx={{display: 'flex', alignItems: 'center', gap: '12px'}}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
-                    <Typography sx={{
+          <Typography
+            sx={{
               fontWeight: 400,
-                        fontSize: '16px',
+              fontSize: "16px",
-                        lineHeight: '18.96px',
+              lineHeight: "18.96px",
-                        color: theme.palette.grey2.main
+              color: theme.palette.grey2.main,
-                    }}>Пользователь может загрузить любой собственный файл</Typography>
+            }}
-                    <InfoIcon/>
+          >
+            Пользователь может загрузить любой собственный файл
+          </Typography>
+          <InfoIcon />
         </Box>
       </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
+      <ButtonsOptions
-            <SwitchUpload switchState={switchState}/>
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
+      <SwitchUpload switchState={switchState} totalIndex={totalIndex} />
     </>
-    )
+  );
 }

src/pages/Questions/UploadFile/switchUpload.tsx

@@ -1,26 +1,28 @@
-import * as React from 'react';
+import * as React from "react";
 import BranchingQuestions from "../branchingQuestions";
 import HelpQuestions from "../helpQuestions";
 import SettingsUpload from "./settingUpload";
 
-
 interface Props {
-    switchState: string,
+  switchState: string;
+  totalIndex: number;
 }
 
-export default function SwitchUpload({switchState = 'setting' }: Props) {
+export default function SwitchUpload({
-
+  switchState = "setting",
+  totalIndex,
+}: Props) {
   switch (switchState) {
-        case 'setting':
+    case "setting":
-            return (<SettingsUpload/>);
+      return <SettingsUpload />;
       break;
-        case 'help':
+    case "help":
-            return (<HelpQuestions/>);
+      return <HelpQuestions totalIndex={totalIndex} />;
-            break
+      break;
-        case 'branching':
+    case "branching":
-            return (<BranchingQuestions/>);
+      return <BranchingQuestions />;
       break;
     default:
-            return (<></>)
+      return <></>;
   }
 }

src/pages/Questions/answerOptions/switchAnswerOptions.tsx

@@ -1,31 +1,32 @@
-import * as React from 'react';
+import * as React from "react";
 import UploadImage from "../UploadImage";
 import HelpQuestions from "../helpQuestions";
 import ResponseSettings from "./responseSettings";
 import BranchingQuestions from "../branchingQuestions";
 
-
 interface Props {
-    switchState: string,
+  switchState: string;
-    totalIndex: number,
+  totalIndex: number;
 }
 
-export default function SwitchAnswerOptions({switchState = 'setting', totalIndex }: Props) {
+export default function SwitchAnswerOptions({
-
+  switchState = "setting",
+  totalIndex,
+}: Props) {
   switch (switchState) {
-        case 'setting':
+    case "setting":
-            return (<ResponseSettings totalIndex={totalIndex}/>);
+      return <ResponseSettings totalIndex={totalIndex} />;
       break;
-        case 'help':
+    case "help":
-            return (<HelpQuestions/>);
+      return <HelpQuestions totalIndex={totalIndex} />;
-            break
-        case 'branching':
-            return (<BranchingQuestions/>);
       break;
-        case 'image':
+    case "branching":
-            return (<UploadImage/>);
+      return <BranchingQuestions />;
+      break;
+    case "image":
+      return <UploadImage />;
       break;
     default:
-            return (<></>)
+      return <></>;
   }
 }

src/pages/Questions/helpQuestions.tsx

@@ -12,16 +12,21 @@ import CustomTextField from "@ui_kit/CustomTextField";
 import { useState } from "react";
 import UploadIcon from "../../assets/icons/UploadIcon";
 import UploadBox from "@ui_kit/UploadBox";
+import { questionStore, updateQuestionsList } from "@root/questions";
 
 import type { DragEvent } from "react";
 
 type BackgroundType = "text" | "video";
 type BackgroundTypeModal = "linkVideo" | "ownVideo";
 
-export default function HelpQuestions() {
+type HelpQuestionsProps = {
+  totalIndex: number;
+};
+
+export default function HelpQuestions({ totalIndex }: HelpQuestionsProps) {
   const [open, setOpen] = useState(false);
-  const [video, setVideo] = useState("");
   const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
+  const { listQuestions } = questionStore();
   const [backgroundTypeModal, setBackgroundTypeModal] =
     useState<BackgroundTypeModal>("linkVideo");
   const theme = useTheme();
@@ -31,8 +36,10 @@ export default function HelpQuestions() {
 
   const videoHC = (fileList: FileList | null) => {
     if (fileList?.length) {
-      const file = fileList[0];
+      const clonContent = listQuestions[totalIndex].content;
-      setVideo(URL.createObjectURL(file));
+      clonContent.hint.video = URL.createObjectURL(fileList[0]);
+      clonContent.hint.videoUrl = "";
+      updateQuestionsList(totalIndex, { content: clonContent });
       handleClose();
     }
   };
@@ -77,7 +84,15 @@ export default function HelpQuestions() {
       </Box>
       {backgroundType === "text" ? (
         <>
-          <CustomTextField placeholder={"Текст консультанта"} text={""} />
+          <CustomTextField
+            placeholder={"Текст консультанта"}
+            text={listQuestions[totalIndex].content.hint.text}
+            onChange={({ target }) => {
+              let clonContent = listQuestions[totalIndex].content;
+              clonContent.hint.text = target.value;
+              updateQuestionsList(totalIndex, { content: clonContent });
+            }}
+          />
         </>
       ) : (
         <Box>
@@ -88,8 +103,16 @@ export default function HelpQuestions() {
             onClick={handleOpen}
             sx={{ justifyContent: "flex-start" }}
           >
-            {video ? (
+            {listQuestions[totalIndex].content.hint.videoUrl ||
-              <video src={video} width="400" controls />
+            listQuestions[totalIndex].content.hint.video ? (
+              <video
+                src={
+                  listQuestions[totalIndex].content.hint.videoUrl ||
+                  listQuestions[totalIndex].content.hint.video
+                }
+                width="400"
+                controls
+              />
             ) : (
               <>
                 <UploadBox
@@ -158,7 +181,13 @@ export default function HelpQuestions() {
                   </Typography>
                   <CustomTextField
                     placeholder={"http://example.com"}
-                    text={""}
+                    text={listQuestions[totalIndex].content.hint.videoUrl}
+                    onChange={({ target }) => {
+                      let clonContent = listQuestions[totalIndex].content;
+                      clonContent.hint.videoUrl = target.value;
+                      clonContent.hint.video = "";
+                      updateQuestionsList(totalIndex, { content: clonContent });
+                    }}
                   />
                 </Box>
               ) : (

src/stores/questions.ts

@@ -7,6 +7,12 @@ export type Variants = {
   hints: string;
 };
 
+type Hint = {
+  text: string;
+  video: string;
+  videoUrl: string;
+};
+
 export interface Question {
   id: number;
   title: string;
@@ -17,6 +23,7 @@ export interface Question {
   page: number;
   content: {
     variants: Variants[];
+    hint: Hint;
     large: boolean;
     multi: boolean;
     own: boolean;
@@ -85,6 +92,11 @@ export const createQuestion = (id: number) => {
           hints: "",
         },
       ],
+      hint: {
+        text: "",
+        video: "",
+        videoUrl: "",
+      },
       large: false,
       multi: false,
       own: false,