From 4dc1d1a12bfd2af1f9df39add40ee9a365bcb48b Mon Sep 17 00:00:00 2001 From: Demi-Play Date: Sat, 23 Dec 2023 07:38:29 +0300 Subject: [PATCH] functional 1 added create meets, check meets, edit meets [edit meets not stable] --- src/App.jsx | 2 +- src/Components/HomePage/index.jsx | 54 +++--- src/Components/TableMeets/style.module.scss | 4 +- src/components/Home/Home.jsx | 69 +++---- src/components/Home/style.css | 12 +- src/components/edit/EditForm.jsx | 104 ++++++++++ src/components/fetchUtils/FetchUtils.jsx | 198 ++++++++++++++------ src/components/post/PostForm.jsx | 46 +++++ 8 files changed, 368 insertions(+), 121 deletions(-) create mode 100644 src/components/edit/EditForm.jsx create mode 100644 src/components/post/PostForm.jsx diff --git a/src/App.jsx b/src/App.jsx index b7b7dfa..a1f63b7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,6 @@ import './App.css' -import FetchUtils from './components/fetchUtils/FetchUtils' +import FetchUtils from './components/fetchUtils/FetchUtils.jsx' // import TableMeets from './components/fetchUtils/TableMeets.jsx' import { BrowserRouter, Routes, Route } from "react-router-dom"; import BeingPage from "./Components/BeingPage/index.jsx"; diff --git a/src/Components/HomePage/index.jsx b/src/Components/HomePage/index.jsx index 993bbc7..a05cd80 100644 --- a/src/Components/HomePage/index.jsx +++ b/src/Components/HomePage/index.jsx @@ -2,30 +2,35 @@ import Header from "../Header"; import styles from "./style.module.scss"; import TableMeets from '../TableMeets/TableMeets' import Home from "../Home/Home"; +import FetchUtils from "../fetchUtils/FetchUtils"; +import EditForm from "../edit/EditForm"; +import PostForm from "../post/PostForm"; -const events = [ - { - id: 1, - date: '10.10.2022', - time: '14:00', - title: 'Мероприятие 1', - speaker: 'Спикер 1', - avatar: 'speaker1.jpg', - description: 'Описание мероприятия 1', - isExpanded: true, - }, - { - id: 2, - date: '11.10.2022', - time: '15:30', - title: 'Мероприятие 2', - speaker: 'Спикер 2', - avatar: 'speaker2.jpg', - description: 'Описание мероприятия 2', - isExpanded: true, - }, - // Добавьте другие мероприятия сюда - ]; +const APIURL = '' + +// const events = [ +// { +// id: 1, +// date: '10.10.2022', +// time: '14:00', +// title: 'Мероприятие 1', +// speaker: 'Спикер 1', +// avatar: 'speaker1.jpg', +// description: 'Описание мероприятия 1', +// isExpanded: true, +// }, +// { +// id: 2, +// date: '11.10.2022', +// time: '15:30', +// title: 'Мероприятие 2', +// speaker: 'Спикер 2', +// avatar: 'speaker2.jpg', +// description: 'Описание мероприятия 2', +// isExpanded: true, +// }, +// // Добавьте другие мероприятия сюда +// ]; const HomePage = () => { return ( <> @@ -62,6 +67,9 @@ const HomePage = () => {
+ {/* */} + + diff --git a/src/Components/TableMeets/style.module.scss b/src/Components/TableMeets/style.module.scss index 7b9e879..1b1a081 100644 --- a/src/Components/TableMeets/style.module.scss +++ b/src/Components/TableMeets/style.module.scss @@ -47,8 +47,8 @@ justify-content: center; align-items: center; } - &__arrow { + // &__arrow { - } + // } } diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx index 625456b..d395d2d 100644 --- a/src/components/Home/Home.jsx +++ b/src/components/Home/Home.jsx @@ -1,7 +1,8 @@ import React from 'react'; -// import Header from '../Header'; import './style.css' import styled from 'styled-components'; +import { HttpApiMethods } from '../fetchUtils/FetchUtils'; +import EditForm from '../post/PostForm'; const Taged = styled.div({ borderRadius: 10, @@ -9,46 +10,38 @@ const Taged = styled.div({ }) +const httpApiMethods = new HttpApiMethods() + +const meets = await httpApiMethods.GetMeetings() + const Home = () => { + + function extractDateTime(dateString) { + const dateTime = new Date(dateString); + const date = dateTime.toLocaleDateString(); + const time = dateTime.toLocaleTimeString(); + + return { date, time }; + } + return (
- {/*
*/} -
-
-
-
Психология
-
Предстоящее
-
-

Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»

-

22 декабря, с 10:00 до 22:00 по Московскому времени

-
-
-
-
-
Психология
-
Предстоящее
-
-

Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»

-

22 декабря, с 10:00 до 22:00 по Московскому времени

-
-
-
-
-
Психология
-
Предстоящее
-
-

Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»

-

22 декабря, с 10:00 до 22:00 по Московскому времени

-
-
-
-
-
Психология
-
Предстоящее
-
-

Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»

-

22 декабря, с 10:00 до 22:00 по Московскому времени

-
+ {Array.isArray(meets) ? ( + meets.map((item, index) => ( +
+
{item.speackerImage}
+
+
{item.tags}
+
{item.type}
+
+

{item.title}

+

{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени

+
+ )) + ) : ( +

Неверный тип данных с сервера!

+ )} + {/* */}
); } diff --git a/src/components/Home/style.css b/src/components/Home/style.css index abe2b11..d918e27 100644 --- a/src/components/Home/style.css +++ b/src/components/Home/style.css @@ -3,12 +3,14 @@ height: 626px; flex-shrink: 0; margin-top: 100px; - margin-right: 31px; + margin-right: 11px; } .wrapp { display: flex; justify-content: flex-start; + flex-wrap: wrap; + margin-left: 40px; /* max-width: 1521px; */ } @@ -18,6 +20,7 @@ .event-card_date { color: var(--gray_text, #888); + text-align: left; /* title */ font-family: Montserrat; @@ -43,6 +46,13 @@ margin-bottom: 26px; font-style: normal; font-weight: 400; line-height: normal; + text-align: left; +} + +.img { + width: 292px; + height: 340px; + flex-shrink: 0; } .feautures { diff --git a/src/components/edit/EditForm.jsx b/src/components/edit/EditForm.jsx new file mode 100644 index 0000000..113d105 --- /dev/null +++ b/src/components/edit/EditForm.jsx @@ -0,0 +1,104 @@ +import React, { useRef, useState, useEffect } from 'react'; +import { HttpApiMethods } from '../fetchUtils/FetchUtils'; + +const EditForm = () => { + const formRef = useRef(null); + const [dataIsLoad, setDataIsLoad] = useState(false); + const httpApiMethods = new HttpApiMethods(); + + const post = async (event) => { + event.preventDefault(); // Предотвращение действия по умолчанию + let formData = new FormData(formRef.current); + setDataIsLoad(false); + const updatedMeets = httpApiMethods.EditMeetings(formData) + .then(() => { + setDataIsLoad(true); + }); + }; + + const handleData = (data) => { + if (Array.isArray(data) && data.length > 0) { + setData(data); + } else { + setData([]); + console.error('Неверный тип данных с сервера!'); + } + }; + + const fetchData = async () => { + try { + const data = await httpApiMethods.GetMeetings(); + handleData(data); + } catch (error) { + console.error(error); + } + }; + + const [data, setData] = useState([]); + const [selectedId, setSelectedId] = useState(''); + const [selectedData, setSelectedData] = useState(null); + + const handleDataClick = (id) => { + const selected = data.find((item) => item.id === id); + setSelectedData(selected); + }; + + const handleChange = (event) => { + setSelectedData({ + ...selectedData, + [event.target.name]: event.target.value + }); + }; + + useEffect(() => { + fetchData(); + }, []); + + const FillInputs = () => { + httpApiMethods.GetByID() + } + + return ( +
+

Edit

+
{dataIsLoad ? "Данные успешно загружены" : ""}
+ +
    + {Array.isArray(data) && data.length > 0 ? ( + data.map((item, index) => ( + + )) + ) : ( +

    Неверный тип данных с сервера!

    + )} +
+ {/* автозаполнение инпутов */} + {selectedData && ( + <> +
+ + + + + + + + + + + + + + +
+ + )} + +
+ ); +}; + +export default EditForm; diff --git a/src/components/fetchUtils/FetchUtils.jsx b/src/components/fetchUtils/FetchUtils.jsx index fb05eb9..3a72775 100644 --- a/src/components/fetchUtils/FetchUtils.jsx +++ b/src/components/fetchUtils/FetchUtils.jsx @@ -5,64 +5,150 @@ import './style.css' +export class HttpApiMethods { + + + + api = axios.create({ + baseURL: "https://cyberbloom.zetcraft.ru/api", + headers: { + "Access-Control-Allow-Origin": "http://localhost:5173", + }, + }); + + APIURL = "https://cyberbloom.zetcraft.ru/api" + APIURL_FILES = "https://cyberbloom.zetcraft.ru/api/cyber-boom-files/" + + GetByID = async (id) => { + let innerUrl = this.APIURL + `/meetings?id=${id}` + + const response = await axios.get(innerUrl) + + return response.data; + } + + GetMeetings = async () => { + let innerUrl = this.APIURL + `/meetings/list?offset=0&limit=20`; + + const response = await axios.get(innerUrl); + + return response.data; + } + + // createForm = (data) => { + // const [formDat, setFormDat] = useState({}); + + // const handleChange = (e) => { + // setFormDat({ ...formDat, [e.target.name]: e.target.value }); + // }; + + // const handleSubmit = (e) => { + // let innerUrl = this.APIURL + `/meetings` + // e.preventDefault(); + // // Отправка объекта формы на сервер + // fetch(innerUrl, { + // method: 'POST', + // body: JSON.stringify(formDat), + // headers: { + // 'Content-Type': 'application/json', + // }, + // }) + // .then((response) => response.json()) + // .then((data) => { + // // Обработка ответа от сервера + // console.log(data); + // }) + // .catch((error) => { + // // Обработка ошибок + // console.error(error); + // }); + // }; + // let fields = Object.keys(data); + + // let formData = new FormData(); + // fields.forEach(f => { + + // formData.append(f, data[f]); + // }) + // handleChange(data) + // handleSubmit(data) + + // return formData; + // } + AddMeetings = async (data) => { + let innerUrl = this.APIURL + `/meetings`; + + let response = await axios.postForm(innerUrl, data); + return response.data; + + } + + EditMeetings = async (data) => { + api.get("/meetings").then((response) => { + console.log(response.data); + return response.data; + }); + + + } + + DeleteMeetings = async (id) => { + let innerUrl = this.APIURL + `/meetings?id=${id}` + + const response = await axios.get(innerUrl) + + return response.data; + } +} + + + +const httpApiMethods = new HttpApiMethods() // Создание экземпляра класса HttpApiMethods + +const meets = httpApiMethods.GetMeetings() + const FetchUtils = () => { - // default value of data is object or array/nums/string - // const [rata, setRata] = useState([]) - const [user, setUser] = useState([]) - // single axios feetching - // useEffect( - // () => { - // async function getData() { - // const response = await axios.get('http://localhost:5000/weatherforecast') - // console.log(response.data) - // setRata(response.data) - // } - // getData() - // }, [] - // ) - // useEffect( - // () => { - async function getData() { - const response = await axios.get('https://jsonplaceholder.typicode.com/users') - console.log(response.data) - setUser(response.data) - } - // getData() - // }, [] - // ) - // Loop of axios fetching \\ + const [user, setUser] = useState([]) - // async function getData() { - // const response = await axios.get('http://localhost:5000/weatherforecast') - // console.log(response.data) - // setRata(response.data) - // } - // getData() - const removeList = () => { - setUser([]) - } - return ( - <> - - - {/* Mapping of data */} -
- {Array.isArray(user) ? ( -
    - {user.map((item) => ( -
      -
    1. {item.name}
      2. -
    2. {item.username}
      3. -
    3. {item.email}
      4. -
    - ))} -
- ) : ( -

Bad data type from server!

- )} -
- - ); + async function getData() { + const response = await axios.get(APIURL) + console.log(response.data) + setUser(response.data) + } + + const removeList = () => { + setUser([]) + } + + return ( + <> + + + {/* Mapping of data */} +
+ {Array.isArray(meets) ? ( +
    + {meets.map((item) => ( +
      +
    1. {item.title}
      2. +
    2. {item.time}
      3. +
    3. {item.speakerName}
      4. +
    4. {item.speackerImage}
      5. +
    5. {item.splecializations}
      6. +
    6. {item.type}
      7. +
    7. {item.speakerTelephone}
      8. +
    8. {item.speakerEmail}
      9. +
    9. {item.tags}
      10. +
    10. {item.videoUrl}
      11. +
    + ))} +
+ ) : ( +

Bad data type from server!

+ )} +
+ + ); } export default FetchUtils; \ No newline at end of file diff --git a/src/components/post/PostForm.jsx b/src/components/post/PostForm.jsx new file mode 100644 index 0000000..37ee068 --- /dev/null +++ b/src/components/post/PostForm.jsx @@ -0,0 +1,46 @@ +import React, { useRef, useState } from 'react'; +import { HttpApiMethods } from '../fetchUtils/FetchUtils'; + + +const PostForm = () => { + const formRef = useRef(null); // Добавление этой строки + const [dataIsLoad, setDataIsLoad] = useState(false) + + let post = async () => { + const httpApiMethods = new HttpApiMethods(); + let formData = new FormData(formRef.current); // Изменение этой строки + setDataIsLoad(false) + const updatedMeets = httpApiMethods.AddMeetings(formData) + .then( + () => { + setDataIsLoad(true) + + } + ) + + } + + return ( +
+

Post

+
{dataIsLoad ? "ДАнные успешно загрузилисб" : ""}
+
+ + + + + + + + + + + + + +
+
+ ); +} + +export default PostForm;