diff --git a/website/components/FunctionsList/FunctionsList.js b/website/components/FunctionsList/FunctionsList.js index cd24467..356d014 100644 --- a/website/components/FunctionsList/FunctionsList.js +++ b/website/components/FunctionsList/FunctionsList.js @@ -53,18 +53,16 @@ const FunctionsList = (props) => { if (node) observer.current.observe(node); }, [isLoadingFunctions, functionsData.hasMore]); - const getFunctionsData = () => { + const getFunctionsData = async () => { setLoadingFunctions(true); - return new Promise(async (next) => { - const URL = `${(props.isAdmin) ? "/admin/functions" : "/functions"}?page=${pageFunctions}&limit=10&categoryId=${inputSearch.selectedCategory}&search=${inputSearch.search}`; - const result = await api.get(URL, { - headers: { - ...(props.isAdmin && props.token != undefined) && { 'Authorization': props.token } - } - }); - setLoadingFunctions(false); - next(result.data); + const URL = `${(props.isAdmin) ? "/admin/functions" : "/functions"}?page=${pageFunctions}&limit=10&categoryId=${inputSearch.selectedCategory}&search=${inputSearch.search}`; + const result = await api.get(URL, { + headers: { + ...(props.isAdmin && props.token != undefined) && { 'Authorization': props.token } + } }); + setLoadingFunctions(false); + return result.data; } const handleChange = (event) => { @@ -86,7 +84,7 @@ const FunctionsList = (props) => { ))} - +
Erreur: ${error.response.data.message}
`); diff --git a/website/pages/users/index.js b/website/pages/users/index.js new file mode 100644 index 0000000..bbfdfdd --- /dev/null +++ b/website/pages/users/index.js @@ -0,0 +1,109 @@ +import { Fragment, useState, useEffect, useRef, useCallback } from 'react'; +import Link from 'next/link'; +import HeadTag from '../../components/HeadTag'; +import Loader from '../../components/Loader'; +import api from '../../utils/api'; +import '../../public/css/pages/users.css'; +import { API_URL } from '../../utils/config/config'; + +const Users = () => { + + let pageUsers = 1; + + const [inputSearch, setInputSearch] = useState(""); + const [usersData, setUsersData] = useState({ totalItems: 0, hasMore: true, rows: [] }); + const [isLoadingUsers, setLoadingUsers] = useState(true); + + // Récupère les users si la recherche change + useEffect(() => { + pageUsers = 1; + getUsersData().then((data) => setUsersData(data)); + }, [inputSearch]); + + const getUsersData = async () => { + setLoadingUsers(true); + const { data } = await api.get(`/users?page=${pageUsers}&limit=15&search=${inputSearch}`); + setLoadingUsers(false); + return data; + } + + const handleSearchChange = (event) => { + setInputSearch(event.target.value); + } + + // Permet la pagination au scroll + const observer = useRef(); + const lastUserCardRef = useCallback((node) => { + if (isLoadingUsers) return; + if (observer.current) observer.current.disconnect(); + observer.current = new IntersectionObserver((entries) => { + if (entries[0].isIntersecting && usersData.hasMore) { + pageUsers += 1; + getUsersData().then((data) => { + setUsersData((oldData) => { + return { + totalItems: data.totalItems, + hasMore: data.hasMore, + rows: [...oldData.rows, ...data.rows] + } + }); + }); + } + }, { threshold: 1 }); + if (node) observer.current.observe(node); + }, [isLoadingUsers, usersData.hasMore]); + + return ( +La liste des utilisateurs - Total de {usersData.totalItems} utilisateurs :
+