SearchBar presque fonctionnelle, Featured qui va fetcher dans la bd

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

@@ -1,19 +1,20 @@
 import { Carousel } from "react-bootstrap";
 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={product.imageUrl}
+                        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.price} $ CA</h4>
+                        <h4 className="featured-prc">{product.promoPrice} $ CA</h4>
                     </Carousel.Caption>
                 </Carousel.Item>
             ))}

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

@@ -1,18 +1,18 @@
 import { useState } from 'react';
+import { Navigate } from 'react-router-dom';
 
 async function fetchData(query, preview) {
     const response = await fetch(`https://localhost:7292/api/Search?query=${query}&preview=${preview}&deep=true`);
     const json = await response.json();
-  //  if (json.length > 0)
-    //    setProducts([...json]);
-    
+    return { json };
 }
 
 function useInput(defaultValue) {
     const [value, setValue] = useState(defaultValue);
     function onChange(e) {
       setValue(e.target.value);
-      fetchData(value, true);
+      if (value.length > 1)
+        fetchData(value, true);
     }
     return {
       value,
@@ -25,8 +25,8 @@ const ResearchBar = () => {
     return (
         <div className="research-container">
             <input className="research-input" placeholder="Rechercher..." {...input}></input>
-            <button className="research-btn">
-                <div className="fa fa-search" onClick={fetchData(input.value, false)}/>
+            <button className="research-btn" /*onClick={fetchData(input.value, false)}*/>
+                <div className="fa fa-search" />
             </button>
         </div>
     );