Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from "react"
import { connect } from "react-redux"
import { axios } from "../../../utils"
import { addNotification } from "../../../redux/notification/notification.actions"
import Spinner from "../../../shared/loading-spinner/Spinner"
import Profile from "../../../components/Profile"
import SearchList from "../../../components/SearchList"
import PaginationComponent from "../../../shared/pagination/PaginationComponent"

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}`, { params: { 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: search,
      page: currentPage
    })
  }, [currentPage, search])

  return (
    <section className="companies-info">
      <div className="container">
        <SearchList
          title="Personas con Relación directa, de 1er nivel"
          fetchCallback={(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}
              />
            )
            : <p>No hay resultados</p>
          }
          {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)