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