Proyectos de Subversion LeadersLinked - Antes de SPA

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

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 FollowingCompanies = (props) => {
  // states
  const [companies, setCompanies] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetchCompanies();
  }, []);

  const fetchCompanies = async (searchParam = '') => {
    setLoading(true);
    await axios
      .get(
        "/company/following-companies?search=" + searchParam)
      .then((response) => {
        const resData = response.data;
        if (resData.success) {
          setCompanies(resData.data);
        }
      });
    setLoading(false);
  };

  

  return (
    <React.Fragment>
      <section className="companies-info">
        <div className="container">
          <SearchList
            title="Empresas que sigo"
            fetchCallback={fetchCompanies}
          />

          <div className="companies-list">
            <div
              className="row"
              id="profiles-container"
              style={{
                position: "relative",
              }}
            >
              {
                companies.length
                  ?
                  companies.map(({ image, name, link_view, link_unfollow }, index) => (
                    <Profile
                      image={image}
                      name={name}
                      link_view={link_view}
                      key={index}
                      fetchCallback={fetchCompanies}
                      link_unfollow={link_unfollow}
                    />
                  ))
                  :
                  <div style={{ margin: "auto", textAlign: "center" }}>
                    Ningún registro coincidio con su consulta
                  </div>
              }
              {
                loading
                &&
                <StyledSpinnerContainer>
                  <Spinner />
                </StyledSpinnerContainer>
              }
            </div>
            {/* <!--product-feed-tab end--> */}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
};

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

// })

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

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