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

frontend: Affichage dynamique des fonctions

Browse Source 
TODO: Rendre fonctionnel la rechercher et le tri par catégorie
This commit is contained in:
Divlo
2020-03-20 18:26:55 +01:00
parent c9f817930c
commit 5edf5e7069
8 changed files with 141 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
frontend/pages/functions.js
View File

@ -1,48 +1,86 @@
import { Fragment } from 'react';
import { Fragment, useState, useEffect } from 'react';
import HeadTag from '../components/HeadTag';
import FunctionCard from '../components/FunctionCard/FunctionCard';
import '../public/css/pages/functions.css';
import { API_URL } from '../config/config';
import api from '../config/api';
const Functions = () => (
<Fragment>
<HeadTag
title="Fonctions"
description="Liste des fonctions."
image="/images/FunctionProject_icon_small.png"
/>
const Functions = () => {
const [categories, setCategories] = useState([]);
const [functions, setFunctions] = useState([]);
const [isLoadingFunctions, setLoadingFunctions] = useState(true);
const [pageFunctions, setPageFunctions] = useState(1);
const [hasMoreFunctions, sethasMoreFunctions] = useState(false);
// Récupère les catégories
useEffect(() => {
api.get('/categories')
.then((result) => {
setCategories(result.data);
})
.catch((error) => console.error(error));
}, []);
<div className="container text-center">
// Récupère les fonctions
useEffect(() => {
api.get(`/functions?page=${pageFunctions}&limit=10`)
.then((result) => {
setLoadingFunctions(false);
sethasMoreFunctions(result.data.hasMore);
setFunctions([...functions, ...result.data.rows]);
})
.catch((error) => console.error(error));
}, [pageFunctions]);
<div className="row justify-content-center">
<h1 className="Functions__title">Fonctions</h1>
</div>
const loadMore = () => {
setLoadingFunctions(true);
setPageFunctions(pageFunctions + 1);
}
<div className="Functions__search-container row justify-content-center">
<select className="Functions__select form-control">
{/* TODO: API Call to fetch categories */}
<option>Toutes catégories</option>
<option className="Functions__select-option" style={{ backgroundColor: "#406880" }}>✨ Utilitaires</option>
</select>
<input type="search" className="form-control Functions__search-input" name="search" id="search" placeholder="🔎 Rechercher..."></input>
</div>
return (
<Fragment>
<HeadTag
title="Fonctions"
description="Liste des fonctions."
image="/images/FunctionProject_icon_small.png"
/>
<div className="container text-center">
<div className="row justify-content-center">
<h1 className="Functions__title">Fonctions</h1>
</div>
<div className="Functions__search-container row justify-content-center">
<select className="Functions__select form-control">
<option value="0">Toutes catégories</option>
{categories.map((category) => (
<option key={category.id} value={category.id} className="Functions__select-option" style={{ backgroundColor: category.color }}>{category.name}</option>
))}
</select>
<input type="search" className="form-control Functions__search-input" name="search" id="search" placeholder="🔎 Rechercher..."></input>
</div>
<div className="row justify-content-center">
<div className="row justify-content-center">
{/* TODO: API Call to fetch data */}
<FunctionCard slug="weatherRequest" image="/images/functions/weatherRequest.png" title="Météo" description="Affiche la météo et l'heure locale." category={{ name: "✨ Utilitaires", color: "#406880" }} publicationDate="18/03/2020" />
<FunctionCard slug="weatherRequest" image="/images/functions/weatherRequest.png" title="Météo" description="Affiche la météo et l'heure locale." category={{ name: "✨ Utilitaires", color: "#406880" }} publicationDate="18/03/2020" />
<FunctionCard slug="weatherRequest" image="/images/functions/weatherRequest.png" title="Météo" description="Affiche la météo et l'heure locale." category={{ name: "✨ Utilitaires", color: "#406880" }} publicationDate="18/03/2020" />
<FunctionCard slug="weatherRequest" image="/images/functions/weatherRequest.png" title="Météo" description="Affiche la météo et l'heure locale." category={{ name: "✨ Utilitaires", color: "#406880" }} publicationDate="18/03/2020" />
<FunctionCard slug="weatherRequest" image="/images/functions/weatherRequest.png" title="Météo" description="Affiche la météo et l'heure locale." category={{ name: "✨ Utilitaires", color: "#406880" }} publicationDate="18/03/2020" />
<FunctionCard slug="weatherRequest" image="/images/functions/weatherRequest.png" title="Météo" description="Affiche la météo et l'heure locale." category={{ name: "✨ Utilitaires", color: "#406880" }} publicationDate="18/03/2020" />
<FunctionCard slug="weatherRequest" image="/images/functions/weatherRequest.png" title="Météo" description="Affiche la météo et l'heure locale." category={{ name: "✨ Utilitaires", color: "#406880" }} publicationDate="18/03/2020" />
<FunctionCard slug="weatherRequest" image="/images/functions/weatherRequest.png" title="Météo" description="Affiche la météo et l'heure locale." category={{ name: "✨ Utilitaires", color: "#406880" }} publicationDate="18/03/2020" />
<FunctionCard slug="weatherRequest" image="/images/functions/weatherRequest.png" title="Météo" description="Affiche la météo et l'heure locale." category={{ name: "✨ Utilitaires", color: "#406880" }} publicationDate="18/03/2020" />
<FunctionCard slug="weatherRequest" image="/images/functions/weatherRequest.png" title="Météo" description="Affiche la météo et l'heure locale." category={{ name: "✨ Utilitaires", color: "#406880" }} publicationDate="18/03/2020" />
<FunctionCard slug="weatherRequest" image="/images/functions/weatherRequest.png" title="Météo" description="Affiche la météo et l'heure locale." category={{ name: "✨ Utilitaires", color: "#406880" }} publicationDate="18/03/2020" />
<FunctionCard slug="weatherRequest" image="/images/functions/weatherRequest.png" title="Météo" description="Affiche la météo et l'heure locale." category={{ name: "✨ Utilitaires", color: "#406880" }} publicationDate="18/03/2020" />
{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')} />
))}
{
!isLoadingFunctions && hasMoreFunctions
?
<button className="btn btn-dark" onClick={loadMore}>Charger plus de fonctions ?</button>
: !hasMoreFunctions ?
null
:
<p>Chargement...</p>
}
</div>
</div>
</div>
</Fragment>
);
</Fragment>
);
}
export default Functions;