Proyectos de Subversion LeadersLinked - SPA

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

import { useFetch, useSearchParams } from '@hooks'

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 { setParams, params } = useSearchParams()
  const { data, isLoading } = useFetch(
    `/impersonate?${jsonToParams(params)}`,
    {}
  )
  const labels = useSelector(({ intl }) => intl.labels)

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

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

      <SearchBar onChange={handleSearch} />

      {isLoading ? (
        <LoaderContainer>
          <Spinner />
        </LoaderContainer>
      ) : (
        <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>
      )}
      <PaginationComponent
        pages={data.total?.pages}
        currentActivePage={data.current?.page}
        onChangePage={(newPage) => setParams('page', newPage)}
        isRow
      />
    </Container>
  )
}

export default ImpersonatePage