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

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>

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>

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

@@ -1,10 +1,10 @@
-import { Button } from 'react-bootstrap';
 import { useEffect } from "react";
 import ItemList from "../components/ItemList";
 import { useState } from 'react';
 import Sorting from "../components/Sorting"
 import Filters from '../components/Filters';
 import { useLocation } from 'react-router-dom';
+import ResearchBar from "../components/ResearchBar";
 
 const Morceaux = () => {
 
@@ -21,6 +21,7 @@ const Morceaux = () => {
     useEffect(() => {
         document.title = 'Morceaux';
         setIsLoading(true);
+        setIsSearch(false);
 
 
         async function fetchData(isSearch) {
@@ -30,8 +31,7 @@ const Morceaux = () => {
 
             const response = await fetch(url);
             const json = await response.json();
-            if (json.length > 0)
-                setProducts([...json]);
+            setProducts([...json]);
         }
 
 
@@ -45,7 +45,7 @@ const Morceaux = () => {
         }
 
         setIsLoading(false);
-    }, []);
+    }, [state]);
 
     const handleNextItems = async () => {
 
@@ -107,6 +107,7 @@ const Morceaux = () => {
 
     return (
         <div className="morceaux" >
+            <ResearchBar />
             <div className="morceaux-options-container">
                 <div className='filters-container'>
                     <Filters onChange={handleFilters} />
@@ -121,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>
     );
 }