add page completing survey

SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx

@@ -2,27 +2,34 @@ 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';
+import {useLocation} from "react-router-dom";
 
 
 interface SurveyInfoProps {
     titleSurvey: string;
     descriptionSurvey: string;
-    setDescriptionSurvey: (text: string) => void;
-    setTitleSurvey: (text: string) => void;
+    setDescriptionSurvey?: (text: string) => void;
+    setTitleSurvey?: (text: string) => void;
+    createdAt?: Date;
 }
 
-const SurveyInfo: React.FC<SurveyInfoProps> = ({titleSurvey, setDescriptionSurvey, descriptionSurvey, setTitleSurvey}) => {
+const SurveyInfo: React.FC<SurveyInfoProps> = ({titleSurvey, setDescriptionSurvey, descriptionSurvey, setTitleSurvey, createdAt = new Date()}) => {
     const [showDescriptionField, setShowDescriptionField] = useState(false);
     const [showNewTitleField, setShowNewTitleField] = useState(false);
     const titleTextareaRef = useRef<HTMLTextAreaElement>(null);
     const descriptionTextareaRef = useRef<HTMLTextAreaElement>(null);
 
+    const location = useLocation();
+    const isCompleteSurveyActive = location.pathname === '/complete-survey';
+    const isSurveyViewPage = location.pathname.startsWith('/survey/') &&
+        !location.pathname.startsWith('/survey/create');
+
     const handleDescriptionChange = (descripEvent: React.ChangeEvent<HTMLTextAreaElement>) => {
-        setDescriptionSurvey(descripEvent.target.value);
+        setDescriptionSurvey?.(descripEvent.target.value);
     };
 
     const handleNewTitleChange = (titleEvent: React.ChangeEvent<HTMLTextAreaElement>) => {
-        setTitleSurvey(titleEvent.target.value);
+        setTitleSurvey?.(titleEvent.target.value);
     };
 
     useEffect(() => {
@@ -72,8 +79,52 @@ const SurveyInfo: React.FC<SurveyInfoProps> = ({titleSurvey, setDescriptionSurve
         setShowDescriptionField(false);
     };
 
+    const addDate = () => {
+        const year = createdAt.getFullYear();
+        const month = String(createdAt.getMonth() + 1).padStart(2, '0');
+        const day = String(createdAt.getDate()).padStart(2, '0');
+        return `${day}/${month}/${year}`;
+    }
+
+    const renderTitle = () => {
+        if (isSurveyViewPage || isCompleteSurveyActive) {
+            return (
+                <button className={styles.titleSurvey}>
+                    <h1>{titleSurvey || 'Название опроса'}</h1>
+                </button>
+            )
+        }
+
+        if (showNewTitleField) {
+            return (
+                <h1 className={styles.titleSurvey}>
+                    <TextareaAutosize
+                        className={styles.textareaTitle}
+                        ref={titleTextareaRef}
+                        value={titleSurvey === 'Название опроса' ? '' : titleSurvey}
+                        placeholder={'Название опроса'}
+                        onChange={handleNewTitleChange}
+                        onKeyDown={handleTitleKeyDown}
+                        onBlur={handleTitleBlur}
+                    />
+                </h1>
+            );
+        }
+
+        return (
+            <button className={styles.titleSurvey} onClick={handleAddNewTitleClick}>
+                <h1>{titleSurvey || 'Название опроса'}</h1>
+            </button>
+        );
+    };
 
     const renderDescription = () => {
+        if (isSurveyViewPage || isCompleteSurveyActive) {
+            return descriptionSurvey ? (
+                <p className={styles.desc}>{descriptionSurvey}</p>
+            ) : 'Описание';
+        }
+
         if (descriptionSurvey && !showDescriptionField) {
             return (
                 <button className={styles.description} onClick={handleParagraphClick}>
@@ -106,35 +157,21 @@ const SurveyInfo: React.FC<SurveyInfoProps> = ({titleSurvey, setDescriptionSurve
                 </button>
             );
         }
-    }
+    };
 
     return (
         <div className={styles.blockInfo}>
             <div className={styles.info}>
-                {
-                    showNewTitleField ? (
-                        <h1 className={styles.titleSurvey}>
-                            <TextareaAutosize className={styles.textareaTitle}
-                                      ref={titleTextareaRef}
-                                      value={titleSurvey === 'Название опроса' ? '' : titleSurvey}
-                                      placeholder={'Название опроса'}
-                                      onChange={handleNewTitleChange}
-                                      onKeyDown={handleTitleKeyDown}
-                                      onBlur={handleTitleBlur}
-                            />
-                        </h1>
-                    ) : (
-                        <button className={styles.titleSurvey} onClick={handleAddNewTitleClick}>
-                            <h1>{titleSurvey || 'Название опроса'}</h1>
-                        </button>
-                    )
-                }
-
+                {renderTitle()}
                 {renderDescription()}
 
+                {(isSurveyViewPage || isCompleteSurveyActive) && createdAt && (
+                    <p className={styles.createdAt}>Дата создания: {addDate()}</p>
+                )}
             </div>
         </div>
     );
+
 };
 
 export default SurveyInfo;