🎨 Configure standardJS
This commit is contained in:
divlo
@ -1,104 +1,103 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import FunctionCard from '../FunctionCard/FunctionCard';
|
||||
import Loader from '../Loader';
|
||||
import api from '../../utils/api';
|
||||
import useAPI from '../../hooks/useAPI';
|
||||
import './FunctionsList.css';
|
||||
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import FunctionCard from '../FunctionCard/FunctionCard'
|
||||
import Loader from '../Loader'
|
||||
import api from '../../utils/api'
|
||||
import useAPI from '../../hooks/useAPI'
|
||||
import './FunctionsList.css'
|
||||
|
||||
let pageFunctions = 1;
|
||||
let pageFunctions = 1
|
||||
const FunctionsList = (props) => {
|
||||
const { categoryId } = useRouter().query
|
||||
|
||||
const { categoryId } = useRouter().query;
|
||||
// State de recherche et de catégories
|
||||
const [, categories] = useAPI('/categories')
|
||||
const [inputSearch, setInputSearch] = useState({ search: '', selectedCategory: categoryId || '0' })
|
||||
|
||||
// State de recherche et de catégories
|
||||
const [, categories] = useAPI('/categories');
|
||||
const [inputSearch, setInputSearch] = useState({ search: "", selectedCategory: categoryId || "0" });
|
||||
// State pour afficher les fonctions
|
||||
const [functionsData, setFunctionsData] = useState({ hasMore: true, rows: [] })
|
||||
const [isLoadingFunctions, setLoadingFunctions] = useState(true)
|
||||
|
||||
// State pour afficher les fonctions
|
||||
const [functionsData, setFunctionsData] = useState({ hasMore: true, rows: [] });
|
||||
const [isLoadingFunctions, setLoadingFunctions] = useState(true);
|
||||
|
||||
// Récupère la catégorie avec la query categoryId
|
||||
useEffect(() => {
|
||||
if (categoryId) {
|
||||
handleChange({ target: { name: "selectedCategory", value: categoryId } });
|
||||
}
|
||||
}, [categoryId]);
|
||||
|
||||
// Récupère les fonctions si la catégorie/recherche change
|
||||
useEffect(() => {
|
||||
pageFunctions = 1;
|
||||
getFunctionsData().then((data) => setFunctionsData(data));
|
||||
}, [inputSearch]);
|
||||
|
||||
// Permet la pagination au scroll
|
||||
const observer = useRef();
|
||||
const lastFunctionCardRef = useCallback((node) => {
|
||||
if (isLoadingFunctions) return;
|
||||
if (observer.current) observer.current.disconnect();
|
||||
observer.current = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && functionsData.hasMore) {
|
||||
pageFunctions += 1;
|
||||
getFunctionsData().then((data) => {
|
||||
setFunctionsData((oldData) => {
|
||||
return {
|
||||
hasMore: data.hasMore,
|
||||
rows: [...oldData.rows, ...data.rows]
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}, { threshold: 1 });
|
||||
if (node) observer.current.observe(node);
|
||||
}, [isLoadingFunctions, functionsData.hasMore]);
|
||||
|
||||
const getFunctionsData = async () => {
|
||||
setLoadingFunctions(true);
|
||||
const URL = `${(props.isAdmin) ? "/admin/functions" : "/functions"}?page=${pageFunctions}&limit=10&categoryId=${inputSearch.selectedCategory}&search=${inputSearch.search}`;
|
||||
const { data } = await api.get(URL, {
|
||||
headers: {
|
||||
...(props.isAdmin && props.token != undefined) && { 'Authorization': props.token }
|
||||
}
|
||||
});
|
||||
setLoadingFunctions(false);
|
||||
return data;
|
||||
// Récupère la catégorie avec la query categoryId
|
||||
useEffect(() => {
|
||||
if (categoryId) {
|
||||
handleChange({ target: { name: 'selectedCategory', value: categoryId } })
|
||||
}
|
||||
}, [categoryId])
|
||||
|
||||
const handleChange = (event) => {
|
||||
const inputSearchNew = { ...inputSearch };
|
||||
inputSearchNew[event.target.name] = event.target.value;
|
||||
setInputSearch(inputSearchNew);
|
||||
}
|
||||
// Récupère les fonctions si la catégorie/recherche change
|
||||
useEffect(() => {
|
||||
pageFunctions = 1
|
||||
getFunctionsData().then((data) => setFunctionsData(data))
|
||||
}, [inputSearch])
|
||||
|
||||
return (
|
||||
<div className="container text-center">
|
||||
<div className="row justify-content-center">
|
||||
{props.children}
|
||||
</div>
|
||||
// Permet la pagination au scroll
|
||||
const observer = useRef()
|
||||
const lastFunctionCardRef = useCallback((node) => {
|
||||
if (isLoadingFunctions) return
|
||||
if (observer.current) observer.current.disconnect()
|
||||
observer.current = new window.IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && functionsData.hasMore) {
|
||||
pageFunctions += 1
|
||||
getFunctionsData().then((data) => {
|
||||
setFunctionsData((oldData) => {
|
||||
return {
|
||||
hasMore: data.hasMore,
|
||||
rows: [...oldData.rows, ...data.rows]
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}, { threshold: 1 })
|
||||
if (node) observer.current.observe(node)
|
||||
}, [isLoadingFunctions, functionsData.hasMore])
|
||||
|
||||
<div className="Functions__search-container row justify-content-center">
|
||||
<select name="selectedCategory" value={inputSearch.selectedCategory} onChange={handleChange} className="Functions__select Functions__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 value={inputSearch.search} onChange={handleChange} type="search" className="Functions__form-control Functions__search-input" name="search" id="search" placeholder="🔎 Rechercher..." />
|
||||
</div>
|
||||
const getFunctionsData = async () => {
|
||||
setLoadingFunctions(true)
|
||||
const URL = `${(props.isAdmin) ? '/admin/functions' : '/functions'}?page=${pageFunctions}&limit=10&categoryId=${inputSearch.selectedCategory}&search=${inputSearch.search}`
|
||||
const { data } = await api.get(URL, {
|
||||
headers: {
|
||||
...(props.isAdmin && props.token != null) && { Authorization: props.token }
|
||||
}
|
||||
})
|
||||
setLoadingFunctions(false)
|
||||
return data
|
||||
}
|
||||
|
||||
<div className="row justify-content-center">
|
||||
{functionsData.rows.map((currentFunction, index) => {
|
||||
// Si c'est le dernier élément
|
||||
if (functionsData.rows.length === index + 1) {
|
||||
return <FunctionCard isAdmin={props.isAdmin} key={currentFunction.id} ref={lastFunctionCardRef} { ...currentFunction } />;
|
||||
}
|
||||
return <FunctionCard isAdmin={props.isAdmin} key={currentFunction.id} { ...currentFunction } />;
|
||||
})}
|
||||
</div>
|
||||
{isLoadingFunctions && <Loader />}
|
||||
</div>
|
||||
);
|
||||
const handleChange = (event) => {
|
||||
const inputSearchNew = { ...inputSearch }
|
||||
inputSearchNew[event.target.name] = event.target.value
|
||||
setInputSearch(inputSearchNew)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='container text-center'>
|
||||
<div className='row justify-content-center'>
|
||||
{props.children}
|
||||
</div>
|
||||
|
||||
<div className='Functions__search-container row justify-content-center'>
|
||||
<select name='selectedCategory' value={inputSearch.selectedCategory} onChange={handleChange} className='Functions__select Functions__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 value={inputSearch.search} onChange={handleChange} type='search' className='Functions__form-control Functions__search-input' name='search' id='search' placeholder='🔎 Rechercher...' />
|
||||
</div>
|
||||
|
||||
<div className='row justify-content-center'>
|
||||
{functionsData.rows.map((currentFunction, index) => {
|
||||
// Si c'est le dernier élément
|
||||
if (functionsData.rows.length === index + 1) {
|
||||
return <FunctionCard isAdmin={props.isAdmin} key={currentFunction.id} ref={lastFunctionCardRef} {...currentFunction} />
|
||||
}
|
||||
return <FunctionCard isAdmin={props.isAdmin} key={currentFunction.id} {...currentFunction} />
|
||||
})}
|
||||
</div>
|
||||
{isLoadingFunctions && <Loader />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FunctionsList;
|
||||
export default FunctionsList
|
||||
|
||||
Reference in New Issue
Block a user