From 2f14c6a8427e01a6d6083c36622fd5a728f099c3 Mon Sep 17 00:00:00 2001
From: Victor Turgeon <76506447+Medenos@users.noreply.github.com>
Date: Sun, 30 Oct 2022 13:13:34 -0700
Subject: [PATCH] Carousel links + press "Enter" to search (pu juste le
 boutton)

---
 .../src/components/FeaturedList.js            | 24 +++++++++++--------
 .../src/components/ResearchBar.js             | 15 +++++++++---
 .../grosses-mitaines-ui/src/pages/Morceaux.js |  8 +------
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedList.js b/GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedList.js
index 86380ff..ba7a41a 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedList.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedList.js
@@ -1,21 +1,25 @@
 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">
-                    <img
-                        className="featured-img"
-                        src={`/images/${product.imageName}.jpg`}
-                    />
-                    <Carousel.Caption className="featured-info">
-                        <h3>{product.title}</h3>
-                        <p>{product.description}</p>
-                        <h5>Seulement</h5>
-                        <h4 className="featured-prc">{product.promoPrice} $ CA</h4>
-                    </Carousel.Caption>
+                    <Link key={product.id} to={`/morceaux/${product.id}`}>
+                        <img
+                            className="featured-img"
+                            src={`/images/${product.imageName}.jpg`}
+                        />
+                        <Carousel.Caption className="featured-info">
+                            <h3>{product.title}</h3>
+                            <p>{product.description}</p>
+                            <h5>Seulement</h5>
+                            <h4 className="featured-prc">{product.promoPrice} $ CA</h4>
+                        </Carousel.Caption>
+                    </Link>
                 </Carousel.Item>
             ))}
         </Carousel>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ResearchBar.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ResearchBar.js
index 7783435..32185b6 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/ResearchBar.js
+++ b/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,8 +8,9 @@ const ResearchBar = () => {
     const navigate = useNavigate();
     const [value, setValue] = useState("");
 
+
     const search = async (query) => {
-        navigate('/morceaux', { state: { query: query} });
+        navigate('/morceaux', { state: { query: query } });
     }
 
     const handleValueChange = async (value) => {
@@ -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>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
index c9990b1..8267658 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
@@ -31,8 +31,7 @@ const Morceaux = () => {
 
             const response = await fetch(url);
             const json = await response.json();
-            if (json.length > 0)
-                setProducts([...json]);
+            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>
     );
 }