Victor Turgeon 3d15b740f0 mAsageee
2022-10-18 12:11:49 -04:00

82 lines
2.6 KiB
JavaScript

import { useEffect, useState } from "react";
import Button from '../components/Button'
import SimpleItemList from "../components/SimpleItemList";
import Ajouter from "../components/Ajouter";
const Inventaire = () => {
const [morceaux, setMorceaux] = useState([]);
const [isFormvisible, setFormVisibility] = useState(false);
useEffect(() => {
async function fetchData() {
const response = await fetch(`https://localhost:7292/api/Inventory?all=true`);
const json = await response.json();
if (json.length > 0)
setMorceaux([...json]);
}
fetchData();
document.title = 'Inventaire';
}, []);
const handleAddItem = async (morceau) => {
const response = await fetch(`https://localhost:7292/api/Product`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(morceau)
})
const newMorceau = await response.json();
if (response.ok) {
setMorceaux([...morceaux, { ...newMorceau }]);
console.log("Ajout de l'item avec succès: \r\n" + newMorceau);
}
else
console.log("Erreur de creation " + morceau);
};
const handleDeleteItem = async (id) => {
const response = await fetch(`https://localhost:7292/api/Product?id=${id}`, { method: 'DELETE', mode: 'cors' });
const deletedId = await response.json();
if (response.ok) {
setMorceaux(morceaux.filter((morceau) => morceau.id !== deletedId));
console.log("DELETE de: " + deletedId + " avec succès!");
}
else
console.log("Erreur leur du DELETE de " + id);
};
const handleModifyItem = async (id) => {
};
return (
<div className="inventaire">
<header className='header'>
<h1>Inventaire</h1>
<Button
text={isFormvisible ? 'Fermer' : 'Ajouter'}
color={isFormvisible ? 'red' : 'purple'}
onClick={() => setFormVisibility(!isFormvisible)}
/>
</header>
{isFormvisible && <Ajouter onCreation={handleAddItem}></Ajouter>}
{morceaux.length > 0 ?
(<SimpleItemList simpleItems={morceaux}
onDelete={handleDeleteItem}
onModify={handleModifyItem}
></SimpleItemList>) :
('Il n\'y a pas de morceaux!')}
</div>
);
}
export default Inventaire