78 lines
2.4 KiB
JavaScript
78 lines
2.4 KiB
JavaScript
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) => {
|
|
|
|
|
|
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}&order=${order}&filterPrice=${filterPrice}&filterState=${filterState}`;
|
|
else
|
|
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([...json]);
|
|
setIsLoading(false);
|
|
}
|
|
const handleFilterPrice = async () => {
|
|
|
|
}
|
|
const handleFilterState = async () => {
|
|
|
|
}
|
|
|
|
return (
|
|
<div className="morceaux"div>
|
|
<div className="sorting-container">
|
|
<Sorting onChange={handleOrder} />
|
|
</div>
|
|
<div className="morceaux-container">
|
|
<ItemList items={products} />
|
|
</div>
|
|
<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>
|
|
);
|
|
}
|
|
|
|
export default Morceaux; |