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] = useState(1)
  const [currentPage, setCurrentPage] = useState(1)

  const { register, watch } = useForm()

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

  const fetchFollowers = async () => {
    setLoading(true)
    let params = {
      params: {
        page: currentPage
      }
    }
    if (watch('search')) {
      params = { params: { ...params.params, search: watch('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="row 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>
    </ContentTitle>
  )
}

export default Followers