Merge branch 'react-version' of https://github.com/MarcEricMartel/420-5DW-HY-TP into react-version

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

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

@@ -57,7 +57,7 @@ const Morceaux = (startingProducts) => {
     }
 
     return (
-        <div>
+        <div className="morceaux"div>
             <div className="sorting-container">
                 <Sorting onChange={handleOrder} />
             </div>

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

@@ -8,11 +8,11 @@ const Privacy = () => {
     });
 
     return (
-        <>
+        <div className="privacy">
             <h1 className="text-primary">Police de vie privée</h1>
 
-<p className="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        </>
+            <p className="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </div>
     );
 }