AnswerOptions type fix

src/pages/Questions/answerOptions/AnswerOptions.tsx

@@ -5,20 +5,20 @@ import SwitchAnswerOptions from "./switchAnswerOptions";
 import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
 import QuestionsPageCard from "../QuestionPageCard";
 import { useParams } from "react-router-dom";
-import { questionStore, updateQuestionsList } from "@root/questions";
+import { Variants, questionStore, updateQuestionsList } from "@root/questions";
 import PointsIcon from "@icons/questionsPage/PointsIcon";
 import DeleteIcon from "@icons/questionsPage/deleteIcon";
 import MessageIcon from "@icons/messagIcon";
 import Popover from "@mui/material/Popover";
 import TextareaAutosize from "@mui/base/TextareaAutosize";
 
+// Импортируем интерфейс Varian
+
 interface Props {
   totalIndex: number;
 }
 
 export default function AnswerOptions({ totalIndex }: Props) {
-  const params = Number(useParams().quizId);
-
   const { listQuestions } = questionStore();
   const Answer = listQuestions[totalIndex].content.variants;
   console.log(Answer);
@@ -27,22 +27,21 @@ export default function AnswerOptions({ totalIndex }: Props) {
   const SSHC = (data: string) => {
     setSwitchState(data);
   };
-  // const [openBranch, setOpenBranch] = useState(false);
-  // const handleOpenBranch = () => setOpenBranch(true);
-  // const handleCloseBranch = () => setOpenBranch(false);
 
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null); // Объявление состояния для anchorEl
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
+    setIsOpen(true);
   };
 
   const handleClose = () => {
-    setAnchorEl(null);
+    setIsOpen(false);
   };
 
-  const open = Boolean(anchorEl);
-  const id = open ? "simple-popover" : undefined;
+  const id = "my-popover-id";
+
   return (
     <>
       <Box sx={{ padding: "0 20px 20px 20px" }}>
@@ -60,14 +59,14 @@ export default function AnswerOptions({ totalIndex }: Props) {
           </Typography>
         ) : (
           <Box>
-            {Answer.map((answer: string, index: number) => (
-              <FormControl fullWidth variant="standard" sx={{ p: "0 0 20px 0" }}>
+            {Answer.map((variant: Variants, index: number) => (
+              <FormControl key={index} fullWidth variant="standard" sx={{ p: "0 0 20px 0" }}>
                 <TextField
-                  value={Answer[index].answer}
+                  value={variant.answer}
                   fullWidth
                   placeholder={"Добавьте ответ"}
                   onChange={(e) => {
-                    const answerNew = Answer;
+                    const answerNew = Answer.slice(); // Create a shallow copy of the array
                     answerNew[index].answer = e.target.value;
                     let clonContent = listQuestions[totalIndex].content;
                     clonContent.variants = answerNew;
@@ -86,7 +85,7 @@ export default function AnswerOptions({ totalIndex }: Props) {
                         </IconButton>
                         <Popover
                           id={id}
-                          open={open}
+                          open={isOpen}
                           anchorEl={anchorEl}
                           onClose={handleClose}
                           anchorOrigin={{
@@ -97,9 +96,9 @@ export default function AnswerOptions({ totalIndex }: Props) {
                           <TextareaAutosize
                             style={{ margin: "10px" }}
                             placeholder="Подсказка для этого ответа"
-                            value={Answer[index].hints}
+                            value={variant.hints}
                             onChange={(e) => {
-                              const answerNew = Answer;
+                              const answerNew = Answer.slice(); // Create a shallow copy of the array
                               answerNew[index].hints = e.target.value;
                               let clonContent = listQuestions[totalIndex].content;
                               clonContent.variants = answerNew;
@@ -109,7 +108,7 @@ export default function AnswerOptions({ totalIndex }: Props) {
                         </Popover>
                         <IconButton
                           onClick={() => {
-                            const answerNew = Answer;
+                            const answerNew = Answer.slice(); // Create a shallow copy of the array
                             answerNew.splice(index, 1);
                             let clonContent = listQuestions[totalIndex].content;
                             clonContent.variants = answerNew;
@@ -147,8 +146,12 @@ export default function AnswerOptions({ totalIndex }: Props) {
             variant="body2"
             sx={{ color: theme.palette.brightPurple.main }}
             onClick={() => {
-              const answerNew = Answer;
-              answerNew.push({ answer: "" });
+              const answerNew = Answer.slice(); // Create a shallow copy of the array
+              answerNew.push({
+                answer: "",
+                answerLong: "",
+                hints: "",
+              });
               let clonContent = listQuestions[totalIndex].content;
               clonContent.variants = answerNew;
               updateQuestionsList(totalIndex, { content: clonContent });

src/stores/questions.ts

@@ -1,7 +1,7 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
-type Variants = {
+export type Variants = {
   answer: string;
   answerLong: string;
   hints: string;