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, loading } = 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" />

      {loading ? (
        <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;