Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";

import { 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)

  useEffect(() => {

    fetchMyConnections({

      search: search,

      page: currentPage

    })

  }, [currentPage, search]);

  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)

  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);