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

@@ -1,11 +1,14 @@
 import { Carousel } from "react-bootstrap";
+import { Link } from "react-router-dom";
 const FeaturedList = ({ products }) => {
     if (products === null)
         return (<></>);
     return (
         <Carousel variant="dark" className="featured-lst">
             {products.map((product) => (
+
                 <Carousel.Item key={product.id} className="featured-itm">
+                    <Link key={product.id} to={`/morceaux/${product.id}`}>
                         <img
                             className="featured-img"
                             src={`/images/${product.imageName}.jpg`}
@@ -16,6 +19,7 @@ const FeaturedList = ({ products }) => {
                             <h5>Seulement</h5>
                             <h4 className="featured-prc">{product.promoPrice} $ CA</h4>
                         </Carousel.Caption>
+                    </Link>
                 </Carousel.Item>
             ))}
         </Carousel>

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-
+import { useEffect } from 'react';
 
 
 const ResearchBar = () => {
@@ -8,6 +8,7 @@ const ResearchBar = () => {
     const navigate = useNavigate();
     const [value, setValue] = useState("");
 
+
     const search = async (query) => {
         navigate('/morceaux', { state: { query: query } });
     }
@@ -18,7 +19,15 @@ const ResearchBar = () => {
 
     return (
         <div className="research-container">
-            <input className="research-input" value={value} onChange={(e) => handleValueChange(e.target.value)} placeholder="Rechercher..."></input>
+            <input className="research-input"
+                onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                        search(value);
+                    }
+                }}
+                value={value}
+                onChange={(e) => handleValueChange(e.target.value)}
+                placeholder="Rechercher..."></input>
             <button className="research-btn" onClick={() => search(value)}>
                 <div className="fa fa-search" />
             </button>

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

@@ -31,7 +31,6 @@ const Morceaux = () => {
 
             const response = await fetch(url);
             const json = await response.json();
-            if (json.length > 0)
             setProducts([...json]);
         }
 
@@ -123,11 +122,6 @@ const Morceaux = () => {
             </div>
             <div className={isLoading ? "cat-load" : "d-none cat-load"} />
             <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
-            {/* <div>
-                {!isSearch && <Button onClick={handleNextItems} className='btn-load-more'>
-                    ...
-                </Button>}
-            </div> */}
         </div>
     );
 }