feat: branch store

src/pages/Questions/Select.tsx

@@ -13,29 +13,25 @@ import type { SelectChangeEvent, SxProps } from "@mui/material";
 type SelectProps = {
   items: string[];
   empty?: boolean;
-  onChange?: (num: number) => void;
+  onChange?: (item: string, num: number) => void;
   sx?: SxProps;
 };
 
 export const Select = ({ items, empty, onChange, sx }: SelectProps) => {
   const [activeItem, setActiveItem] = useState<number>(empty ? -1 : 0);
-
   const theme = useTheme();
 
   const handleChange = (event: SelectChangeEvent) => {
-    setActiveItem(Number(event.target.value));
+    const activeItemIndex = Number(event.target.value);
-    onChange?.(Number(event.target.value));
+    setActiveItem(activeItemIndex);
+    onChange?.(items[activeItemIndex], activeItemIndex);
   };
 
   return (
     <FormControl
       fullWidth
       size="small"
-      sx={{
+      sx={{ width: "100%", height: "48px", ...sx }}
-        width: "100%",
-        height: "48px",
-        ...sx,
-      }}
     >
       <MuiSelect
         id="display-select"

src/pages/Questions/branchingQuestions.tsx

@@ -11,29 +11,37 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
-import * as React from "react";
+import { useState, useEffect } from "react";
-import { useState } from "react";
 import { questionStore, resetSomeField } from "@root/questions";
+import { updateBranchState } from "@root/branches";
 import { Select } from "./Select";
 import DeleteIcon from "@icons/questionsPage/deleteIcon";
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
 import InfoIcon from "@icons/Info";
 
+const ACTIONS = ["Показать", "Скрыть"];
+const STIPULATION = ["Условие 1", "Условие 2", "Условие 3"];
+const ANSWER = ["Условие 1", "Условие 2", "Условие 3"];
+const CONDITIONS = [
+  "Все условия обязательны",
+  "Обязательно хотя бы одно условие",
+];
+
 export default function BranchingQuestions() {
-  const [value, setValue] = useState("1");
+  const [condition, setCondition] = useState<boolean>(false);
   const [conditionSelected, setConditionSelected] = useState<boolean>(false);
   const { openedModalSettings } = questionStore();
   const theme = useTheme();
 
-  const [condition, setCondition] = useState<boolean>(false);
+  useEffect(() => {
+    updateBranchState({ action: ACTIONS[0], condition: CONDITIONS[0] });
+  }, []);
+
   const handleClose = () => {
     resetSomeField({ openedModalSettings: "" });
   };
 
-  const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue((event.target as HTMLInputElement).value);
-  };
   return (
     <>
       <Modal
@@ -85,8 +93,9 @@ export default function BranchingQuestions() {
               }}
             >
               <Select
-                items={["Показать", "Скрыть"]}
+                items={ACTIONS}
                 sx={{ maxWidth: "140px" }}
+                onChange={(action) => updateBranchState({ action })}
               />
               <Typography sx={{ color: theme.palette.grey2.main }}>
                 если в ответе на вопрос
@@ -118,14 +127,21 @@ export default function BranchingQuestions() {
                 </Box>
                 <Select
                   empty
-                  items={["Условие 1", "Условие 2", "Условие 3"]}
+                  items={STIPULATION}
-                  onChange={() => setConditionSelected(true)}
+                  onChange={(stipulation) => {
+                    setConditionSelected(true);
+                    updateBranchState({ stipulation });
+                  }}
                   sx={{ marginBottom: "15px" }}
                 />
                 {conditionSelected && (
                   <>
                     <Box
-                      sx={{ display: "flex", alignItems: "center", pb: "10px" }}
+                      sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        pb: "10px",
+                      }}
                     >
                       <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
                         Дан ответ
@@ -136,7 +152,8 @@ export default function BranchingQuestions() {
                     </Box>
                     <Select
                       empty
-                      items={["Условие 1", "Условие 2", "Условие 3"]}
+                      items={ANSWER}
+                      onChange={(answer) => updateBranchState({ answer })}
                     />
                   </>
                 )}
@@ -152,7 +169,6 @@ export default function BranchingQuestions() {
               }}
             >
               <Link
-                component="button"
                 variant="body2"
                 sx={{
                   color: theme.palette.brightPurple.main,
@@ -166,32 +182,27 @@ export default function BranchingQuestions() {
               <FormControl>
                 <RadioGroup
                   aria-labelledby="demo-controlled-radio-buttons-group"
-                  name="controlled-radio-buttons-group"
+                  defaultValue={0}
-                  value={value}
+                  onChange={({ target }) =>
-                  onChange={handleChangeRadio}
+                    updateBranchState({
+                      condition: CONDITIONS[Number(target.value)],
+                    })
+                  }
                 >
+                  {CONDITIONS.map((condition, index) => (
                     <FormControlLabel
+                      key={condition + index}
                       sx={{ color: theme.palette.grey2.main }}
-                    value="1"
+                      value={index}
                       control={
                         <Radio
                           checkedIcon={<RadioCheck />}
                           icon={<RadioIcon />}
                         />
                       }
-                    label="Все условия обязательны"
+                      label={condition}
-                  />
-                  <FormControlLabel
-                    sx={{ color: theme.palette.grey2.main }}
-                    value="2"
-                    control={
-                      <Radio
-                        checkedIcon={<RadioCheck />}
-                        icon={<RadioIcon />}
-                      />
-                    }
-                    label="Обязательно хотя бы одно условие"
                     />
+                  ))}
                 </RadioGroup>
               </FormControl>
             </Box>
@@ -199,19 +210,14 @@ export default function BranchingQuestions() {
               <Button
                 variant="outlined"
                 onClick={handleClose}
-                sx={{
+                sx={{ width: "100%", maxWidth: "130px" }}
-                  width: "100%",
-                  maxWidth: "130px",
-                }}
               >
                 Отмена
               </Button>
               <Button
                 variant="contained"
-                sx={{
+                sx={{ width: "100%", maxWidth: "130px" }}
-                  width: "100%",
+                onClick={handleClose}
-                  maxWidth: "130px",
-                }}
               >
                 Готово
               </Button>

src/pages/Questions/helpQuestions.tsx

@@ -119,6 +119,7 @@ export default function HelpQuestions() {
                 borderRadius: "12px",
                 boxShadow: 24,
                 p: 0,
+                overflow: "hidden",
               }}
             >
               <Box

src/stores/branches.ts

@@ -0,0 +1,27 @@
+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 } });
+};