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