import { useState, useEffect, useRef, useCallback } from 'react' import HeadTag from '../../components/HeadTag' import Loader from '../../components/Loader' import UserCard from '../../components/UserCard/UserCard' import api from '../../utils/api' import '../../public/css/pages/users.css' 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 window.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 ( <>

Utilisateurs

La liste des utilisateurs - Total de {usersData.totalItems}{' '} utilisateurs :

{usersData.rows.map((user, index) => { // Si c'est le dernier élément if (usersData.rows.length === index + 1) { return ( ) } return ( ) })}
{isLoadingUsers && }
) } export default Users