src/App.jsx

@@ -1,6 +1,6 @@
 
 import './App.css'
-import FetchUtils from './components/utils/FetchUtils.jsx'
+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";

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 "../utils/FetchUtils";
+import FetchUtils from "../fetchUtils/FetchUtils";
 import EditForm from "../edit/EditForm";
 import PostForm from "../post/PostForm";
 
@@ -68,8 +68,10 @@ const HomePage = () => {
             </div>
             <Home></Home>
             {/* <FetchUtils></FetchUtils> */}
-            {/* <PostForm /> */}
+
-            {/* <EditForm /> */}
+            
+            <PostForm />
+            <EditForm />
         </section>
         
 

src/components/Home/Home.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import './style.css'
 import styled from 'styled-components';
-import { HttpApiMethods } from '../utils/FetchUtils';
+import { HttpApiMethods } from '../fetchUtils/FetchUtils';
 import {useState} from 'react' 
 import EditForm from '../post/PostForm';
 import Grid from '@mui/material/Grid';

src/components/edit/EditForm.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { HttpApiMethods } from '../utils/FetchUtils';
+import { HttpApiMethods } from '../fetchUtils/FetchUtils';
 
 const EditForm = () => {
     const formRef = useRef(null);
@@ -10,17 +10,20 @@ const EditForm = () => {
         event.preventDefault(); // Предотвращение действия по умолчанию
         let formData = new FormData(formRef.current);
         setDataIsLoad(false);
-        const updatedMeets = await httpApiMethods.EditMeetings(formData);
+        const updatedMeets = httpApiMethods.EditMeetings(formData)
+            .then(() => {
+                setDataIsLoad(true);
+            });
     };
 
-    // const handleData = (data) => {
+    const handleData = (data) => {
-    //     if (Array.isArray(data) && data.length > 0) {
+        if (Array.isArray(data) && data.length > 0) {
-    //         setData(data);
+            setData(data);
-    //     } else {
+        } else {
-    //         setData([]);
+            setData([]);
-    //         console.error('Неверный тип данных с сервера!');
+            console.error('Неверный тип данных с сервера!');
-    //     }
+        }
-    // };
+    };
 
     const fetchData = async () => {
         try {
@@ -63,8 +66,8 @@ const EditForm = () => {
                 <ul>
                     {Array.isArray(data) && data.length > 0 ? (
                         data.map((item, index) => (
-                            <button  style={{border: '1px solid black'}} onClick={() => handleDataClick(item.id)} key={index}>
+                            <button onClick={() => handleDataClick(item.id)} key={index}>
-                                {/* {item.id} */}
+                                {item.id}
                                 <div>{item.title}</div>
                             </button>
                         ))
@@ -81,16 +84,14 @@ const EditForm = () => {
                         <input type="text" placeholder='time' name='time' value={selectedData.time} onChange={handleChange} />
                         <input type="text" placeholder='theme' name='theme' value={selectedData.theme} onChange={handleChange} />
                         <input type="text" placeholder='speakerName' name='speakerName' value={selectedData.speakerName} onChange={handleChange} />
-                        <input type="file" placeholder='speackerImage' name='speackerImage' onChange={handleChange} />
+                        <input type="file" placeholder='speackerImage' name='speackerImage'/>
-                        <input type="file" placeholder='placeImages' name='placeImages' onChange={handleChange} />
+                        <input type="file" placeholder='placeImages' name='placeImages'/>
                         <input type="text" placeholder='splecializations' name='splecializations' value={selectedData.splecializations} onChange={handleChange} />
                         <input type="text" placeholder='speakerEmail' name='speakerEmail' value={selectedData.speakerEmail} onChange={handleChange} />
                         <input type="text" placeholder='tags' name='tags' value={selectedData.tags} onChange={handleChange} />
                         <input type="text" placeholder='SpeakerTelephone' name='speakerTelephone' value={selectedData.speakerTelephone} onChange={handleChange} />
                         <input type="text" placeholder='type' name='type' value={selectedData.type} onChange={handleChange} />
-                        <input type="text" placeholder='urls' name='urls' value={selectedData.urls} onChange={handleChange} />
+                        <input type="text" placeholder='videoUrl' name='videoUrl' value={selectedData.videoUrl} onChange={handleChange} />
-                        <input type="text" placeholder='placeAdress' name='placeAdress' value={selectedData.placeAdress} onChange={handleChange} />
-                        <input type="text" placeholder='duration' name='duration' value={selectedData.duration} onChange={handleChange} />
                         <button onClick={post}>Edit</button>
                         </form>
                     </>

src/components/fetchUtils/FetchUtils.jsx

@@ -0,0 +1,154 @@
+/* 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 (
+    <>
+      <button onClick={getData}>Click to Get Data</button>
+      <button onClick={removeList}>Click to Remove Data Listing</button>
+      {/* Mapping of data */}
+      <div>
+        {Array.isArray(meets) ? (
+          <ul>
+            {meets.map((item) => (
+              <ol key={item.id}>
+                <li>{item.title}</li>
+                <li>{item.time}</li>
+                <li>{item.speakerName}</li>
+                <li>{item.speackerImage}</li>
+                <li>{item.splecializations}</li>
+                <li>{item.type}</li>
+                <li>{item.speakerTelephone}</li>
+                <li>{item.speakerEmail}</li>
+                <li>{item.tags}</li>
+                <li>{item.videoUrl}</li>
+              </ol>
+            ))}
+          </ul>
+        ) : (
+          <p>Bad data type from server!</p>
+        )}
+      </div>
+    </>
+  );
+}
+export default FetchUtils;

src/components/post/PostForm.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { HttpApiMethods } from '../utils/FetchUtils';
+import { HttpApiMethods } from '../fetchUtils/FetchUtils';
 
 
 const PostForm = () => {
@@ -24,8 +24,8 @@ const PostForm = () => {
         <div>
             <h2>Post</h2>
             <div>{dataIsLoad ? "ДАнные успешно загрузилисб" : ""}</div>
-            <form ref={formRef} action=''>
+            <form ref={formRef} action='https://cyberbloom.zetcraft.ru/api/meetings'>
-                <input type="text" placeholder='title' name='title'/>
+                <input type="text" placeholder='name' name='title'/>
                 <input type="text" placeholder='time' name='time'/>
                 <input type="text" placeholder='theme' name='theme'/>
                 <input type="text" placeholder='speakerName' name='speakerName'/>
@@ -33,12 +33,10 @@ const PostForm = () => {
                 <input type="file" placeholder='placeImages' name='placeImages'/>
                 <input type="text" placeholder='splecializations' name='splecializations'/>
                 <input type="text" placeholder='speakerEmail' name='speakerEmail'/>
-                <input type="text" placeholder='type' name='type'/>
-                <input type="text" placeholder='SpeakerTelephone' name='speakerTelephone'/>
                 <input type="text" placeholder='tags' name='tags'/>
-                <input type="text" placeholder='urls' name='urls'/>
+                <input type="text" placeholder='SpeakerTelephone' name='speakerTelephone'/>
-                <input type="text" placeholder='placeAdress' name='placeAdress'/>
+                <input type="text" placeholder='type' name='type'/>
-                <input type="text" placeholder='duration' name='duration'/>
+                <input type="text" placeholder='videoUrl' name='videoUrl'/>
                 <button onClick={post}>Create</button>
                 </form>
         </div>

src/components/utils/FetchUtils.jsx

@@ -1,104 +0,0 @@
-/* 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 (
-//     <>
-//       <button onClick={getData}>Click to Get Data</button>
-//       <button onClick={removeList}>Click to Remove Data Listing</button>
-//       {/* Mapping of data */}
-//       <div>
-//         {/* {Array.isArray(meets) ? (
-//           <ul>
-//             {meets.map((item) => (
-//               <ol key={item.id}>
-//                 <li>{item.title}</li>
-//                 <li>{item.time}</li>
-//                 <li>{item.speakerName}</li>
-//                 <li>{item.speackerImage}</li>
-//                 <li>{item.splecializations}</li>
-//                 <li>{item.type}</li>
-//                 <li>{item.speakerTelephone}</li>
-//                 <li>{item.speakerEmail}</li>
-//                 <li>{item.tags}</li>
-//                 <li>{item.videoUrl}</li>
-//               </ol>
-//             ))}
-//           </ul>
-//         ) : (
-//           <p>Bad data type from server!</p>
-//         )} */}
-//       </div>
-//     </>
-//   );
-// }
-// export default FetchUtils;

src/main.jsx

@@ -3,9 +3,6 @@ import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
 
-
-
-
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />