SearchBar presque fonctionnelle, Featured qui va fetcher dans la bd

This commit is contained in:
MarcEricMartel 2022-10-26 11:29:57 -07:00
parent e40807b6a2
commit 04c7d68a44
5 changed files with 29 additions and 34 deletions

View File

@ -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) {

View File

@ -26,8 +26,8 @@ public class SearchController : Controller {
_searchCache = _cache.GetCacheCopy();
}
[EnableCors("_myAllowSpecificOrigins"), HttpPost(Name = "Search")]
public IEnumerable<Product> Post(string query, bool? preview, bool? deep) {
[EnableCors("_myAllowSpecificOrigins"), HttpGet(Name = "Search")]
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);

View File

@ -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>
))}

View File

@ -1,17 +1,17 @@
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);
if (value.length > 1)
fetchData(value, true);
}
return {
@ -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>
);

View File

@ -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 = [
{
"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"
}
];
const [products, setProducts] = useState([]);
const [loaded, setLoad] = useState(false);
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}
/>
</>