From 64c4bdae31a39e122ca2c5b8c50f0df7abb941a5 Mon Sep 17 00:00:00 2001 From: Demi-Play Date: Sat, 23 Dec 2023 17:33:06 +0300 Subject: [PATCH] edit --- src/App.jsx | 2 +- src/Components/HomePage/index.jsx | 6 +- src/components/Home/Home.jsx | 2 +- src/components/edit/EditForm.jsx | 37 ++--- src/components/fetchUtils/FetchUtils.jsx | 154 ------------------ src/components/post/PostForm.jsx | 14 +- src/components/utils/FetchUtils.jsx | 104 ++++++++++++ .../{fetchUtils => utils}/style.css | 0 src/main.jsx | 3 + 9 files changed, 138 insertions(+), 184 deletions(-) delete mode 100644 src/components/fetchUtils/FetchUtils.jsx create mode 100644 src/components/utils/FetchUtils.jsx rename src/components/{fetchUtils => utils}/style.css (100%) diff --git a/src/App.jsx b/src/App.jsx index c880548..ee6a996 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,6 @@ import './App.css' -import FetchUtils from './components/fetchUtils/FetchUtils.jsx' +import FetchUtils from './components/utils/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 a05cd80..88956f6 100644 --- a/src/Components/HomePage/index.jsx +++ b/src/Components/HomePage/index.jsx @@ -2,7 +2,7 @@ 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 FetchUtils from "../utils/FetchUtils"; import EditForm from "../edit/EditForm"; import PostForm from "../post/PostForm"; @@ -68,8 +68,8 @@ const HomePage = () => { {/* */} - - + {/* */} + {/* */} diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx index 28c557d..b9b7a8d 100644 --- a/src/components/Home/Home.jsx +++ b/src/components/Home/Home.jsx @@ -1,7 +1,7 @@ import React from 'react'; import './style.css' import styled from 'styled-components'; -import { HttpApiMethods } from '../fetchUtils/FetchUtils'; +import { HttpApiMethods } from '../utils/FetchUtils'; import EditForm from '../post/PostForm'; diff --git a/src/components/edit/EditForm.jsx b/src/components/edit/EditForm.jsx index 113d105..0e207ed 100644 --- a/src/components/edit/EditForm.jsx +++ b/src/components/edit/EditForm.jsx @@ -1,5 +1,5 @@ import React, { useRef, useState, useEffect } from 'react'; -import { HttpApiMethods } from '../fetchUtils/FetchUtils'; +import { HttpApiMethods } from '../utils/FetchUtils'; const EditForm = () => { const formRef = useRef(null); @@ -10,20 +10,17 @@ const EditForm = () => { event.preventDefault(); // Предотвращение действия по умолчанию let formData = new FormData(formRef.current); setDataIsLoad(false); - const updatedMeets = httpApiMethods.EditMeetings(formData) - .then(() => { - setDataIsLoad(true); - }); + const updatedMeets = await httpApiMethods.EditMeetings(formData); }; - const handleData = (data) => { - if (Array.isArray(data) && data.length > 0) { - setData(data); - } else { - setData([]); - console.error('Неверный тип данных с сервера!'); - } - }; + // const handleData = (data) => { + // if (Array.isArray(data) && data.length > 0) { + // setData(data); + // } else { + // setData([]); + // console.error('Неверный тип данных с сервера!'); + // } + // }; const fetchData = async () => { try { @@ -66,8 +63,8 @@ const EditForm = () => {
    {Array.isArray(data) && data.length > 0 ? ( data.map((item, index) => ( - )) @@ -79,19 +76,21 @@ const EditForm = () => { {selectedData && ( <>
    - + - - + + - + + +
    diff --git a/src/components/fetchUtils/FetchUtils.jsx b/src/components/fetchUtils/FetchUtils.jsx deleted file mode 100644 index 3a72775..0000000 --- a/src/components/fetchUtils/FetchUtils.jsx +++ /dev/null @@ -1,154 +0,0 @@ -/* eslint-disable no-unused-vars */ -import axios from "axios" -import { useState } from "react" -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 = () => { - - const [user, setUser] = useState([]) - - 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 index 37ee068..e41febd 100644 --- a/src/components/post/PostForm.jsx +++ b/src/components/post/PostForm.jsx @@ -1,5 +1,5 @@ import React, { useRef, useState } from 'react'; -import { HttpApiMethods } from '../fetchUtils/FetchUtils'; +import { HttpApiMethods } from '../utils/FetchUtils'; const PostForm = () => { @@ -24,8 +24,8 @@ const PostForm = () => {

    Post

    {dataIsLoad ? "ДАнные успешно загрузилисб" : ""}
    -
    - + + @@ -33,10 +33,12 @@ const PostForm = () => { - - - + + + + +
    diff --git a/src/components/utils/FetchUtils.jsx b/src/components/utils/FetchUtils.jsx new file mode 100644 index 0000000..cca9196 --- /dev/null +++ b/src/components/utils/FetchUtils.jsx @@ -0,0 +1,104 @@ +/* eslint-disable no-unused-vars */ +import axios from "axios" +import { useState } from "react" +import './style.css' + + + +export class HttpApiMethods { + // URL`s + APIURL = "https://cyberbloom.zetcraft.ru/api" + APIURL_FILES = "https://cyberbloom.zetcraft.ru/api/cyber-boom-files/" +// получение мероприятий по ID + 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; + } +// Создание мероприятия + AddMeetings = async (data) => { + let innerUrl = this.APIURL + `/meetings`; + + let response = await axios.postForm(innerUrl, data); + return response.data; + + } +// Редактирование уже существующего мероприятия + EditMeetings = async (data) => { + let innerUrl = this.APIURL + `/meetings`; + let response = await axios.putForm(innerUrl, 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 = () => { + + const [user, setUser] = useState([]) + +// 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/fetchUtils/style.css b/src/components/utils/style.css similarity index 100% rename from src/components/fetchUtils/style.css rename to src/components/utils/style.css diff --git a/src/main.jsx b/src/main.jsx index 54b39dd..b81f8d9 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -3,6 +3,9 @@ import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' + + + ReactDOM.createRoot(document.getElementById('root')).render(