Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */
import React, { useEffect, useState } from 'react'
import { axios } from '../../../utils'
import { connect } from 'react-redux'
import { addNotification } from '../../../redux/notification/notification.actions'
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 MyConnections = () => {
  const [myConnections, setMyConnections] = useState([])
  const [currentPage, setCurrentPage] = useState(1)
  const [search, setSearch] = useState('')
  const [pages, setPages] = useState(1)
  const [loading, setLoading] = useState(true)

  const fetchMyConnections = async ({ search = '', page = 1 }) => {
    setLoading(true)
    await axios
      .get(`/connection/my-connections?search=${search}&page=${page}`)
      .then(({ data: response }) => {
        if (response.success) {
          setMyConnections(response.data.current.items)
          setCurrentPage(response.data.current.page)
          setPages(response.data.total.pages)
        }
      })
    setLoading(false)
  }

  const handleChangePage = (newPage) => setCurrentPage(newPage)

  useEffect(() => {
    fetchMyConnections({
      search,
      page: currentPage
    })
  }, [currentPage, search])

  return (
    <section className="companies-info container">
      <TitleSection title={LABELS.FIRST_LEVEL_PERSONS} />
      <SearchList onChange={(value) => setSearch(value)} />
      <div className="companies-list">
        {myConnections.length
          ? myConnections.map(({ image, name, link_view, link_inmail, link_cancel, link_block }, id) =>
            <Profile
              isTopData
              key={id}
              image={image}
              name={name}
              link_inmail={link_inmail}
              link_view={link_view}
              link_cancel={link_cancel}
              link_block={link_block}
              fetchCallback={fetchMyConnections}
            />
          )
          : <EmptySection align='left' message={LABELS.DATATABLE_SZERORECORDS} />
        }
        {loading && <Spinner />}
      </div>
      <PaginationComponent
        onChangePage={handleChangePage}
        pages={pages}
        currentActivePage={currentPage}
        isRow={true}
      />
    </section>
  )
}

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

export default connect(null, mapDispatchToProps)(MyConnections)