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

🐛 FIX: FunctionsList changement de page/catégorie

Browse Source
This commit is contained in:
Divlo 2020-04-25 00:11:34 +02:00
parent 8d7b3278c7
commit bc249f00e4
1 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
website/components/FunctionsList/FunctionsList.js
View File

@ -9,6 +9,7 @@ import './FunctionsList.css';
const FunctionsList = (props) => { const FunctionsList = (props) => {
const { categoryId } = useRouter().query; const { categoryId } = useRouter().query;
let pageFunctions = 1;
// State de recherche et de catégories // State de recherche et de catégories
const [, categories] = useAPI('/categories'); const [, categories] = useAPI('/categories');
@ -17,7 +18,6 @@ const FunctionsList = (props) => {
// State pour afficher les fonctions // State pour afficher les fonctions
const [functionsData, setFunctionsData] = useState({ hasMore: true, rows: [] }); const [functionsData, setFunctionsData] = useState({ hasMore: true, rows: [] });
const [isLoadingFunctions, setLoadingFunctions] = useState(true); const [isLoadingFunctions, setLoadingFunctions] = useState(true);
const [pageFunctions, setPageFunctions] = useState(1);
// Récupère la catégorie avec la query categoryId // Récupère la catégorie avec la query categoryId
useEffect(() => { useEffect(() => {
@ -26,18 +26,11 @@ const FunctionsList = (props) => {
} }
}, [categoryId]); }, [categoryId]);
// 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 // Récupère les fonctions si la catégorie/recherche change
useEffect(() => { useEffect(() => {
pageFunctions = 1;
getFunctionsData().then((data) => setFunctionsData(data)); getFunctionsData().then((data) => setFunctionsData(data));
}, [inputSearch.selectedCategory, inputSearch.search]); }, [inputSearch]);
// Permet la pagination au scroll // Permet la pagination au scroll
const observer = useRef(); const observer = useRef();
@ -46,7 +39,15 @@ const FunctionsList = (props) => {
if (observer.current) observer.current.disconnect(); if (observer.current) observer.current.disconnect();
observer.current = new IntersectionObserver((entries) => { observer.current = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && functionsData.hasMore) { if (entries[0].isIntersecting && functionsData.hasMore) {
setPageFunctions(pageFunctions + 1); pageFunctions += 1;
getFunctionsData().then((data) => {
setFunctionsData((oldData) => {
return {
hasMore: data.hasMore,
rows: [...oldData.rows, ...data.rows]
}
});
});
} }
}, { threshold: 1 }); }, { threshold: 1 });
if (node) observer.current.observe(node); if (node) observer.current.observe(node);