api requests

SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx

@@ -1,47 +1,39 @@
 import React, {useState, useRef, useEffect} from "react";
 import styles from './SurveyInfo.module.css'
 import AddDescripImg from '../../assets/add_circle.svg?react';
+import TextareaAutosize from 'react-textarea-autosize';
 
-const SurveyInfo: React.FC = () => {
-    const [descriptionSurvey, setDescriptionSurvey] = useState('');
-    const [titleSurvey, setTitleSurvey] = useState('Название опроса');
+
+interface SurveyInfoProps {
+    titleSurvey: string;
+    descriptionSurvey: string;
+    setDescriptionSurvey: (text: string) => void;
+    setTitleSurvey: (text: string) => void;
+}
+
+const SurveyInfo: React.FC<SurveyInfoProps> = ({titleSurvey, setDescriptionSurvey, descriptionSurvey, setTitleSurvey}) => {
     const [showDescriptionField, setShowDescriptionField] = useState(false);
     const [showNewTitleField, setShowNewTitleField] = useState(false);
     const titleTextareaRef = useRef<HTMLTextAreaElement>(null);
     const descriptionTextareaRef = useRef<HTMLTextAreaElement>(null);
 
-    const adjustTextareaHeight = (textarea: HTMLTextAreaElement | null) => {
-        if (textarea) {
-            // Сброс высоты перед расчетом
-            textarea.style.height = 'auto';
-            // Устанавливаем высоту равной scrollHeight + небольшой отступ
-            textarea.style.height = `${textarea.scrollHeight}px`;
-            // Центрируем содержимое вертикально
-            textarea.style.paddingTop = `${Math.max(0, (textarea.clientHeight - textarea.scrollHeight) / 2)}px`;
-        }
-    };
-
     const handleDescriptionChange = (descripEvent: React.ChangeEvent<HTMLTextAreaElement>) => {
         setDescriptionSurvey(descripEvent.target.value);
-        adjustTextareaHeight(descripEvent.target);
     };
 
     const handleNewTitleChange = (titleEvent: React.ChangeEvent<HTMLTextAreaElement>) => {
         setTitleSurvey(titleEvent.target.value);
-        adjustTextareaHeight(titleEvent.target);
     };
 
     useEffect(() => {
         if (showNewTitleField && titleTextareaRef.current) {
             titleTextareaRef.current.focus();
-            adjustTextareaHeight(titleTextareaRef.current);
         }
     }, [showNewTitleField]);
 
     useEffect(() => {
         if (showDescriptionField && descriptionTextareaRef.current) {
             descriptionTextareaRef.current.focus();
-            adjustTextareaHeight(descriptionTextareaRef.current);
         }
     }, [showDescriptionField]);
 
@@ -91,16 +83,16 @@ const SurveyInfo: React.FC = () => {
         } else if (showDescriptionField) {
             return (
                 <div className={styles.descriptionWrapper}>
-                <textarea
-                    ref={descriptionTextareaRef}
-                    className={styles.textareaDescrip}
-                    value={descriptionSurvey}
-                    placeholder={'Добавить описание'}
-                    onChange={handleDescriptionChange}
-                    onKeyDown={handleDescriptionKeyDown}
-                    onBlur={handleDescriptionBlur}
-                    rows={1} // Начальное количество строк
-                />
+                    <TextareaAutosize
+                        ref={descriptionTextareaRef}
+                        className={styles.textareaDescrip}
+                        value={descriptionSurvey}
+                        placeholder={'Добавить описание'}
+                        onChange={handleDescriptionChange}
+                        onKeyDown={handleDescriptionKeyDown}
+                        onBlur={handleDescriptionBlur}
+                        rows={1}
+                    />
                 </div>
             );
         } else {
@@ -122,7 +114,7 @@ const SurveyInfo: React.FC = () => {
                 {
                     showNewTitleField ? (
                         <h1 className={styles.titleSurvey}>
-                            <textarea className={styles.textareaTitle}
+                            <TextareaAutosize className={styles.textareaTitle}
                                       ref={titleTextareaRef}
                                       value={titleSurvey === 'Название опроса' ? '' : titleSurvey}
                                       placeholder={'Название опроса'}