fix: emoji

src/pages/Questions/AnswerDraggableList/AnswerItem.tsx

@@ -19,12 +19,14 @@ import TextareaAutosize from "@mui/base/TextareaAutosize";
 
 import type { ChangeEvent, KeyboardEvent } from "react";
 import type { Variants } from "@root/questions";
+import { ReactNode } from "react";
 
 type AnswerItemProps = {
   index: number;
   totalIndex: number;
   variants: Variants[];
   variant: Variants;
+  icon?: ReactNode;
 };
 
 export const AnswerItem = ({
@@ -32,6 +34,7 @@ export const AnswerItem = ({
   totalIndex,
   variants,
   variant,
+  icon,
 }: AnswerItemProps) => {
   const { listQuestions } = questionStore();
   const theme = useTheme();
@@ -105,12 +108,15 @@ export const AnswerItem = ({
               }
               InputProps={{
                 startAdornment: (
-                  <InputAdornment
-                    {...provided.dragHandleProps}
-                    position="start"
-                  >
-                    <PointsIcon />
-                  </InputAdornment>
+                  <>
+                    <InputAdornment
+                      {...provided.dragHandleProps}
+                      position="start"
+                    >
+                      <PointsIcon />
+                    </InputAdornment>
+                    {icon && icon}
+                  </>
                 ),
                 endAdornment: (
                   <InputAdornment position="end">

src/pages/Questions/AnswerDraggableList/index.tsx

@@ -7,17 +7,20 @@ import { updateVariants } from "@root/questions";
 
 import { reorder } from "./helper";
 
+import { ReactNode } from "react";
 import type { DropResult } from "react-beautiful-dnd";
 import type { Variants } from "@root/questions";
 
 type AnswerDraggableListProps = {
   variants: Variants[];
   totalIndex: number;
+  icon?: ReactNode;
 };
 
 export const AnswerDraggableList = ({
   variants,
   totalIndex,
+  icon,
 }: AnswerDraggableListProps) => {
   const onDragEnd = ({ destination, source }: DropResult) => {
     if (destination) {
@@ -39,6 +42,7 @@ export const AnswerDraggableList = ({
                 totalIndex={totalIndex}
                 variants={variants}
                 variant={variant}
+                icon={icon}
               />
             ))}
             {provided.placeholder}

src/pages/Questions/Emoji/Emoji.tsx

@@ -4,43 +4,50 @@ import ButtonsOptions from "../ButtonsOptions";
 import SwitchEmoji from "./switchEmoji";
 import React from "react";
 import AddEmoji from "../../../assets/icons/questionsPage/addEmoji";
+import { AnswerDraggableList } from "../AnswerDraggableList";
+import { questionStore, updateQuestionsList } from "@root/questions";
 
 interface Props {
   totalIndex: number;
 }
 export default function Emoji({ totalIndex }: Props) {
-  const theme = useTheme();
   const [switchState, setSwitchState] = React.useState("setting");
+  const { listQuestions } = questionStore();
+  const theme = useTheme();
+
   const SSHC = (data: string) => {
     setSwitchState(data);
   };
+
   return (
     <>
       <Box sx={{ padding: "20px" }}>
-        <Box
-          sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
-        >
-          <AddEmoji />
-          <Typography
-            sx={{
-              padding: "0 0 0 20px",
-              fontWeight: 400,
-              fontSize: "18px",
-              lineHeight: "21.33px",
-              color: theme.palette.grey2.main,
-            }}
-          >
-            Добавьте ответ
-          </Typography>
-        </Box>
+        <AnswerDraggableList
+          variants={listQuestions[totalIndex].content.variants}
+          totalIndex={totalIndex}
+          icon={
+            <Box sx={{ margin: "0 15px 0 5px" }}>
+              <AddEmoji />
+            </Box>
+          }
+        />
         <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
           <Link
             component="button"
             variant="body2"
             sx={{ color: theme.palette.brightPurple.main }}
-            // onClick={() => {
-            //     console.info("I'm a button.");
-            // }}
+            onClick={() => {
+              const answerNew =
+                listQuestions[totalIndex].content.variants.slice();
+              answerNew.push({ answer: "", answerLong: "", hints: "" });
+
+              updateQuestionsList(totalIndex, {
+                content: {
+                  ...listQuestions[totalIndex].content,
+                  variants: answerNew,
+                },
+              });
+            }}
           >
             Добавьте ответ
           </Link>

src/pages/Questions/Emoji/settingEmoji.tsx

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

src/pages/Questions/Emoji/switchEmoji.tsx

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