import { Fragment, useState, useEffect, useRef, useCallback } from 'react'; import HeadTag from '../../components/HeadTag'; import FunctionCard from '../../components/FunctionCard/FunctionCard'; import Loader from '../../components/Loader'; import '../../public/css/pages/functions.css'; import api from '../../config/api'; import useAPI from '../../hooks/useAPI'; const Functions = () => { // State de recherche et de catégories const [, categories] = useAPI('/categories'); const [inputSearch, setInputSearch] = useState({ search: "", selectedCategory: "0" }); // State pour afficher les fonctions const [functionsData, setFunctionsData] = useState({ hasMore: true, rows: [] }); const [isLoadingFunctions, setLoadingFunctions] = useState(true); const [pageFunctions, setPageFunctions] = useState(1); // 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) { setPageFunctions(pageFunctions + 1); } }, { threshold: 1 }); if (node) observer.current.observe(node); }, [isLoadingFunctions, functionsData.hasMore]); 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(() => { 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(() => { getFunctionsData().then((data) => setFunctionsData(data)); }, [inputSearch.selectedCategory, inputSearch.search]); const handleChange = (event) => { const inputSearchNew = { ...inputSearch }; inputSearchNew[event.target.name] = event.target.value; setInputSearch(inputSearchNew); } return (

Fonctions

{functionsData.rows.map((f, index) => { // Si c'est le dernier élément if (functionsData.rows.length === index + 1) { return ; } return ; })}
{isLoadingFunctions && }
); } export default Functions;