120 lines
3.8 KiB
JavaScript
120 lines
3.8 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"
|
|
import Filters from '../components/Filters';
|
|
import { useLocation } from 'react-router-dom';
|
|
|
|
const Morceaux = () => {
|
|
|
|
const [products, setProducts] = useState([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [order, setOrder] = useState("");
|
|
const [filterPrice, setFilterPrice] = useState("");
|
|
const [filterState, setFilterState] = useState("");
|
|
const [isSearch, setIsSearch] = useState(false);
|
|
|
|
const { state } = useLocation();
|
|
|
|
useEffect(() => {
|
|
document.title = 'Morceaux';
|
|
setIsLoading(true);
|
|
|
|
if (state != null) {
|
|
setProducts([...state.searchResults.json]);
|
|
setIsSearch(true);
|
|
}
|
|
else {
|
|
async function fetchData() {
|
|
const response = await fetch(`https://localhost:7292/api/Inventory`);
|
|
const json = await response.json();
|
|
if (json.length > 0)
|
|
setProducts([...json]);
|
|
}
|
|
fetchData();
|
|
}
|
|
|
|
setIsLoading(false);
|
|
}, []);
|
|
|
|
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) => {
|
|
|
|
if (isSearch) {
|
|
|
|
}
|
|
else {
|
|
setOrder(sortBy);
|
|
var url = `https://localhost:7292/api/Inventory?order=${sortBy}&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 handleFilters = async (price, state) => {
|
|
|
|
if (isSearch) {
|
|
|
|
}
|
|
{
|
|
setFilterPrice(price);
|
|
setFilterState(state);
|
|
var url = `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${price}&filterState=${state}`;
|
|
setIsLoading(true);
|
|
const response = await fetch(url);
|
|
const json = await response.json();
|
|
setProducts([...json]);
|
|
setIsLoading(false);
|
|
}
|
|
|
|
}
|
|
|
|
return (
|
|
<div className="morceaux">
|
|
<div className="morceaux-options-container">
|
|
<div className='filters-container'>
|
|
<Filters onChange={handleFilters} />
|
|
</div>
|
|
<div className="sorting-container">
|
|
<Sorting onChange={handleOrder} />
|
|
</div>
|
|
</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>
|
|
{!isSearch && <Button onClick={handleNextItems} className='btn-load-more'>
|
|
...
|
|
</Button>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Morceaux; |