Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useSelector } from 'react-redux'
import { Search } from '@mui/icons-material'

import { debounce } from '@utils'
import { useFetch, useSearchQuery } from '@hooks'

import Spinner from '../../components/UI/Spinner'
import Input from '../../components/UI/inputs/Input'
import ProfileItem from '../../components/profile/ProfileItem'
import EmptySection from '../../components/UI/EmptySection'
import TitleSection from '../../components/UI/TitleSection'
import Pagination from '@components/common/Pagination'

const ImpersonatePage = () => {
  const { getParam, setParam } = useSearchQuery()
  const { data, isLoading } = useFetch(
    '/impersonate?search=' + getParam('search')
  )
  const labels = useSelector(({ intl }) => intl.labels)

  const handleSearch = debounce((value) => setParam('keyword', value), 500)

  return (
    <>
      <TitleSection title='Usuarios disponibles a personalizar' />

      <Input icon={<Search />} onChange={handleSearch} variant='search' />

      {isLoading ? (
        <Spinner />
      ) : (
        <ul className='companies-list mt-3'>
          {data.current?.items?.length > 0 ? (
            data.current?.items?.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>
      )}
      <Pagination
        pages={data.total?.pages}
        page={data.current?.page}
        onChange={(newPage) => setParam('page', newPage)}
      />
    </>
  )
}

export default ImpersonatePage