theoludwig/FunctionProject
theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

frontend: Trier par catégorie et recherche

Browse Source
This commit is contained in:
Divlo 2020-03-20 23:35:51 +01:00
parent 404af8be6a
commit c6116b9da1
1 changed files with 36 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/pages/functions.js
View File

@ -7,8 +7,11 @@ import api from '../config/api';
const Functions = () => { const Functions = () => {
const [categories, setCategories] = useState([]); // State de recherche et de catégories
const [categories, setCategories] = useState([]);
const [inputSearch, setInputSearch] = useState({ search: "", selectedCategory: "0" });
// State pour afficher les fonctions
const [functions, setFunctions] = useState([]); const [functions, setFunctions] = useState([]);
const [isLoadingFunctions, setLoadingFunctions] = useState(true); const [isLoadingFunctions, setLoadingFunctions] = useState(true);
const [pageFunctions, setPageFunctions] = useState(1); const [pageFunctions, setPageFunctions] = useState(1);
@ -21,11 +24,11 @@ const Functions = () => {
setCategories(result.data); setCategories(result.data);
}) })
.catch((error) => console.error(error)); .catch((error) => console.error(error));
}, []); }, []);
// Récupère les fonctions // Récupère les fonctions si la page change
useEffect(() => { useEffect(() => {
api.get(`/functions?page=${pageFunctions}&limit=10`) api.get(`/functions?page=${pageFunctions}&limit=10&categoryId=${inputSearch.selectedCategory}&search=${inputSearch.search}`)
.then((result) => { .then((result) => {
setLoadingFunctions(false); setLoadingFunctions(false);
sethasMoreFunctions(result.data.hasMore); sethasMoreFunctions(result.data.hasMore);
@ -34,11 +37,29 @@ const Functions = () => {
.catch((error) => console.error(error)); .catch((error) => console.error(error));
}, [pageFunctions]); }, [pageFunctions]);
// Récupère les fonctions si la catégorie/recherche change
useEffect(() => {
api.get(`/functions?page=${pageFunctions}&limit=10&categoryId=${inputSearch.selectedCategory}&search=${inputSearch.search}`)
.then((result) => {
setLoadingFunctions(false);
sethasMoreFunctions(result.data.hasMore);
setFunctions(result.data.rows);
})
.catch((error) => console.error(error));
}, [inputSearch.selectedCategory, inputSearch.search]);
const loadMore = () => { const loadMore = () => {
setLoadingFunctions(true); setLoadingFunctions(true);
setPageFunctions(pageFunctions + 1); setPageFunctions(pageFunctions + 1);
} }
const handleChange = (event) => {
setLoadingFunctions(true);
const inputSearchNew = { ...inputSearch };
inputSearchNew[event.target.name] = event.target.value;
setInputSearch(inputSearchNew);
}
return ( return (
<Fragment> <Fragment>
<HeadTag <HeadTag
@ -53,31 +74,29 @@ const Functions = () => {
</div> </div>
<div className="Functions__search-container row justify-content-center"> <div className="Functions__search-container row justify-content-center">
<select className="Functions__select form-control"> <select name="selectedCategory" value={inputSearch.selectedCategory} onChange={handleChange} className="Functions__select form-control">
<option value="0">Toutes catégories</option> <option value="0">Toutes catégories</option>
{categories.map((category) => ( {categories.map((category) => (
<option key={category.id} value={category.id} className="Functions__select-option" style={{ backgroundColor: category.color }}>{category.name}</option> <option key={category.id} value={category.id} className="Functions__select-option" style={{ backgroundColor: category.color }}>{category.name}</option>
))} ))}
</select> </select>
<input type="search" className="form-control Functions__search-input" name="search" id="search" placeholder="🔎 Rechercher..."></input> <input value={inputSearch.search} onChange={handleChange} type="search" className="form-control Functions__search-input" name="search" id="search" placeholder="🔎 Rechercher..."></input>
</div> </div>
<div className="row justify-content-center"> <div className="row justify-content-center">
{functions.map((f) => ( {functions.map((f) => (
<FunctionCard key={f.id} slug={f.slug} image={API_URL + f.image} title={f.title} description={f.description} category={f.categorie} publicationDate={new Date(f.createdAt).toLocaleDateString('fr-FR')} /> <FunctionCard key={f.id} slug={f.slug} image={API_URL + f.image} title={f.title} description={f.description} category={f.categorie} publicationDate={new Date(f.createdAt).toLocaleDateString('fr-FR')} />
))} ))}
{
!isLoadingFunctions && hasMoreFunctions
?
<button className="btn btn-dark" onClick={loadMore}>Charger plus de fonctions ?</button>
: !hasMoreFunctions ?
null
:
<p>Chargement...</p>
}
</div> </div>
{
!isLoadingFunctions && hasMoreFunctions
?
<button className="btn btn-dark" onClick={loadMore}>Charger plus de fonctions ?</button>
: !hasMoreFunctions ?
null
:
<p>Chargement...</p>
}
</div> </div>
</Fragment> </Fragment>
); );