Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */
/* eslint-disable react/prop-types */
import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { debounce } from '../../../utils'
import { addNotification } from '../../../redux/notification/notification.actions'
import { searchEntities } from '../../../services/search'
import Profile from '../../../components/Profile'
import SearchList from '../../../components/SearchList'
import Spinner from '../../../shared/loading-spinner/Spinner'
import PaginationComponent from '../../../shared/pagination/PaginationComponent'
import EmptySection from '../../../shared/empty-section/EmptySection'
import TitleSection from '../../../components/TitleSection'

const PeopleYouMayKnow = ({ addNotification }) => {
  const [entities, setEntities] = useState([])
  const [loading, setLoading] = useState(false)
  const [search, setSearch] = useState('')
  const [page, setPage] = useState(1)
  const [pages, setPages] = useState(1)

  useEffect(() => {
    getEntities(search, page)
  }, [search, page])

  const getEntities = async (searchValue = '', _page = page) => {
    setLoading(true)
    const response = await searchEntities('connection/people-you-may-know', searchValue, _page)
    if (!response.success) {
      addNotification({ style: 'danger', msg: response.data })
      setLoading(false)
      return
    }

    setEntities(response.data.current.items)
    setPages(response.data.total.pages)
    setPage(response.data.current.page)

    setLoading(false)
  }

  const handleSearch = debounce((value) => setSearch(value), 500)

  const onChangePage = (currentPage) => {
    setPage(currentPage)
    window.scrollTo(0, 0)
  }

  return (
    <section className="companies-info container">
      <TitleSection title={LABELS.PEOPLE_YOU_MAY_KNOW} />
      <SearchList onChange={handleSearch} />
      <div className="companies-list">
        {loading && <Spinner />}
        {(!loading && Boolean(!entities.length)) && <EmptySection align='left' message={LABELS.DATATABLE_SZERORECORDS} />}
        {(!loading && Boolean(entities.length)) &&
          entities.map(({ name, image, link_inmail, link_request, link_cancel, link_view }, id) =>
            <Profile
              key={id}
              isTopData
              image={image}
              name={name}
              link_inmail={link_inmail}
              link_view={link_view}
              link_request={link_request}
              link_cancel={link_cancel}
            />
          )}
      </div>
      <PaginationComponent
        onChangePage={onChangePage}
        pages={pages}
        currentActivePage={page}
        isRow={true}
      />
    </section>
  )
}

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

export default connect(null, mapDispatchToProps)(PeopleYouMayKnow)