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;