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)