Manque juste Modifier...

GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js

@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+
+import Button from '../components/Button'
+import SimpleItemList from "../components/SimpleItemList";
+import Ajouter from "../components/Ajouter";
+
+const API_URL = 'https://localhost:7292/'
+const INVENTAIRE_URL = API_URL + 'api/Inventory'
+const PRODUIT_URL = API_URL + 'api/Product'
+
+const Inventaire = () => {
+
+    const [morceaux, setMorceaux] = useState([]);
+    const [isFormvisible, setFormVisibility] = useState(false);
+
+    useEffect(() => {
+        async function fetchData() {
+            const res = await axios.get(INVENTAIRE_URL);
+            setMorceaux(res.data);
+        }
+        fetchData();
+        document.title = 'Inventaire';
+    }, []);
+
+    const handleAddItem = async (morceau) => {
+        const res = await axios.post(PRODUIT_URL, morceau)
+
+        setMorceaux([...morceaux, { ...morceau, id: res.data.id }]);
+    };
+
+    const handleDeleteItem = async (id) => {
+        const res = await axios.delete(`${INVENTAIRE_URL}/${id}`)
+
+        setMorceaux(morceaux.filter((morceau) => morceau.id !== 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