Proyectos de Subversion LeadersLinked - Backend

import React from "react";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import axios from "axios";
import Follower from "./follower/Follower";
import PaginationComponent from "../../shared/PaginationComponent";
import ContentTitle from "../../shared/ContentTitle";
import Spinner from "../../shared/Spinner";

const Followers = ({ backendVars }) => {

  let axiosThrottle = null;

  const { table_link, allowDelete } = backendVars;

  const [followers, setFollowers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [pages, setPages] = useState(1);
  const [currentPage, setCurrentPage] = useState(1);

  const { register, getValues } = useForm();

  useEffect(() => {
    fetchFollowers();
    return () => {
      clearTimeout(axiosThrottle);
    };
  }, [currentPage]);

  const fetchFollowers = async () => {
    setLoading(true);
    let params = {
      params: {
        page: currentPage,
      },
    };
    if (getValues("search")) {
      params = { params: { ...params.params, search: getValues("search") } };
    }
    await axios.get(table_link, params)
      .then(({ data }) => {
        if (data.success) {
          setFollowers(data.data.items);
        }
      });
    setLoading(false);
  };

  const handleSearch = () => {
    clearTimeout(axiosThrottle);
    axiosThrottle = setTimeout(() => {
      fetchFollowers();
    }, 500);
  };

  const deleteFollower = (email) => {
    setFollowers(followers.filter((follower) => follower.email !== email))
  }

  const handleChangePage = (newPage) => {
    setCurrentPage(newPage);
  };

  return (
    <ContentTitle title="Seguidores">
      <div className="company-title">
        <div className="section_admin_title_buttons">
          <form
            name="form-connection-search"
            id="form-connection-search"
            onSubmit={(event) => event.preventDefault()}
          >
            <div className="form-group">
              <input
                type="text"
                name="search"
                id="search"
                className="form-control"
                placeholder="Buscar"
                ref={register}
                onChange={handleSearch}
              />
            </div>
          </form>
        </div>
      </div>

      <div className="companies-list">
        <div
          className="row"
          id="profiles-container"
          style={{
            position: "relative",
          }}
        >
          {
            loading
            ? <Spinner />
            :
            followers.map(({ first_name, last_name, email, actions }, index) => (
            <Follower
              key={index}
              first_name={first_name}
              last_name={last_name}
              email={email}
              actions={actions}
              allowDelete={allowDelete}
              deleteFollower={deleteFollower}
            />
          ))}
          <PaginationComponent
            pages={pages}
            currentPage={currentPage}
            onChangePage={handleChangePage}
          />
        </div>
      </div>
    </ContentTitle>
  );
};

export default Followers;