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";

const Followers = ({ backendVars }) => {
  // backendVars destructuring
  const { table_link } = backendVars;
  // states
  const [followers, setFollowers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [pages, setPages] = useState(1);
  const [currentPage, setCurrentPage] = useState(1);

  // React hook form
  const { register, getValues } = useForm();

  let axiosThrottle = null;

  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((response) => {
        const resData = response.data;
        if (resData.success) {
          setFollowers(resData.data.current.items);
          setPages(resData.data.total.pages);
        }
      });
    setLoading(false);
  };

  const handleSearch = () => {
    //  (getValues());
    clearTimeout(axiosThrottle);
    // setLoading(true);
    axiosThrottle = setTimeout(() => {
      fetchFollowers();
    }, 500);
  };

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

  return (
    <section className="companies-info">
      <div className="container">
        <div className="company-title">
          <div className="section_admin_title_buttons">
            <div style={{ float: "left" }}>
              <h1 className="title">Seguidores</h1>
            </div>
          </div>
        </div>

        <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",
            }}
          >
            {followers.map(({ image, name, link_view, link_inmail }, index) => (
              <Follower
                key={index}
                image={image}
                name={name}
                link_view={link_view}
                link_inmail={link_inmail}
              />
            ))}
            <PaginationComponent
              pages={pages}
              currentPage={currentPage}
              onChangePage={handleChangePage}
            />
          </div>
          {/* <!--posts-section end--> */}
        </div>
      </div>
    </section>
  );
};

export default Followers;