Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';
import Search from '@mui/icons-material/Search';
import { Box, styled } from '@mui/material';
import { useSelector } from 'react-redux';

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;