functional 1
added create meets, check meets, edit meets [edit meets not stable]
This commit is contained in:
@ -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 (
|
||||
<>
|
||||
<button onClick={getData}>Click to Get Data</button>
|
||||
<button onClick={removeList}>Click to Remove Data Listing</button>
|
||||
{/* Mapping of data */}
|
||||
<div>
|
||||
{Array.isArray(user) ? (
|
||||
<ul>
|
||||
{user.map((item) => (
|
||||
<ol key={item.id}>
|
||||
<li>{item.name}</li>
|
||||
<li>{item.username}</li>
|
||||
<li>{item.email}</li>
|
||||
</ol>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p>Bad data type from server!</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
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;
|
||||
Reference in New Issue
Block a user