Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2504 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2504 Rev 5164
Línea 1... Línea 1...
1 
import React from "react";
 1 
/* eslint-disable camelcase */
2 
import { useEffect, useState } from "react";
 2 
import React, { useEffect, useState } from 'react'
3 
import { useForm } from "react-hook-form";
 3 
import { debounce } from '../../../utils'
4 
import styled from "styled-components";
 4 
import { useDispatch } from 'react-redux'
5 
import { axios } from "../../../utils";
 5 
import { addNotification } from '../../../redux/notification/notification.actions'
6 
import Company from "./company/Company";
 6 
import { searchEntities } from '../../../services/search'
7 
import Spinner from "../../../shared/loading-spinner/Spinner";
 7 
import Spinner from '../../../shared/loading-spinner/Spinner'
8 
import AddCompanyModal from "./add-company-modal/AddCompanyModal";
 8 
import AddCompanyModal from './add-company-modal/AddCompanyModal'
9 
import SearchList from "../../../components/SearchList";
 9 
import SearchList from '../../../components/SearchList'
10 
import Profile from "../../../components/Profile";
 10 
import Profile from '../../../components/Profile'
11 
 
 - 
 
12 
const StyledSpinnerContainer = styled.div`
 11 
import TitleSection from '../../../components/TitleSection'
13 
  position: absolute;
 - 
 
14 
  left: 0;
 - 
 
15 
  top: 0;
 - 
 
16 
  width: 100%;
 - 
 
17 
  height: 100%;
 - 
 
18 
  background: rgba(255, 255, 255, 0.4);
 12 
import EmptySection from '../../../shared/empty-section/EmptySection'
19 
  display: flex;
 - 
 
20 
  justify-content: center;
 - 
 
21 
  align-items: center;
 - 
 
22 
  z-index: 300;
 - 
 
23 
`;
 - 
 
24 
 
 13 
 
25 
const MyCompanies = (props) => {
 14 
const MyCompanies = ({ companySizes, industries }) => {
26 
  // backendVars destructuring
 - 
 
27 
  const { companySizes, industries } = props.backendVars;
 - 
 
28 
 
 - 
 
29 
  // states
 - 
 
30 
  const [companies, setCompanies] = useState([]);
 15 
  const [companies, setCompanies] = useState([])
31 
  const [loading, setLoading] = useState(true);
 16 
  const [loading, setLoading] = useState(true)
32 
  const [showAddCompanyModal, setShowCompanyModal] = useState(false);
 17 
  const [showAddCompanyModal, setShowCompanyModal] = useState(false)
33 
 
 - 
 
34 
  // React hook form
 - 
 
35 
  const { register, getValues } = useForm();
 18 
  const dispatch = useDispatch()
36 
 
 - 
 
37 
  let axiosThrottle = null;
 - 
 
Línea 38... Línea 19...
38 
 
 19 
 
39 
  useEffect(() => {
 20 
  useEffect(() => {
40 
    fetchCompanies();
 - 
 
41 
    return () => {
 - 
 
42 
      clearTimeout(axiosThrottle);
 - 
 
43 
    };
 21 
    getCompanies()
44 
  }, []);
 22 
  }, [])
45 
 
 23 
 
46 
  const fetchCompanies = async (searchParam = '') => {
 24 
  const getCompanies = async (searchValue = '') => {
47 
    setLoading(true);
 - 
 
48 
    await axios
 - 
 
49 
      .get(
 25 
    setLoading(true)
- 
 
 26 
    const response = await searchEntities('company/my-companies', searchValue)
50 
        "/company/my-companies?search=" + searchParam)
 27 
 
51 
      .then((response) => {
 28 
    if (!response.success) {
52 
        const resData = response.data;
 - 
 
53 
        if (resData.success) {
 29 
      dispatch(addNotification({ style: 'danger', msg: response.data }))
54 
          setCompanies(resData.data);
 30 
      setLoading(false)
55 
        }
 31 
      return
56 
      });
 - 
 
57 
    setLoading(false);
 - 
 
58 
  };
 32 
    }
59 
 
 - 
 
60 
  const handleSearch = () => {
 - 
 
61 
    //  (getValues());
 33 
 
62 
    clearTimeout(axiosThrottle);
 34 
    setCompanies(response.data)
63 
    // setLoading(true);
 - 
 
64 
    const searchValue = getValues("search");
 - 
 
65 
    axiosThrottle = setTimeout(() => {
 - 
 
66 
      fetchCompanies(searchValue);
 - 
 
67 
    }, 500);
 35 
    setLoading(false)
Línea 68... Línea 36...
68 
  };
 36 
  }
69 
 
 37 
 
70 
  const handleShowAddCompanyModal = () => {
 38 
  const handleShowAddCompanyModal = () => {
Línea 71... Línea -...
71 
    setShowCompanyModal(!showAddCompanyModal);
 - 
 
72 
  };
 - 
 
73 
 
 - 
 
74 
  return (
 - 
 
75 
    <React.Fragment>
 - 
 
76 
      <section className="companies-info">
 - 
 
77 
        <div className="container">
 - 
 
78 
          <SearchList
 - 
 
79 
            title="Mis Empresas"
 39 
    setShowCompanyModal(!showAddCompanyModal)
80 
            fetchCallback={fetchCompanies}
 - 
 
81 
            addTitle="Agregar"
 - 
 
82 
            addCallback={handleShowAddCompanyModal}
 - 
 
83 
          />
 - 
 
84 
 
 - 
 
85 
          <div
 - 
 
86 
            className="companies-list"
 - 
 
87 
            id="profiles-container"
 - 
 
88 
            style={{
 - 
 
89 
              position: "relative",
 - 
 
90 
            }}>
 - 
 
91 
            {
 - 
 
92 
              companies.length
 - 
 
93 
                ?
 - 
 
94 
                companies.map(({ image, link_my_company, link_view, name, status }, id) => (
 - 
 
95 
                  <Profile
 - 
 
96 
                    link_admin={link_my_company}
 - 
 
97 
                    key={id}
 - 
 
98 
                    name={name}
 - 
 
99 
                    image={image}
 - 
 
100 
                    status={status}
 - 
 
101 
                    link_view={link_view}
 - 
 
102 
                    btnAcceptTitle='Ver Empresa'
 - 
 
103 
                  />
 - 
 
104 
                ))
 - 
 
105 
                :
 - 
 
106 
                <div style={{ margin: "auto", textAlign: "center" }}>
 - 
 
107 
                  Ningún registro coincidio con su consulta
 - 
 
108 
                </div>
 - 
 
109 
            }
 - 
 
110 
            {loading && (
 - 
 
111 
              <StyledSpinnerContainer>
 - 
 
112 
                <Spinner />
 - 
 
113 
              </StyledSpinnerContainer>
 - 
 
114 
            )}
 - 
 
115 
            {/* <!--product-feed-tab end--> */}
 - 
 
Línea -... Línea 40...
- 
 
 40 
  }
- 
 
 41 
 
- 
 
 42 
  const handleSearch = debounce((value) => getCompanies(value), 500)
- 
 
 43 
 
- 
 
 44 
  return (
- 
 
 45 
    <section className="companies-info container">
- 
 
 46 
      <TitleSection title={LABELS.MY_COMPANIES} allowAdd onAdd={handleShowAddCompanyModal} />
- 
 
 47 
      <SearchList onChange={handleSearch} />
- 
 
 48 
      <div className="companies-list">
- 
 
 49 
        {loading && <Spinner />}
- 
 
 50 
        {(!loading && Boolean(!companies.length)) && <EmptySection align='left' message={LABELS.DATATABLE_SZERORECORDS} />}
- 
 
 51 
        {(!loading && Boolean(companies.length)) &&
- 
 
 52 
          companies.map(({ image, link_my_company, link_view, name, status }, id) =>
- 
 
 53 
            <Profile
- 
 
 54 
              link_admin={link_my_company}
- 
 
 55 
              key={id}
- 
 
 56 
              name={name}
- 
 
 57 
              image={image}
- 
 
 58 
              status={status}
- 
 
 59 
              link_view={link_view}
116 
          </div>
 60 
              btnAcceptTitle={LABELS.VIEW_COMPANY}
117 
        </div>
 61 
            />
118 
      </section>
 62 
          )}
119 
 
 63 
      </div>
120 
      <AddCompanyModal
 64 
      <AddCompanyModal
121 
        show={showAddCompanyModal}
 65 
        show={showAddCompanyModal}
122 
        onHide={handleShowAddCompanyModal}
 66 
        onHide={handleShowAddCompanyModal}
123 
        fetchCompanies={fetchCompanies}
 67 
        fetchCompanies={getCompanies}
124 
        companySizes={companySizes}
 68 
        companySizes={companySizes}
125 
        industries={industries}
 69 
        industries={industries}
Línea 126... Línea 70...
126 
      />
 70 
      />