CyberBloom/OgeetoCaseCyberGarden
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
Demi-Play
2023-12-23 17:33:06 +03:00
parent 49f3a2be71
commit 64c4bdae31
9 changed files with 138 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.jsx
View File

@@ -1,6 +1,6 @@
import './App.css' 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 TableMeets from './components/fetchUtils/TableMeets.jsx'
import { BrowserRouter, Routes, Route } from "react-router-dom"; import { BrowserRouter, Routes, Route } from "react-router-dom";
import BeingPage from "./Components/BeingPage/index.jsx"; import BeingPage from "./Components/BeingPage/index.jsx";

6
src/Components/HomePage/index.jsx
View File

@@ -2,7 +2,7 @@ import Header from "../Header";
import styles from "./style.module.scss"; import styles from "./style.module.scss";
import TableMeets from '../TableMeets/TableMeets' import TableMeets from '../TableMeets/TableMeets'
import Home from "../Home/Home"; import Home from "../Home/Home";
import FetchUtils from "../fetchUtils/FetchUtils"; import FetchUtils from "../utils/FetchUtils";
import EditForm from "../edit/EditForm"; import EditForm from "../edit/EditForm";
import PostForm from "../post/PostForm"; import PostForm from "../post/PostForm";
@@ -68,8 +68,8 @@ const HomePage = () => {
</div> </div>
<Home></Home> <Home></Home>
{/* <FetchUtils></FetchUtils> */} {/* <FetchUtils></FetchUtils> */}
<PostForm /> {/* <PostForm /> */}
<EditForm /> {/* <EditForm /> */}
</section> </section>

2
src/components/Home/Home.jsx
View File

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

37
src/components/edit/EditForm.jsx
View File

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

154
src/components/fetchUtils/FetchUtils.jsx
View File

@@ -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 (
<>
<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;

14
src/components/post/PostForm.jsx
View File

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

104
src/components/utils/FetchUtils.jsx Normal file
View File

@@ -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 (
// <>
// <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;

0
src/components/fetchUtils/style.css → src/components/utils/style.css
View File

3
src/main.jsx
View File

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