les filtres fonctionnent mais le ui est laid.

GrossesMitaines/grosses-mitaines-ui/src/components/Filters.js

@@ -1,5 +1,6 @@
 import { Form } from "react-bootstrap";
 import { useState } from "react";
+import {Button} from "react-bootstrap";
 
 const Filters = ({ onChange }) => {
 
@@ -72,7 +73,7 @@ const Filters = ({ onChange }) => {
                                 value=""
                             />
                             <Form.Check
-                                label="Displonible"
+                                label="Disponible"
                                 name="stateFilter"
                                 type='radio'
                                 id="state-available"
@@ -110,6 +111,9 @@ const Filters = ({ onChange }) => {
                     </Form.Group>
                 </div>
             </Form>
+            <Button onClick={() => { onChange(priceFilter, stateFilter) }} className='btn-filter'>
+                Filtrer
+            </Button>
         </div>
     )
 }

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

@@ -58,8 +58,17 @@ const Morceaux = (startingProducts) => {
             setProducts([...json]);
         setIsLoading(false);
     }
-    const handleFilters = async () => {
 
+    const handleFilters = async (price, state) => {
+        setFilterPrice(price);
+        setFilterState(state);
+        var url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${price}&filterState=${state}`;
+        setIsLoading(true);
+        const response = await fetch(url);
+        const json = await response.json();
+        if (json.length > 0)
+            setProducts([...json]);
+        setIsLoading(false);
     }
 
     return (