add page completing survey

SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx

@@ -10,6 +10,8 @@ import {
     getAnswerVariants,
     updateAnswerVariant
 } from "../../api/AnswerApi.ts";
+import {useLocation} from "react-router-dom";
+import TextareaAutosize from "react-textarea-autosize";
 
 interface QuestionItemProps {
     questionId: number;
@@ -43,6 +45,10 @@ const QuestionItem: React.FC<QuestionItemProps> = ({
     const [questionType, setQuestionType] = useState<'SingleAnswerQuestion' | 'MultipleAnswerQuestion'>(initialQuestionType);
     const textareaQuestionRef = useRef<HTMLTextAreaElement>(null);
 
+    const location = useLocation();
+    const isCompleteSurveyActive = location.pathname === '/complete-survey';
+
+
     useEffect(() => {
         setTextQuestion(valueQuestion);
     }, [valueQuestion]);
@@ -162,62 +168,81 @@ const QuestionItem: React.FC<QuestionItemProps> = ({
     };
 
     const toggleSelect = (index: number) => {
-        if (questionType === 'SingleAnswerQuestion') {
+        if (initialQuestionType === 'SingleAnswerQuestion') {
+            // Для одиночного выбора: заменяем массив одним выбранным индексом
             setSelectedAnswers([index]);
         } else {
-            setSelectedAnswers((prev) => {
-                if (prev.includes(index)) {
-                    return prev.filter((i) => i !== index);
-                } else {
-                    return [...prev, index];
-                }
-            });
+            // Для множественного выбора: добавляем/удаляем индекс
+            setSelectedAnswers(prev =>
+                prev.includes(index)
+                    ? prev.filter(i => i !== index)
+                    : [...prev, index]
+            );
         }
     };
 
     return (
         <div className={styles.questionCard}>
-            <div className={styles.questionContainer}>
-                <div className={styles.question}>
-                    {isEditingQuestion ? (
-                        <textarea
-                            className={styles.questionTextarea}
-                            ref={textareaQuestionRef}
-                            value={textQuestion === initialTextQuestion ? '' : textQuestion}
-                            onChange={handleTextareaQuestionChange}
-                            onKeyDown={handleQuestionKeyDown}
-                            onBlur={handleQuestionBlur}
-                            placeholder={initialTextQuestion}
-                            rows={1}
+            {isCompleteSurveyActive ? (
+                <div>
+                    <div className={styles.questionContainer}>
+                        <h2 className={styles.textQuestion}>{textQuestion || initialTextQuestion}</h2>
+                    </div>
+                    {initialAnswerVariants.map((answer, index) => (
+                        <AnswerOption
+                            key={answer.id || index}
+                            selectedType={initialQuestionType}
+                            index={index + 1}
+                            value={answer.text}
+                            isSelected={selectedAnswers.includes(index)}
+                            toggleSelect={() => toggleSelect(index)}
+                            isCompleteSurveyActive={isCompleteSurveyActive}
                         />
-                    ) : (
-                        <button className={styles.buttonQuestion} onClick={handleQuestionClick}>
-                            <h2 className={styles.textQuestion}>{textQuestion || initialTextQuestion}</h2>
-                        </button>
-                    )}
-                    <TypeDropdown selectedType={questionType} onTypeChange={handleTypeChange}/>
+                    ))}
                 </div>
+            ) : (
+               <div className={styles.questionContainer}>
+                   <div className={styles.question}>
+                       {isEditingQuestion ? (
+                           <TextareaAutosize
+                               className={styles.questionTextarea}
+                               ref={textareaQuestionRef}
+                               value={textQuestion === initialTextQuestion ? '' : textQuestion}
+                               onChange={handleTextareaQuestionChange}
+                               onKeyDown={handleQuestionKeyDown}
+                               onBlur={handleQuestionBlur}
+                               placeholder={initialTextQuestion}
+                               rows={1}
+                           />
+                       ) : (
+                           <button className={styles.buttonQuestion} onClick={handleQuestionClick}>
+                               <h2 className={styles.textQuestion}>{textQuestion || initialTextQuestion}</h2>
+                           </button>
+                       )}
+                       <TypeDropdown selectedType={questionType} onTypeChange={handleTypeChange}/>
+                   </div>
 
-                {initialAnswerVariants.map((answer, index) => (
-                    <AnswerOption
-                        key={answer.id || index}
-                        selectedType={questionType}
-                        index={index + 1}
-                        value={answer.text}
-                        onChange={(value) => handleAnswerChange(index, value)}
-                        onDelete={() => handleDeleteAnswer(index)}
-                        toggleSelect={() => toggleSelect(index)}
-                    />
-                ))}
+                   {initialAnswerVariants.map((answer, index) => (
+                       <AnswerOption
+                           key={answer.id || index}
+                           selectedType={questionType}
+                           index={index + 1}
+                           value={answer.text}
+                           onChange={(value) => handleAnswerChange(index, value)}
+                           onDelete={() => handleDeleteAnswer(index)}
+                           toggleSelect={() => toggleSelect(index)}
+                       />
+                   ))}
 
-                <div className={styles.questionActions}>
-                    <AddAnswerButton onClick={handleAddAnswer} />
-                    <button className={styles.deleteQuestionButton} onClick={handleDeleteQuestion}>
-                        Удалить
-                        <Delete className={styles.basketImg}/>
-                    </button>
-                </div>
-            </div>
+                   <div className={styles.questionActions}>
+                       <AddAnswerButton onClick={handleAddAnswer} />
+                       <button className={styles.deleteQuestionButton} onClick={handleDeleteQuestion}>
+                           Удалить
+                           <Delete className={styles.basketImg}/>
+                       </button>
+                   </div>
+               </div>)
+            }
         </div>
     );
 };