From 33f2b5ef62aeffbb8a66a507f49a6876be4ce923 Mon Sep 17 00:00:00 2001
From: Tatiana Nikolaeva <tnik0402@gmail.com>
Date: Mon, 26 May 2025 10:11:53 +0500
Subject: [PATCH] fix surveyInfo

---
 SurveyFrontend/src/api/SurveyApi.ts           |  1 +
 .../components/MySurveyList/MySurveyList.tsx  | 13 ++++-
 .../src/components/Results/Results.tsx        | 18 ++++---
 .../SettingSurvey/SettingSurvey.module.css    |  1 +
 .../SettingSurvey/SettingSurvey.tsx           | 48 +++++--------------
 .../src/components/SurveyInfo/SurveyInfo.tsx  |  4 +-
 .../src/components/SurveyPage/SurveyPage.tsx  | 33 ++++++++-----
 .../SurveyCreateAndEditingPage.tsx            | 35 +++++++++++++-
 8 files changed, 91 insertions(+), 62 deletions(-)

diff --git a/SurveyFrontend/src/api/SurveyApi.ts b/SurveyFrontend/src/api/SurveyApi.ts
index d182347..4c20c73 100644
--- a/SurveyFrontend/src/api/SurveyApi.ts
+++ b/SurveyFrontend/src/api/SurveyApi.ts
@@ -5,6 +5,7 @@ export interface ISurvey {
     title: string;
     description: string;
     createdBy: number;
+    createdAt: string;
 }
 
 export interface INewSurvey{
diff --git a/SurveyFrontend/src/components/MySurveyList/MySurveyList.tsx b/SurveyFrontend/src/components/MySurveyList/MySurveyList.tsx
index 6fa3d1a..8083640 100644
--- a/SurveyFrontend/src/components/MySurveyList/MySurveyList.tsx
+++ b/SurveyFrontend/src/components/MySurveyList/MySurveyList.tsx
@@ -13,6 +13,17 @@ export const MySurveyList = () => {
     const navigate = useNavigate();
     const [surveys, setSurveys] = useState<MySurveyItem[]>([]);
 
+    const formatDate = (dateString: string) => {
+        const date = new Date(dateString);
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const year = date.getFullYear();
+        const hours = String(date.getHours()).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+
+        return `${day}/${month}/${year} ${hours}:${minutes}`;
+    };
+
     useEffect(() => {
         const fetchSurvey = async () => {
             try {
@@ -63,7 +74,7 @@ export const MySurveyList = () => {
                             <h1 className={styles.title}>{survey.title}</h1>
                             <h2 className={styles.description}>{survey.description}</h2>
                         </div>
-                        <span className={styles.date}>Дата создания: {survey.createdBy}</span>
+                        <span className={styles.date}>Дата создания: {formatDate(survey.createdAt)}</span>
                     </div>
                     <div className={styles.container}>
                         <div className={`${styles.status} ${
diff --git a/SurveyFrontend/src/components/Results/Results.tsx b/SurveyFrontend/src/components/Results/Results.tsx
index d41409c..ed0e4be 100644
--- a/SurveyFrontend/src/components/Results/Results.tsx
+++ b/SurveyFrontend/src/components/Results/Results.tsx
@@ -1,18 +1,22 @@
 import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
 import styles from './Results.module.css'
-import {useState} from "react";
+import {useOutletContext} from "react-router-dom";
+import {ISurvey} from "../../api/SurveyApi.ts";
 
 export const Results = () => {
-    const [descriptionSurvey, setDescriptionSurvey] = useState('');
-    const [titleSurvey, setTitleSurvey] = useState('Название опроса');
+
+    const { survey, setSurvey } = useOutletContext<{
+        survey: ISurvey;
+        setSurvey: (survey: ISurvey) => void;
+    }>();
 
     return(
         <div className={styles.results}>
             <SurveyInfo
-                titleSurvey={titleSurvey}
-                descriptionSurvey={descriptionSurvey}
-                setDescriptionSurvey={setDescriptionSurvey}
-                setTitleSurvey={setTitleSurvey}
+                titleSurvey={survey.title}
+                descriptionSurvey={survey.description}
+                setDescriptionSurvey={(value) => setSurvey({ ...survey, description: value })}
+                setTitleSurvey={(value) => setSurvey({ ...survey, title: value })}
             />
         </div>
     )
diff --git a/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css b/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
index 055808d..fd5b485 100644
--- a/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
+++ b/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
@@ -2,6 +2,7 @@
 
 .settingSurvey{
     width: 85%;
+    height: 100vh;
 }
 
 .startEndTime{
diff --git a/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.tsx b/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.tsx
index a01c61c..bec8a4c 100644
--- a/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.tsx
+++ b/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.tsx
@@ -1,51 +1,25 @@
-import React, {useState} from 'react';
+import React from 'react';
 import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
 import styles from "./SettingSurvey.module.css";
 import TimeEvent from "../TimeEvent/TimeEvent.tsx";
 import SaveButton from "../SaveButton/SaveButton.tsx";
-// import {useParams} from "react-router-dom";
-// import {getSurveyById, ISurvey} from "../../api/SurveyApi.ts";
+import {ISurvey} from "../../api/SurveyApi.ts";
+import {useOutletContext} from "react-router-dom";
 
 
 const SettingSurvey: React.FC = () => {
-    const [descriptionSurvey, setDescriptionSurvey] = useState('');
-    // const [survey, setSurvey] = useState<ISurvey | null>(null);
-    const [titleSurvey, setTitleSurvey] = useState('');
-    // const { surveyId } = useParams<{ surveyId: string }>();
-
-    // useEffect(() => {
-    //     if (!surveyId) {
-    //         console.error('Survey ID is missing');
-    //         return;
-    //     }
-    //     const id = parseInt(surveyId);
-    //     if (isNaN(id)) {
-    //         console.error('Invalid survey ID');
-    //         return;
-    //     }
-    //
-    //     const fetchData = async () => {
-    //         try {
-    //             const surveyData = await getSurveyById(id);
-    //             setSurvey(surveyData);
-    //             setTitleSurvey(surveyData.title);
-    //             setDescriptionSurvey(surveyData.description);
-    //         } catch (error) {
-    //             console.error('Ошибка:', error);
-    //         }
-    //     };
-    //
-    //     fetchData();
-    //
-    // }, [surveyId]);
+    const { survey, setSurvey } = useOutletContext<{
+        survey: ISurvey;
+        setSurvey: (survey: ISurvey) => void;
+    }>();
 
     return (
         <div className={styles.settingSurvey}>
             <SurveyInfo
-                titleSurvey={titleSurvey}
-                descriptionSurvey={descriptionSurvey}
-                setDescriptionSurvey={setDescriptionSurvey}
-                setTitleSurvey={setTitleSurvey}
+                titleSurvey={survey.title}
+                descriptionSurvey={survey.description}
+                setDescriptionSurvey={(value) => setSurvey({ ...survey, description: value })}
+                setTitleSurvey={(value) => setSurvey({ ...survey, title: value })}
             />
             <div className={styles.startEndTime}>
                 <TimeEvent title='Время начала'/>
diff --git a/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx b/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx
index 57e04c1..3ce15ff 100644
--- a/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx
+++ b/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx
@@ -88,7 +88,7 @@ const SurveyInfo: React.FC<SurveyInfoProps> = ({titleSurvey, setDescriptionSurve
     }
 
     const renderTitle = () => {
-        if (isSurveyViewPage || isCompleteSurveyActive) {
+        if (isCompleteSurveyActive) {
             return (
                 <button className={styles.titleSurvey}>
                     <h1>{titleSurvey || 'Название опроса'}</h1>
@@ -176,4 +176,4 @@ const SurveyInfo: React.FC<SurveyInfoProps> = ({titleSurvey, setDescriptionSurve
 
 };
 
-export default SurveyInfo;
+export default SurveyInfo;
\ No newline at end of file
diff --git a/SurveyFrontend/src/components/SurveyPage/SurveyPage.tsx b/SurveyFrontend/src/components/SurveyPage/SurveyPage.tsx
index 9a7e8da..16c2db9 100644
--- a/SurveyFrontend/src/components/SurveyPage/SurveyPage.tsx
+++ b/SurveyFrontend/src/components/SurveyPage/SurveyPage.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
 import QuestionsList, { Question } from "../QuestionsList/QuestionsList.tsx";
-import { getSurveyById, ISurvey, updateSurvey } from "../../api/SurveyApi.ts";
-import { useParams } from "react-router-dom";
+import { ISurvey, updateSurvey } from "../../api/SurveyApi.ts";
+import {useOutletContext} from "react-router-dom";
 import { addNewQuestion, getListQuestions, updateQuestion, deleteQuestion } from "../../api/QuestionApi.ts";
 import styles from "./SurveyPage.module.css";
 import SaveButton from "../SaveButton/SaveButton.tsx";
@@ -153,22 +153,28 @@ class ActionQueue {
 }
 
 export const SurveyPage: React.FC = () => {
-    const [survey, setSurvey] = useState<ISurvey | null>(null);
+    // const [survey, setSurvey] = useState<ISurvey | null>(null);
     const [questions, setQuestions] = useState<Question[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
-    const { surveyId } = useParams<{ surveyId: string }>();
+    // const { surveyId } = useParams<{ surveyId: string }>();
 
     const [description, setDescription] = useState('');
     const [title, setTitle] = useState('');
 
+    const { survey, setSurvey } = useOutletContext<{
+        survey: ISurvey;
+        setSurvey: (survey: ISurvey) => void;
+    }>();
+
     useEffect(() => {
-        if (!surveyId) {
+        if (!survey.id) {
             console.error('Survey ID is missing');
             return;
         }
 
-        const id = parseInt(surveyId);
+        // const id = parseInt(survey.id);
+        const id = survey.id;
         if (isNaN(id)) {
             console.error('Invalid survey ID');
             return;
@@ -177,10 +183,10 @@ export const SurveyPage: React.FC = () => {
         const fetchData = async () => {
             try {
                 setLoading(true);
-                const surveyData = await getSurveyById(id);
-                setSurvey(surveyData);
-                setTitle(surveyData.title);
-                setDescription(surveyData.description);
+                // const surveyData = await getSurveyById(id);
+                setSurvey(survey);
+                setTitle(survey.title);
+                setDescription(survey.description);
 
                 const questionsData = await getListQuestions(id);
                 const formattedQuestions = await Promise.all(questionsData.map(async q => {
@@ -205,14 +211,15 @@ export const SurveyPage: React.FC = () => {
         };
 
         fetchData();
-    }, [surveyId]);
+    }, [survey.id]);
 
     const handleSave = async () => {
-        if (!surveyId || !survey) return;
+        if (!survey.id || !survey) return;
 
         try {
             setError(null);
-            const id = parseInt(surveyId);
+            // const id = parseInt(survey.id);
+            const id = survey.id;
             const actionQueue = new ActionQueue();
 
             actionQueue.add({
diff --git a/SurveyFrontend/src/pages/SurveyCreateAndEditingPage/SurveyCreateAndEditingPage.tsx b/SurveyFrontend/src/pages/SurveyCreateAndEditingPage/SurveyCreateAndEditingPage.tsx
index a093d06..c1b78ff 100644
--- a/SurveyFrontend/src/pages/SurveyCreateAndEditingPage/SurveyCreateAndEditingPage.tsx
+++ b/SurveyFrontend/src/pages/SurveyCreateAndEditingPage/SurveyCreateAndEditingPage.tsx
@@ -1,16 +1,47 @@
 import Header from "../../components/Header/Header.tsx";
 import Navigation from "../../components/Navigation/Navigation.tsx";
 import styles from './SurveyCreateAndEditingPage.module.css'
-import { Outlet } from "react-router-dom";
+import {Outlet, useParams, useLocation} from "react-router-dom";
+import {useEffect, useState} from "react";
+import {getSurveyById, ISurvey} from "../../api/SurveyApi.ts";
 
 export const SurveyCreateAndEditingPage = () => {
+    const { surveyId } = useParams<{ surveyId: string }>();
+    const location = useLocation();
+    const [survey, setSurvey] = useState<ISurvey | null>(null);
+    const [loading, setLoading] = useState(false);
+
+    const isCreateMode = location.pathname.includes('/survey/create');
+
+    useEffect(() => {
+        if (isCreateMode || !surveyId) return;
+
+        setLoading(true);
+        const fetchSurvey = async () => {
+            try {
+                const data = await getSurveyById(parseInt(surveyId));
+                setSurvey(data);
+            } catch (error) {
+                console.error("Ошибка загрузки опроса:", error);
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchSurvey();
+    }, [surveyId, isCreateMode]);
+
+    if (!isCreateMode) {
+        if (loading) return <div>Загрузка...</div>;
+        if (!survey) return <div>Опрос не найден</div>;
+    }
+
     return (
         <div className={styles.layout}>
             <Header />
             <div className={styles.main}>
                 <Navigation />
                 <div className={styles.content}>
-                    <Outlet />
+                    <Outlet context={{ survey, setSurvey }}/>
                 </div>
             </div>
         </div>