Folytatnám Frontend kódokkal, hátha ezek is jól jönnek!

 

Szükséges importok:
import React, { useState } from "react";
import ReactDOM from "react-dom/client";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css";

 

const [pelda, setPelda] = useState([]);
const [formData, setFormData] = useState(INITIAL_STATE.formData);
const [mode, setMode] = useState('create');

// Lekérés

const getPelda = async() => {
const response = await axios.get("/api/pelda");
if(response.status === 200){
setPelda(response.data);
}
};

React.useEffect( () => {
getPelda();
}, []
)

//Törlés

const deletePelda = (id) => {
axios.delete("/api/pelda/"+id)
.then (data => {
if(data.status === 200){
getPelda();
}
}
)
}

//Hozzáadás

const sendData = () => {
if(mode === "create"){
axios.post("/api/pelda",formData)
.then (data => {
if(data.status === 200){
getPelda();
setFormData(INITIAL_STATE.formData);
}
}
)
} else {
axios.put("/api/pelda",formData)
.then (data => {
if(data.status === 200){
getPelda();
setFormData(INITIAL_STATE.formData);
setMode("create");
}
}
)
}
}
const changeData = (e) => {
setFormData(prev =>({
...prev,
[e.target.name]: e.target.value
})
)
}

//Módosítás

const updatePelda = (id) => {
const peldaData = pelda.find(pl => pl.id === id);
setMode("update");
setFormData( prev => ({
...peldaData
}));
}