Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";
import { useEffect, useState } from "react";
import { connect } from "react-redux";
import { useForm } from "react-hook-form";
import styled from "styled-components";
import {axios} from "../../../utils";
import { addNotification } from "../../../redux/notification/notification.actions";
import Spinner from "../../../shared/loading-spinner/Spinner";
import Entity from "./entity/Entity";
import Profile from "../../../components/Profile";
import SearchList from "../../../components/SearchList";

const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`;

const MyConnections = (props) => {
  // states
  const [myConnections, setMyConnections] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetchMyConnections();
  }, []);

  const fetchMyConnections = async (searchParam='') => {
    setLoading(true);
    await axios
      .get(
        "/connection/my-connections?search="+searchParam)
      .then((response) => {
        const resData = response.data;
        if (resData.success) {
          setMyConnections(resData.data);
        }
      });
    setLoading(false);
  };

  return (
    <section className="companies-info">
      <div className="container">
        <SearchList
          title="Personas con Relación directa, de 1er nivel"
          fetchCallback={fetchMyConnections}
        />

        <div className="companies-list">
          <div
            className="row"
            id="profiles-container"
            style={{
              position: "relative",
              padding: "0 15px",
            }}
          >
            {myConnections.length > 0 ? (
              myConnections.map(
                (
                  {
                    image,
                    name,
                    link_view,
                    link_inmail,
                    link_cancel,
                    link_block,
                  },
                  id
                ) => (
                  <Profile
                    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 && (
              <StyledSpinnerContainer>
                <Spinner />
              </StyledSpinnerContainer>
            )}
          </div>
          {/* <!--product-feed-tab end--> */}
        </div>
      </div>
    </section>
  );
};

// const mapStateToProps = (state) => ({});

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

export default connect(null, mapDispatchToProps)(MyConnections);