115 lines
3.2 KiB
JavaScript
115 lines
3.2 KiB
JavaScript
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'
|
|
|
|
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 (
|
|
<>
|
|
<HeadTag title='Utilisateurs' description='Liste des utilisateurs.' />
|
|
|
|
<div className='container text-center'>
|
|
<div className='row justify-content-center'>
|
|
<div className='col-24'>
|
|
<h1 style={{ marginBottom: 0, paddingTop: '20px' }}>
|
|
Utilisateurs
|
|
</h1>
|
|
<p style={{ marginTop: '5px' }}>
|
|
La liste des utilisateurs - Total de {usersData.totalItems}{' '}
|
|
utilisateurs :
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='Users__search-container row justify-content-center'>
|
|
<input
|
|
value={inputSearch}
|
|
onChange={handleSearchChange}
|
|
type='search'
|
|
className='Users__form-control Users__search-input'
|
|
name='search'
|
|
id='search'
|
|
placeholder='🔎 Rechercher...'
|
|
/>
|
|
</div>
|
|
|
|
<div className='row justify-content-center'>
|
|
{usersData.rows.map((user, index) => {
|
|
// Si c'est le dernier élément
|
|
if (usersData.rows.length === index + 1) {
|
|
return (
|
|
<UserCard key={index} {...user} ref={lastUserCardRef} />
|
|
)
|
|
}
|
|
return (
|
|
<UserCard key={index} {...user} />
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{isLoadingUsers && <Loader />}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Users
|