Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'
import { axios, debounce, jsonToParams } from '../../utils'
import { Container } from '@mui/material'
import { useSelector } from 'react-redux'

import Spinner from '../../components/UI/Spinner'
import SearchBar from '../../components/UI/SearchBar'
import ProfileItem from '../../components/profile/ProfileItem'
import EmptySection from '../../components/UI/EmptySection'
import TitleSection from '../../components/UI/TitleSection'
import LoaderContainer from '../../components/UI/LoaderContainer'
import PaginationComponent from '../../components/UI/PaginationComponent'

const ImpersonatePage = () => {
  const [users, setUsers] = useState([])
  const [search, setSearch] = useState('')
  const [currentPage, setCurrentPage] = useState(1)
  const [pages, setPages] = useState(1)
  const [loading, setLoading] = useState(false)
  const labels = useSelector(({ intl }) => intl.labels)

  const handleSearch = debounce((value) => setSearch(value), 500)

  const fetchUsers = async (page = 1, keyword = '') => {
    setLoading(true)

    setCurrentPage(page)
    const urlParams = {
      page,
      keyword,
    }

    await axios
      .get(`/impersonate?${jsonToParams(urlParams)}`)
      .then((response) => {
        const { success, data } = response.data
        if (success) {
          setUsers(data.current.items)
          setPages(data.total.pages)
        }
      })
    setLoading(false)
  }

  useEffect(() => {
    fetchUsers(currentPage, search)
  }, [currentPage, search])

  return (
    <>
      <Container componen="main" className="companies-info ">
        <TitleSection title="Usuarios disponibles a personalizar" />
        <SearchBar onChange={handleSearch} />
        {loading ? (
          <LoaderContainer>
            <Spinner />
          </LoaderContainer>
        ) : (
          <ul className="companies-list">
            {users.length > 0 ? (
              users.map(
                ({ image, name, email, network, link_impersonate }, id) => (
                  <ProfileItem
                    isTopData
                    key={id}
                    image={image}
                    name={name}
                    email={email}
                    network={network}
                    link_impersonate={link_impersonate}
                  />
                )
              )
            ) : (
              <EmptySection
                align="left"
                message={labels.datatable_szerorecords}
              />
            )}
          </ul>
        )}
        <PaginationComponent
          pages={pages}
          currentActivePage={currentPage}
          onChangePage={fetchUsers}
        />
      </Container>
    </>
  )
}

export default ImpersonatePage