Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import styled from "styled-components";
import { axios } from "../../../utils";
import Company from "./company/Company";
import Spinner from "../../../shared/loading-spinner/Spinner";
import AddCompanyModal from "./add-company-modal/AddCompanyModal";
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 MyCompanies = (props) => {
  // backendVars destructuring
  const { companySizes, industries } = props.backendVars;

  // states
  const [companies, setCompanies] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showAddCompanyModal, setShowCompanyModal] = useState(false);

  // React hook form
  const { register, getValues } = useForm();

  let axiosThrottle = null;

  useEffect(() => {
    fetchCompanies();
    return () => {
      clearTimeout(axiosThrottle);
    };
  }, []);

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

  const handleSearch = () => {
    //  (getValues());
    clearTimeout(axiosThrottle);
    // setLoading(true);
    const searchValue = getValues("search");
    axiosThrottle = setTimeout(() => {
      fetchCompanies(searchValue);
    }, 500);
  };

  const handleShowAddCompanyModal = () => {
    setShowCompanyModal(!showAddCompanyModal);
  };

  return (
    <React.Fragment>
      <section className="companies-info">
        <div className="container">
          <SearchList
            title="Mis Empresas"
            fetchCallback={fetchCompanies}
            addTitle="Agregar"
            addCallback={handleShowAddCompanyModal}
          />

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

      <AddCompanyModal
        show={showAddCompanyModal}
        onHide={handleShowAddCompanyModal}
        fetchCompanies={fetchCompanies}
        companySizes={companySizes}
        industries={industries}
      />
    </React.Fragment>
  );
};

export default MyCompanies;