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