From 8182bc1c430b63d7ab22109bb7d23dac439c27fb Mon Sep 17 00:00:00 2001
From: Tatiana Nikolaeva <tnik0402@gmail.com>
Date: Sun, 25 May 2025 22:46:52 +0500
Subject: [PATCH] fix question type

---
 .../components/AnswerOption/AnswerOption.tsx  |  5 ++--
 .../components/QuestionItem/QuestionItem.tsx  | 26 ++++++++++++-------
 .../QuestionsList/QuestionsList.tsx           | 24 ++++++++++-------
 .../src/components/Survey/Survey.tsx          |  2 +-
 .../src/components/SurveyPage/SurveyPage.tsx  |  8 +++---
 .../TypeDropdown/TypeDropdown.module.css      |  1 +
 .../components/TypeDropdown/TypeDropdown.tsx  | 14 +++++-----
 7 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx b/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
index 811d693..b042df9 100644
--- a/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
+++ b/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
@@ -9,7 +9,7 @@ interface AnswerOptionProps{
     value: string;
     onChange: (value: string) => void;
     onDelete:(index: number) => void;
-    selectedType: 'single' | 'multiply';
+    selectedType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion';
     toggleSelect: () => void;
 }
 
@@ -38,7 +38,6 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe
     useEffect(() => {
         if (isEditing && textAreaRef.current) {
             textAreaRef.current.focus();
-            // Установка начальной высоты
             textAreaRef.current.style.height = 'auto';
             textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
         }
@@ -72,7 +71,7 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe
                 className={`${styles.buttonMarker} ${isEditing ? styles.editing : ''}`}
                 onClick={toggleSelect}
             >
-                {selectedType === 'single' ? < Single className={styles.answerIcon} /> : <Multiple className={styles.answerIcon} />}
+                {selectedType === 'SingleAnswerQuestion' ? < Single className={styles.answerIcon} /> : <Multiple className={styles.answerIcon} />}
             </button>
             {isEditing ? (
                 <textarea
diff --git a/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx b/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
index 50dc767..098d1e5 100644
--- a/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
+++ b/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
@@ -19,35 +19,41 @@ interface QuestionItemProps {
     onChangeQuestion: (valueQuestion: string) => void;
     onAnswerVariantsChange: (variants: {id?: number, text: string}[]) => void;
     onDeleteQuestion: (index: number) => Promise<void>;
-    selectedType: 'single' | 'multiply';
-    setSelectedType: (type: 'single' | 'multiply') => void;
+    initialQuestionType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion';
+    onQuestionTypeChange: (type: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => void;
+
     surveyId?: number;
 }
 
 const QuestionItem: React.FC<QuestionItemProps> = ({
                                                        questionId,
-                                                       // initialTextQuestion = `Вопрос ${questionId}`,
                                                        initialTextQuestion = `Вопрос`,
                                                        valueQuestion,
                                                        answerVariants: initialAnswerVariants,
                                                        onChangeQuestion,
                                                        onAnswerVariantsChange,
                                                        onDeleteQuestion,
-                                                       setSelectedType,
-                                                       selectedType,
+                                                       initialQuestionType,
+                                                       onQuestionTypeChange,
                                                        surveyId
                                                    }) => {
     const [textQuestion, setTextQuestion] = useState(initialTextQuestion);
     const [isEditingQuestion, setIsEditingQuestion] = useState(false);
     const [selectedAnswers, setSelectedAnswers] = useState<number[]>([]);
+    const [questionType, setQuestionType] = useState<'SingleAnswerQuestion' | 'MultipleAnswerQuestion'>(initialQuestionType);
     const textareaQuestionRef = useRef<HTMLTextAreaElement>(null);
 
     useEffect(() => {
         setTextQuestion(valueQuestion);
     }, [valueQuestion]);
 
-    const handleTypeChange = (type: 'single' | 'multiply') => {
-        setSelectedType(type);
+    useEffect(() => {
+        setQuestionType(initialQuestionType);
+    }, [initialQuestionType]);
+
+    const handleTypeChange = (type: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => {
+        setQuestionType(type);
+        onQuestionTypeChange(type);
     };
 
     const handleAddAnswer = async () => {
@@ -156,7 +162,7 @@ const QuestionItem: React.FC<QuestionItemProps> = ({
     };
 
     const toggleSelect = (index: number) => {
-        if (selectedType === 'single') {
+        if (questionType === 'SingleAnswerQuestion') {
             setSelectedAnswers([index]);
         } else {
             setSelectedAnswers((prev) => {
@@ -189,13 +195,13 @@ const QuestionItem: React.FC<QuestionItemProps> = ({
                             <h2 className={styles.textQuestion}>{textQuestion || initialTextQuestion}</h2>
                         </button>
                     )}
-                    <TypeDropdown selectedType={selectedType} onTypeChange={handleTypeChange}/>
+                    <TypeDropdown selectedType={questionType} onTypeChange={handleTypeChange}/>
                 </div>
 
                 {initialAnswerVariants.map((answer, index) => (
                     <AnswerOption
                         key={answer.id || index}
-                        selectedType={selectedType}
+                        selectedType={questionType}
                         index={index + 1}
                         value={answer.text}
                         onChange={(value) => handleAnswerChange(index, value)}
diff --git a/SurveyFrontend/src/components/QuestionsList/QuestionsList.tsx b/SurveyFrontend/src/components/QuestionsList/QuestionsList.tsx
index 24dcdb9..1043330 100644
--- a/SurveyFrontend/src/components/QuestionsList/QuestionsList.tsx
+++ b/SurveyFrontend/src/components/QuestionsList/QuestionsList.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React from "react";
 import QuestionItem from "../QuestionItem/QuestionItem.tsx";
 import AddQuestionButton from "../AddQuestionButton/AddQuestionButton.tsx";
 import {addNewQuestion, deleteQuestion, getListQuestions} from "../../api/QuestionApi.ts";
@@ -13,7 +13,7 @@ interface QuestionsListProps {
 export interface Question {
     id: number;
     text: string;
-    questionType: 'singleanswerquestion' | 'multipleanswerquestion';
+    questionType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion';
     answerVariants: Array<{
         id?: number;
         text: string;
@@ -21,14 +21,12 @@ export interface Question {
 }
 
 const QuestionsList: React.FC<QuestionsListProps> = ({questions, setQuestions, surveyId}) => {
-    const [selectedType, setSelectedType] = useState<'single' | 'multiply'>('single');
-
     const handleAddQuestion = async () => {
         if (!surveyId) {
             const newQuestion: Question = {
                 id: questions.length + 1,
                 text: '',
-                questionType: selectedType === 'single' ? 'singleanswerquestion' : 'multipleanswerquestion',
+                questionType: 'SingleAnswerQuestion',
                 answerVariants: [{ text: '' }],
             };
             setQuestions([...questions, newQuestion]);
@@ -38,13 +36,13 @@ const QuestionsList: React.FC<QuestionsListProps> = ({questions, setQuestions, s
         try {
             const newQuestion = await addNewQuestion(surveyId, {
                 title: '',
-                questionType: selectedType === 'single' ? 'singleanswerquestion' : 'multipleanswerquestion'
+                questionType: 'SingleAnswerQuestion'
             });
 
             const questionToAdd: Question = {
                 id: newQuestion.id,
                 text: newQuestion.title,
-                questionType: newQuestion.questionType as 'singleanswerquestion' | 'multipleanswerquestion',
+                questionType: newQuestion.questionType,
                 answerVariants: []
             };
 
@@ -101,6 +99,14 @@ const QuestionsList: React.FC<QuestionsListProps> = ({questions, setQuestions, s
         setQuestions(newQuestions);
     };
 
+    const handleQuestionTypeChange = (questionId: number, newType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => {
+        setQuestions(questions.map(question =>
+            question.id === questionId
+                ? {...question, questionType: newType}
+                : question
+        ));
+    };
+
     return (
         <>
             {questions.map((question) => (
@@ -112,8 +118,8 @@ const QuestionsList: React.FC<QuestionsListProps> = ({questions, setQuestions, s
                     onAnswerVariantsChange={(variants) => handleAnswerVariantsChange(question.id, variants)}
                     onDeleteQuestion={() => handleDeleteQuestion(question.id)}
                     onChangeQuestion={(value) => handleQuestionChange(question.id, value)}
-                    selectedType={selectedType}
-                    setSelectedType={setSelectedType}
+                    initialQuestionType={question.questionType}
+                    onQuestionTypeChange={(type) => handleQuestionTypeChange(question.id, type)}
                     surveyId={surveyId}
                 />
             ))}
diff --git a/SurveyFrontend/src/components/Survey/Survey.tsx b/SurveyFrontend/src/components/Survey/Survey.tsx
index b0f5448..802e0d4 100644
--- a/SurveyFrontend/src/components/Survey/Survey.tsx
+++ b/SurveyFrontend/src/components/Survey/Survey.tsx
@@ -15,7 +15,7 @@ const Survey: React.FC = () => {
     const [survey] = useState<ISurvey | null>(null);
 
     const [questions, setQuestions] = useState<Question[]>([
-        { id: 1, text: '', questionType: 'singleanswerquestion', answerVariants: [{ text: '' }]},
+        { id: 1, text: '', questionType: 'SingleAnswerQuestion', answerVariants: [{ text: '' }]},
     ]);
 
     const handleSave = async () => {
diff --git a/SurveyFrontend/src/components/SurveyPage/SurveyPage.tsx b/SurveyFrontend/src/components/SurveyPage/SurveyPage.tsx
index e6e4655..9a7e8da 100644
--- a/SurveyFrontend/src/components/SurveyPage/SurveyPage.tsx
+++ b/SurveyFrontend/src/components/SurveyPage/SurveyPage.tsx
@@ -27,7 +27,7 @@ interface QuestionActionData {
     surveyId: number;
     id?: number;
     title: string;
-    questionType: 'singleanswerquestion' | 'multipleanswerquestion';
+    questionType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion';
 }
 
 interface AnswerActionData {
@@ -188,7 +188,7 @@ export const SurveyPage: React.FC = () => {
                     return {
                         id: q.id,
                         text: q.title,
-                        questionType: q.questionType as 'singleanswerquestion' | 'multipleanswerquestion',
+                        questionType: q.questionType as 'SingleAnswerQuestion' | 'MultipleAnswerQuestion',
                         answerVariants: answerVariants.map((a: IAnswerVariant) => ({
                             id: a.id,
                             text: a.text
@@ -233,7 +233,7 @@ export const SurveyPage: React.FC = () => {
                             surveyId: id,
                             id: question.id,
                             title: question.text,
-                            questionType: question.questionType
+                            questionType: question.questionType // Убедитесь, что передается новый тип
                         } as QuestionActionData & { id: number }
                     });
                 }
@@ -284,7 +284,7 @@ export const SurveyPage: React.FC = () => {
                 return {
                     id: q.id,
                     text: q.title,
-                    questionType: q.questionType as 'singleanswerquestion' | 'multipleanswerquestion',
+                    questionType: q.questionType as 'SingleAnswerQuestion' | 'MultipleAnswerQuestion',
                     answerVariants: answerVariants.map((a: IAnswerVariant) => ({
                         id: a.id,
                         text: a.text
diff --git a/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.module.css b/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.module.css
index dd347b2..ac7dc68 100644
--- a/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.module.css
+++ b/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.module.css
@@ -25,6 +25,7 @@
 
 .selectedTypeIcon {
     margin-right: 4px;
+    width: 22px;
 }
 
 .dropdownArrow {
diff --git a/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.tsx b/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.tsx
index 8657e9d..be472f8 100644
--- a/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.tsx
+++ b/SurveyFrontend/src/components/TypeDropdown/TypeDropdown.tsx
@@ -6,8 +6,8 @@ import Multiple from '../../assets/check_box.svg?react';
 import styles from './TypeDropdown.module.css'
 
 interface TypeDropdownProps {
-    selectedType: 'single' | 'multiply';
-    onTypeChange: (type: 'single' | 'multiply') => void;
+    selectedType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion';
+    onTypeChange: (type: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => void;
 }
 
 const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange}) => {
@@ -18,7 +18,7 @@ const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange})
         setIsOpen(!isOpen);
     }
 
-    const handleSelect = (value: 'single' | 'multiply') => {
+    const handleSelect = (value: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => {
         onTypeChange(value);
         setIsOpen(false);
     }
@@ -39,15 +39,15 @@ const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange})
     return (
         <div className={styles.dropdownContainer} ref={dropdownRef}>
             <button className={styles.dropdownButton} onClick={handleToggle}>
-                {selectedType === 'single' ? <Single className={styles.selectedTypeIcon} /> : <Multiple className={styles.selectedTypeIcon} />}
-                {selectedType === "single" ? "Одиночный выбор" : "Множественный выбор"}
+                {selectedType === 'SingleAnswerQuestion' ? <Single className={styles.selectedTypeIcon} /> : <Multiple className={styles.selectedTypeIcon} />}
+                {selectedType === "SingleAnswerQuestion" ? "Одиночный выбор" : "Множественный выбор"}
                 {isOpen ? <DropUp className={styles.dropdownArrow} /> : <DropDown className={styles.dropdownArrow}/>}
             </button>
 
             {isOpen && (
                 <ul className={styles.dropdownList}>
                     <li>
-                        <button onClick={() => handleSelect("single")}
+                        <button onClick={() => handleSelect("SingleAnswerQuestion")}
                                 className={styles.dropdownItem}>
                             <Single className={styles.dropdownItemIcon}/>{' '}
                             Одиночный выбор
@@ -55,7 +55,7 @@ const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange})
                     </li>
                     <li>
                         <button className={styles.dropdownItem}
-                                onClick={() => handleSelect("multiply")}>
+                                onClick={() => handleSelect('MultipleAnswerQuestion')}>
                             <Multiple className={styles.dropdownItemIcon}/>{' '}
                             Множественный выбор
                         </button>