Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */

import React, { useEffect, useState } from 'react'

import { connect } from 'react-redux'

import { searchEntities } from '../../../services/search'

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'

import { debounce } from '../../../utils'

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)

  useEffect(() => {

    fetchMyConnections(search, currentPage)

  }, [currentPage, search])

  const fetchMyConnections = async (search = '', page = 1) => {

    setLoading(true)

    const response = await searchEntities('connection/my-connections', search, page)

    if (!response.success) {

      addNotification({ style: 'danger', msg: response.data })

      setLoading(false)

      return

    }

    setMyConnections(response.data.current.items)

    setCurrentPage(response.data.current.page)

    setPages(response.data.total.pages)

    setLoading(false)

  }

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

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

  return (

    <section className="companies-info container">

      <TitleSection title={LABELS.FIRST_LEVEL_PERSONS} />

      <SearchList onChange={handleSearch} />

      <div className="companies-list">

        {loading && <Spinner />}

        {(!loading && Boolean(!myConnections.length)) && <EmptySection align='left' message={LABELS.DATATABLE_SZERORECORDS} />}

        {(!loading && Boolean(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}

            />

          )

        }

      </div>

      <PaginationComponent

        onChangePage={handleChangePage}

        pages={pages}

        currentActivePage={currentPage}

        isRow={true}

      />

    </section>

  )

}

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification)

}

export default connect(null, mapDispatchToProps)(MyConnections)