diff --git a/frontend/components/FunctionCard/FunctionCard.js b/frontend/components/FunctionCard/FunctionCard.js index 5e485aa..6864524 100644 --- a/frontend/components/FunctionCard/FunctionCard.js +++ b/frontend/components/FunctionCard/FunctionCard.js @@ -1,9 +1,9 @@ import Link from 'next/link'; -import { useState, Fragment } from 'react'; +import { useState, Fragment, forwardRef } from 'react'; import Loader from '../Loader/Loader'; import './FunctionCard.css'; -const FunctionCard = (props) => { +const FunctionCard = forwardRef((props, ref) => { const [isLoading, setIsLoading] = useState(true); @@ -14,8 +14,9 @@ const FunctionCard = (props) => { return ( -
- {isLoading && } + {/* Elément à une hauteur pendant chargement */} +
+ {isLoading && }
{props.title} @@ -31,6 +32,6 @@ const FunctionCard = (props) => { ); -} +}) export default FunctionCard; \ No newline at end of file diff --git a/frontend/pages/functions.js b/frontend/pages/functions.js index eed3271..ebbd659 100644 --- a/frontend/pages/functions.js +++ b/frontend/pages/functions.js @@ -1,4 +1,4 @@ -import { Fragment, useState, useEffect } from 'react'; +import { Fragment, useState, useEffect, useRef, useCallback } from 'react'; import HeadTag from '../components/HeadTag'; import FunctionCard from '../components/FunctionCard/FunctionCard'; import Loader from '../components/Loader/Loader'; @@ -18,6 +18,19 @@ const Functions = () => { 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) => { @@ -40,10 +53,6 @@ const Functions = () => { getFunctionsData().then((data) => setFunctionsData(data)); }, [inputSearch.selectedCategory, inputSearch.search]); - const loadMore = () => { - setPageFunctions(pageFunctions + 1); - } - const handleChange = (event) => { const inputSearchNew = { ...inputSearch }; inputSearchNew[event.target.name] = event.target.value; @@ -74,20 +83,15 @@ const Functions = () => {
- {functionsData.rows.map((f) => ( - - ))} + {functionsData.rows.map((f, index) => { + // Si c'est le dernier élément + if (functionsData.rows.length === index + 1) { + return ; + } + return ; + })}
- { - isLoadingFunctions ? - - : functionsData.hasMore ? -
- -
- : - null - } + {isLoadingFunctions && }
);