Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */
import React, { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'
import { connect } from 'react-redux'
import { axios, jsonToParams } from '../../utils'
import { addNotification } from '../../redux/notification/notification.actions'
import Profile from '../../components/Profile'
import Spinner from '../../shared/loading-spinner/Spinner'
import PaginationComponent from '../../shared/pagination/PaginationComponent'

const Impersonate = () => {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')
  const [currentPage, setCurrentPage] = useState(1)
  const [pages, setPages] = useState(1)
  const { register, getValues } = useForm()

  useEffect(() => {
    fetchUsers()
  }, [])

  const handleSearch = () => {
    const searchValue = getValues('search')
    setTimeout(() => fetchUsers(1, searchValue), [500])
  }

  const fetchUsers = async (page = 1, keyword = '') => {
    setLoading(true)
    setError(false)
    setCurrentPage(page)
    const urlParams = {
      page,
      keyword
    }

    await axios
      .get(`/impersonate?${jsonToParams(urlParams)}`)
      .then((response) => {
        const responseData = response.data
        if (responseData.success) {
          setUsers(responseData.data.current.items)
          setPages(responseData.data.total.pages)
        } else {
          const newError = responseData.data
          setError(newError)
        }
      })
    setLoading(false)
  }

  return (
    <section className="companies-info">
      <div className="container">
        <div className="company-title">
          <div className="section_admin_title_buttons">
            <h1 className="title">Usuarios disponibles a personalizar</h1>
          </div>
        </div>
        <div className="company-title">
          <div className="search-box border-gray border-radius">
            <div className="form-group">
              <input
                type="text"
                name="search"
                id="search"
                className="form-control"
                placeholder=""
                ref={register}
                onKeyUp={handleSearch}
              />
            </div>
          </div>
        </div>

        <div className="companies-list position-relative" id="profiles-container">
          {users.length > 0
            ? (users.map(({ image, name, email, network, link_impersonate }, id) => (
              <Profile
                isTopData
                key={id}
                image={image}
                name={name}
                email={email}
                network={network}
                link_impersonate={link_impersonate}
              />)))
            : <p>No hay resultados</p>
          }
          {loading && <Spinner />}
        </div>
      </div>
      <PaginationComponent
        pages={pages}
        currentActivePage={currentPage}
        onChangePage={fetchUsers}
      />
    </section>
  )
}

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification)
}

export default connect(null, mapDispatchToProps)(Impersonate)