memartel/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout des filtres et image de chargement.

Browse Source
This commit is contained in:
Victor Turgeon
2022-10-17 23:22:05 -07:00
parent 6d5c97a4e5
commit 0461823408
5 changed files with 167 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
View File

@@ -2,113 +2,76 @@ import { Button } from 'react-bootstrap';
import { useEffect } from "react";
import ItemList from "../components/ItemList";
import { useState } from 'react';
import Sorting from "../components/Sorting"
const Morceaux = (startingProducts) => {
// public enum States {
// Available,
// BackOrder,
// Unavailable,
// Clearance,
// Promotion,
// Discontinued
// }
// const products = [
// {
// "id":0,
// "name": "Ceinture flèchée",
// "status": 0,
// "price": 85.86,
// "newPrice": -1,
// "imageUrl": "/images/ceintureflechee.jpg"
// },
// {
// "id":1,
// "name": "Chandail de nowel",
// "status": 2,
// "price": 69.50,
// "newPrice": -1,
// "imageUrl": "/images/chandailquetaine.jpg"
// },
// {
// "id":2,
// "name": "Pantoufles du Canadien en Phentex",
// "status": 5,
// "price": 15.64,
// "newPrice": -1,
// "imageUrl": "/images/pantouflesCH.jpg"
// },
// {
// "id":3,
// "name": "Jean-Luc Mongrain",
// "status": 1,
// "price": 1453.12,
// "newPrice": -1,
// "imageUrl": "/images/jeanlucmongrain.jpg"
// },
// {
// "id":4,
// "name": "Mitaines de laine",
// "status": 4,
// "price": 24.99,
// "newPrice": 19.99,
// "imageUrl": "/images/mitaines.jpg"
// },
// {
// "id":5,
// "name": "Sous-vêtements coquins",
// "status": 3,
// "price": 19.99,
// "newPrice": 14.99,
// "imageUrl": "/images/kokin.jpg"
// },
// {
// "id":6,
// "name": "Doudou douce et grise",
// "status": 3,
// "price": 99.99,
// "newPrice": 89.99,
// "imageUrl": "/images/doudou.jpg"
// }
// ];
useEffect(() => {
document.title = 'Morceaux';
});
const [products, setProducts] = useState([]);
const [isLoading, setIsLoading] = useState(false);
var order = "";
var filterPrice = "";
var filterState = "";
const handleNextItems = async () => {
var url;
if (products.length > 0)
url = `https://localhost:7292/api/Inventory?lastId=${products[products.length - 1].id}`;
url = `https://localhost:7292/api/Inventory?lastId=${products[products.length - 1].id}&order=${order}&filterPrice=${filterPrice}&filterState=${filterState}`;
else
url = 'https://localhost:7292/api/Inventory'
url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${filterPrice}&filterState=${filterState}`
setIsLoading(true);
const response = await fetch(url);
const json = await response.json();
//TODO: regler bug qui permet d'avoir des duplicats (trouver une façon de skipper les duplicats)
if (json.length > 0)
setProducts([...products, ...json]);
setIsLoading(false);
}
const handleOrder = async (sortBy) => {
order = sortBy;
var url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${filterPrice}&filterState=${filterState}`;
setIsLoading(true);
const response = await fetch(url);
const json = await response.json();
if (json.length > 0)
setProducts([...products, ...json]);
setProducts([...json]);
setIsLoading(false);
}
const handleFilterPrice = async () => {
}
const handleFilterState = async () => {
}
return (
<>
<div>
<div className="sorting-container">
<Sorting onChange={handleOrder} />
</div>
<div className="morceaux-container">
<ItemList items={products} />
</div>
{/* faire un spinner qui tourne quand ça load */}
<div className={isLoading ? "cat-load" : "d-none cat-load"} />
<script type="text/javascript" async src="https://tenor.com/embed.js"></script>
<div>
<Button onClick={handleNextItems} className='btn-load-more'>
...
</Button>
</div>
</>
</div>
);
}