129 lines
4.2 KiB
JavaScript
129 lines
4.2 KiB
JavaScript
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';
|
|
import ResearchBar from "../components/ResearchBar";
|
|
|
|
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 [query, setQuery] = useState("");
|
|
|
|
const { state } = useLocation();
|
|
|
|
useEffect(() => {
|
|
document.title = 'Morceaux';
|
|
setIsLoading(true);
|
|
setIsSearch(false);
|
|
|
|
|
|
async function fetchData(isSearch) {
|
|
var url = "";
|
|
|
|
url = isSearch ? `https://localhost:7292/api/Search?query=${state.query}` : `https://localhost:7292/api/Inventory`;
|
|
|
|
const response = await fetch(url);
|
|
const json = await response.json();
|
|
setProducts([...json]);
|
|
}
|
|
|
|
|
|
if (state != null) {
|
|
setQuery(state.query);
|
|
setIsSearch(true);
|
|
fetchData(true);
|
|
}
|
|
else {
|
|
fetchData(false);
|
|
}
|
|
|
|
setIsLoading(false);
|
|
}, [state]);
|
|
|
|
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) => {
|
|
|
|
setIsLoading(true);
|
|
setOrder(sortBy);
|
|
|
|
var url = isSearch ? `https://localhost:7292/api/Search?query=${query}&filterPrice=${filterPrice}&filterState=${filterState}&order=${sortBy}`
|
|
: `https://localhost:7292/api/Inventory?order=${sortBy}&filterPrice=${filterPrice}&filterState=${filterState}`;
|
|
|
|
const response = await fetch(url);
|
|
const json = await response.json();
|
|
setProducts([...json]);
|
|
setIsLoading(false);
|
|
}
|
|
|
|
const handleFilters = async (price, state) => {
|
|
setIsLoading(true);
|
|
|
|
setFilterPrice(price);
|
|
setFilterState(state);
|
|
|
|
var url = isSearch ? `https://localhost:7292/api/Search?query=${query}&filterPrice=${price}&filterState=${state}&order=${order}`
|
|
: `https://localhost:7292/api/Inventory?order=${order}&filterPrice=${price}&filterState=${state}`;
|
|
|
|
const response = await fetch(url);
|
|
const json = await response.json();
|
|
setProducts([...json]);
|
|
setIsLoading(false);
|
|
}
|
|
|
|
const handleScroll = async (e) => {
|
|
const target = e.target;
|
|
if (!isLoading && !isSearch) {
|
|
if (target.scrollTop + target.clientHeight + 300 >= target.scrollHeight) {
|
|
await handleNextItems();
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="morceaux" >
|
|
<ResearchBar />
|
|
<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" onScroll={(e) => handleScroll(e)} >
|
|
<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>
|
|
);
|
|
}
|
|
|
|
export default Morceaux; |