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

frontend: Loader + Refactoring

Browse Source
This commit is contained in:
Divlo
2020-03-21 16:43:37 +01:00
parent a0fb5ee13a
commit 895d0c7f6b
8 changed files with 144 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
frontend/pages/functions.js
View File

@ -1,60 +1,50 @@
import { Fragment, useState, useEffect } from 'react';
import HeadTag from '../components/HeadTag';
import FunctionCard from '../components/FunctionCard/FunctionCard';
import Loader from '../components/Loader/Loader';
import '../public/css/pages/functions.css';
import { API_URL } from '../config/config';
import api from '../config/api';
import useAPI from '../hooks/useAPI';
const Functions = () => {
// State de recherche et de catégories
const [categories, setCategories] = useState([]);
const [, categories] = useAPI('/categories');
const [inputSearch, setInputSearch] = useState({ search: "", selectedCategory: "0" });
// State pour afficher les fonctions
const [functions, setFunctions] = useState([]);
const [functionsData, setFunctionsData] = useState({ hasMore: true, rows: [] });
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));
}, []);
const getFunctionsData = () => {
setLoadingFunctions(true);
return new Promise(async (next) => {
const result = await api.get(`/functions?page=${pageFunctions}&limit=10&categoryId=${inputSearch.selectedCategory}&search=${inputSearch.search}`);
setLoadingFunctions(false);
next(result.data);
});
}
// Récupère les fonctions si la page change
useEffect(() => {
api.get(`/functions?page=${pageFunctions}&limit=10&categoryId=${inputSearch.selectedCategory}&search=${inputSearch.search}`)
.then((result) => {
setLoadingFunctions(false);
sethasMoreFunctions(result.data.hasMore);
setFunctions([...functions, ...result.data.rows]);
})
.catch((error) => console.error(error));
getFunctionsData().then((data) => setFunctionsData({
hasMore: data.hasMore,
rows: [...functionsData.rows, ...data.rows]
}));
}, [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));
getFunctionsData().then((data) => setFunctionsData(data));
}, [inputSearch.selectedCategory, inputSearch.search]);
const loadMore = () => {
setLoadingFunctions(true);
setPageFunctions(pageFunctions + 1);
}
const handleChange = (event) => {
setLoadingFunctions(true);
const inputSearchNew = { ...inputSearch };
inputSearchNew[event.target.name] = event.target.value;
setInputSearch(inputSearchNew);
@ -72,7 +62,7 @@ const Functions = () => {
<div className="row justify-content-center">
<h1 className="Functions__title">Fonctions</h1>
</div>
<div className="Functions__search-container row justify-content-center">
<select name="selectedCategory" value={inputSearch.selectedCategory} onChange={handleChange} className="Functions__select form-control">
<option value="0">Toutes catégories</option>
@ -84,18 +74,19 @@ const Functions = () => {
</div>
<div className="row justify-content-center">
{functions.map((f) => (
{functionsData.rows.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')} />
))}
</div>
{
!isLoadingFunctions && hasMoreFunctions
?
<button className="btn btn-dark" onClick={loadMore}>Charger plus de fonctions ?</button>
: !hasMoreFunctions ?
null
{
isLoadingFunctions ?
<Loader width="100px" height="100px" />
: functionsData.hasMore ?
<div className="row justify-content-center">
<button className="btn btn-dark" style={{marginBottom: "50px"}} onClick={loadMore}>Charger plus de fonctions ?</button>
</div>
:
<p>Chargement...</p>
null
}
</div>
</Fragment>

33
frontend/pages/index.js
View File

@ -1,16 +1,25 @@
import { Fragment } from 'react';
import { Fragment, useEffect } from 'react';
import HeadTag from '../components/HeadTag';
const Home = () => (
<Fragment>
<HeadTag
title="FunctionProject"
description="FunctionProject est un projet créé par Divlo qui a pour but de rassembler plein de mini-programme permettant de faire plusieurs choses comme savoir la météo, générer un nombre aléatoire, etc."
image="/images/FunctionProject_icon_small.png"
/>
<div>Home</div>
{console.log('%c ⚙️ FunctionProject', 'color: #ffd800; font-weight: bold; background-color: #181818;padding: 10px;border-radius: 10px;font-size: 20px')}
</Fragment>
);
const Home = () => {
useEffect(() => {
console.log(
'%c ⚙️ FunctionProject',
'color: #ffd800; font-weight: bold; background-color: #181818;padding: 10px;border-radius: 10px;font-size: 20px'
);
}, []);
return (
<Fragment>
<HeadTag
title="FunctionProject"
description="FunctionProject est un projet créé par Divlo qui a pour but de rassembler plein de mini-programme permettant de faire plusieurs choses comme savoir la météo, générer un nombre aléatoire, etc."
image="/images/FunctionProject_icon_small.png"
/>
<div>Home</div>
</Fragment>
);
}
export default Home;