change QuestionItem

SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, {useState, useRef, useEffect} from "react";
 import AnswerOption from '../AnswerOption/AnswerOption';
 import AddAnswerButton from "../AddAnswerButton/AddAnswerButton.tsx";
 import TypeDropdown from "../TypeDropdown/TypeDropdown.tsx";
@@ -8,13 +8,18 @@ import styles from './QuestionItem.module.css'
 interface QuestionItemProps {
     indexQuestion: number;
     initialTextQuestion?: string;
+    valueQuestion: string;
+    onChangeQuestion: (valueQuestion: string) => void;
 }
 
-const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQuestion = `Вопрос ${indexQuestion}`}) => {
+const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQuestion = `Вопрос ${indexQuestion}`,
+                                                       valueQuestion, onChangeQuestion}) => {
     const [selectedType, setSelectedType] = useState<'single' | 'multiply'>('single');
-
     const [answerOption, setAnswerOption] = useState(['']);
     const [textQuestion, setTextQuestion] = useState(initialTextQuestion);
+    const [isEditingQuestion, setIsEditingQuestion] = useState(false);
+
+    const textareaQuestionRef = useRef<HTMLTextAreaElement>(null);
 
     const handleTypeChange = (type: 'single' | 'multiply') => {
         setSelectedType(type);
@@ -24,25 +29,64 @@ const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQu
         setAnswerOption([...answerOption, '']);
     };
 
+    const handleQuestionClick = () => {
+        setIsEditingQuestion(true);
+    }
+
+    const handleTextareaQuestionChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setTextQuestion(event.target.value);
+    }
+
+    const handleSaveQuestion = () => {
+        setIsEditingQuestion(false);
+        onChangeQuestion(textQuestion);
+    }
+
+    const handleQuestionKeyDown = (keyDownEvent: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (keyDownEvent.key === 'Enter') {
+            keyDownEvent.preventDefault();
+            handleSaveQuestion()
+        }
+    }
+
+    const handleQuestionBlur = () => {
+        handleSaveQuestion()
+    }
+
+    useEffect(() => {
+        if (isEditingQuestion && textareaQuestionRef.current) {
+            textareaQuestionRef.current.focus();
+        }
+    }, [isEditingQuestion]);
+
     const handleAnswerChange = (index: number, value: string) => {
         const newAnswerOption = [...answerOption];
         newAnswerOption[index] = value;
         setAnswerOption(newAnswerOption);
     }
 
-    const handleQuestionChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-        setTextQuestion(event.target.value);
-    };
+    useEffect(() => {
+        setTextQuestion(valueQuestion);
+    }, [valueQuestion]);
 
     return (
         <div className={styles.questionCard}>
             <div className={styles.questionContainer}>
-                <h2>
+                {isEditingQuestion ? (
                     <textarea
-                        value={textQuestion}
-                        onChange={handleQuestionChange}
+                        className={styles.questionTextarea}
+                        ref={textareaQuestionRef}
+                        value={textQuestion === initialTextQuestion ? '' : textQuestion}
+                        onChange={handleTextareaQuestionChange}
+                        onKeyDown={handleQuestionKeyDown}
+                        onBlur={handleQuestionBlur}
+                        placeholder={initialTextQuestion}
                     />
-                </h2>
+                ) : (
+                    <button className={styles.textQuestion} onClick={handleQuestionClick}>
+                        <h2>{textQuestion || initialTextQuestion}</h2>
+                    </button>
+                )}
                 {answerOption.map((answerText, index) => (
                     <AnswerOption
                         key={index}