SearchBar presque fonctionnelle, Featured qui va fetcher dans la bd

GrossesMitaines/GrossesMitainesAPI/Controllers/InventoryController.cs

@@ -62,6 +62,9 @@ public class InventoryController : Controller {
             case "isDiscontinued":
                 ret = ret.Where(x => x.Status == Product.States.Discontinued);
                 break;
+            case "isPromoted":
+                ret = ret.Where(x => x.Status == Product.States.Clearance || x.Status == Product.States.Promotion);
+                break;
             default: break;
         }
         switch (order) {

GrossesMitaines/GrossesMitainesAPI/Controllers/SearchController.cs

@@ -26,8 +26,8 @@ public class SearchController : Controller {
             _searchCache = _cache.GetCacheCopy();
     }
 
-    [EnableCors("_myAllowSpecificOrigins"), HttpPost(Name = "Search")]
+    [EnableCors("_myAllowSpecificOrigins"), HttpGet(Name = "Search")]
-    public IEnumerable<Product> Post(string query, bool? preview, bool? deep) {
+    public IEnumerable<Product> Get(string query, bool? preview, bool? deep) {
         if (_searchCache is not null)
             return SearchCached(query, preview, deep);
         else return Search(query, preview, deep);

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)
+    return { json };
-    //    setProducts([...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">
+            <button className="research-btn" /*onClick={fetchData(input.value, false)}*/>
-                <div className="fa fa-search" onClick={fetchData(input.value, false)}/>
+                <div className="fa fa-search" />
             </button>
         </div>
     );

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

@@ -1,33 +1,24 @@
 import React from "react";
 import { useEffect } from "react";
+import { useState } from "react";
 import ResearchBar from "../components/ResearchBar";
-import FeatuerdList from "../components/FeaturedList";
+import FeaturedList from "../components/FeaturedList";
 
 const Home = () => {
-
+    const [products, setProducts] = useState([]);
-    const products = [
+    const [loaded, setLoad] = useState(false);
-        {
-            "title": "Ceinture flèchée",
-            "description": "Pour faire votre propre bonhomme de 1837, comme dans le bon vieux temps.",
-            "price": "85,86",
-            "imageUrl": "/images/ceintureflechee.jpg"
-        },
-        {
-            "title": "Pantoufles du Canadien en Phentex",
-            "description": "Parce que ça sent la coupe!",
-            "price": "15,64",
-            "imageUrl": "/images/pantouflesCH.jpg"
-        },
-        {
-            "title": "Jean-Luc Mongrain",
-            "description": "On ne lui ferait pas mal, en tout cas!!",
-            "price": "1453,12",
-            "imageUrl": "/images/jeanlucmongrain.jpg"
-        }
-    ];
 
     useEffect(() => {
         document.title = 'Maison';
+        async function FetchPromo() {
+            const response = await fetch(`https://localhost:7292/api/Inventory?filterState=isPromoted&all=true`);
+            const products = await response.json();
+            setProducts([...products])
+        }
+        if (loaded === false) {
+            FetchPromo();
+            setLoad(true);
+        }
     });
 
     return (
@@ -40,7 +31,7 @@ const Home = () => {
                 <br/>
                 <h2 className="home-description">Des produits bien commodes faits par des aînées d'expérience.</h2>
             </div>
-            <FeatuerdList
+            <FeaturedList
                 products={products}
             />
         </>