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">

      <div className="container">

        <TitleSection title={LABELS.FIRST_LEVEL_PERSONS} />

        <SearchList onChange={(value) => setSearch(value)}/>

        <div className="companies-list" style={{ position: 'relative', padding: '0 15px' }}>

          {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}

        />

      </div>

    </section>

  )

}

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification)

}

export default connect(null, mapDispatchToProps)(MyConnections)