les filtres fonctionnent mais le ui est laid.

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

@@ -1,16 +1,17 @@
 import { Form } from "react-bootstrap";
 import { useState } from "react";
+import {Button} from "react-bootstrap";
 
 const Filters = ({ onChange }) => {
 
     const [priceFilter, setPriceFilter] = useState("");
     const [stateFilter, setStateFilter] = useState("");
 
-    const handlePriceChange = (value) =>{
+    const handlePriceChange = (value) => {
         setPriceFilter(value);
     }
 
-    const handleStateChange = (value) =>{
+    const handleStateChange = (value) => {
         setStateFilter(value);
     }
 
@@ -61,7 +62,7 @@ const Filters = ({ onChange }) => {
                     </Form.Group>
                 </div>
                 <div className="filters-state-container">
-                <Form.Group>
+                    <Form.Group>
                         <div key="state-filter-radio" onChange={e => handleStateChange(e.target.value)}>
                             <Form.Check
                                 defaultChecked
@@ -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,15 +58,24 @@ 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 (
         <div className="morceaux">
             <div className="morceaux-options-container">
                 <div className='filters-container'>
-                    <Filters onChange={handleFilters}/>
+                    <Filters onChange={handleFilters} />
                 </div>
                 <div className="sorting-container">
                     <Sorting onChange={handleOrder} />