@@ -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 &&
}