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

const Followers = ({ backendVars }) => {

  // backendVars destructuring

  const { table_link, allowDelete } = 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(({ data }) => {

        if (data.success) {

          setFollowers(data.data.items);

        }

      });

    setLoading(false);

  };

  const handleSearch = () => {

    //  (getValues());

    clearTimeout(axiosThrottle);

    // setLoading(true);

    axiosThrottle = setTimeout(() => {

      fetchFollowers();

    }, 500);

  };

  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 mb-2"

          id="profiles-container"

          style={{

            position: "relative",

          }}

        >

          {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}

            />

          ))}

          <PaginationComponent

            pages={pages}

            currentPage={currentPage}

            onChangePage={handleChangePage}

          />

        </div>

      </div>

    </ContentTitle>

  );

};

export default Followers;