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

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

@@ -6,6 +6,7 @@ const ItemList = ({ items }) => {
     return (
         <>
             <div className='item-list'>
+                {items.length <= 0 && <p>Aucun morceaux à montrer...</p>}
                 {items.map((item) =>
                     <Link key={item.id} className='item-link' to={`/morceaux/${item.id}`}>
                         <Item  imageUrl={item.imageName}

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

@@ -0,0 +1,64 @@
+import Dropdown from 'react-bootstrap/Dropdown'
+import { useState } from 'react';
+
+const Sorting = ({onChange}) => {
+
+    const [currentSort, setSort] = useState("...");
+
+    return (
+        <>
+            <Dropdown className='sorting-dropdown'>
+                <Dropdown.Toggle id="dropdown-sort">
+                    {currentSort}
+                </Dropdown.Toggle>
+
+                <Dropdown.Menu className='sorting-menu'>
+                    <Dropdown.Item key="0" onClick={() => {
+                        setSort("Prix ascendants"); // Mets le nom afficher quand le dropdown est fermé
+                        onChange("Price"); // Trigger le handler pour trier
+                    }}>
+                        Prix ascendants {/*Le nom de l'option*/}
+                    </Dropdown.Item>
+                    <Dropdown.Item  key="1" onClick={() => {
+                        setSort(" Prix déscendants");
+                        onChange("PriceDesc");
+                    }}>
+                        Prix déscendants
+                    </Dropdown.Item>
+                    <Dropdown.Item  key="2" onClick={() => {
+                        setSort("Titre a -> z");
+                        onChange("Title");
+                    }}>
+                        Titre a -{'>'} z
+                    </Dropdown.Item>
+                    <Dropdown.Item key="3" onClick={() => {
+                        setSort("Titre z -> a");
+                        onChange("TitleDesc");
+                    }}>
+                        Titre z -{'>'} a
+                    </Dropdown.Item>
+                    <Dropdown.Item key="4" onClick={() => {
+                        setSort("Catégorie a -> z");
+                        onChange("Category");
+                    }}>
+                        Catégorie a -{'>'} z
+                    </Dropdown.Item>
+                    <Dropdown.Item key="5" onClick={() => {
+                        setSort("Catégorie z -> a");
+                        onChange("CategoryDesc");
+                    }}>
+                        Catégorie z -{'>'} a
+                    </Dropdown.Item>
+                    <Dropdown.Item key="6" onClick={() => {
+                        setSort("...");
+                        onChange("");
+                    }}>
+                        ...
+                    </Dropdown.Item>
+                </Dropdown.Menu>
+            </Dropdown>
+        </>
+    );
+}
+
+export default Sorting;