Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 2508 Rev 5169
Línea -... Línea 1...
- 
 
 1 
/* eslint-disable camelcase */
1 
import React from "react";
 2 
/* eslint-disable react/prop-types */
2 
import { useEffect, useState } from "react";
 3 
import React, { useEffect, useState } from 'react'
3 
import { useForm } from "react-hook-form";
 4 
import { connect } from 'react-redux'
4 
import { axios } from "../../../utils";
 5 
import { debounce } from '../../../utils'
5 
import Spinner from "../../../shared/loading-spinner/Spinner";
 6 
import { searchEntities } from '../../../services/search'
6 
import CompanyTemplate from "./companyTemplate/CompanyTemplate";
 7 
import { addNotification } from '../../../redux/notification/notification.actions'
7 
import { connect } from "react-redux";
 8 
import Profile from '../../../components/Profile'
8 
import { addNotification } from "../../../redux/notification/notification.actions";
 9 
import Spinner from '../../../shared/loading-spinner/Spinner'
9 
import SearchList from "../../../components/SearchList";
 10 
import SearchList from '../../../components/SearchList'
- 
 
 11 
import EmptySection from '../../../shared/empty-section/EmptySection'
10 
import Profile from "../../../components/Profile";
 12 
import TitleSection from '../../../components/TitleSection'
11 
 
 13 
 
12 
const IWorkWith = (props) => {
 14 
const IWorkWith = ({ addNotification }) => {
13 
  // redux destructuring
 - 
 
14 
  const { addNotification } = props;
 - 
 
15 
 
 - 
 
16 
  // states
 - 
 
17 
  const [companies, setCompanies] = useState([]);
 15 
  const [companies, setCompanies] = useState([])
18 
  const [loading, setLoading] = useState(true);
 16 
  const [loading, setLoading] = useState(true)
19 
 
 - 
 
20 
  // React hook form
 - 
 
21 
  const { register, getValues } = useForm();
 - 
 
22 
 
 - 
 
23 
  let axiosThrottle = null;
 - 
 
Línea 24... Línea 17...
24 
 
 17 
 
25 
  useEffect(() => {
 18 
  useEffect(() => {
26 
    fetchCompanies();
 19 
    getCompanies()
- 
 
 20 
  }, [])
- 
 
 21 
 
- 
 
 22 
  const getCompanies = async (searchValue = '') => {
- 
 
 23 
    setLoading(true)
- 
 
 24 
    const response = await searchEntities('company/i-work-with', searchValue)
- 
 
 25 
 
- 
 
 26 
    if (!response.success) {
- 
 
 27 
      addNotification({ style: 'danger', msg: response.data })
- 
 
 28 
      setLoading(false)
- 
 
 29 
      return
- 
 
 30 
    }
- 
 
 31 
 
- 
 
 32 
    setCompanies(response.data)
- 
 
 33 
    setLoading(false)
Línea 27... Línea 34...
27 
  }, []);
 34 
  }
28 
 
 - 
 
29 
  const fetchCompanies = async (searchParam = '') => {
 - 
 
30 
    setLoading(true);
 - 
 
31 
    await axios
 - 
 
32 
      .get(
 - 
 
33 
        "/company/i-work-with?search=" + searchParam)
 - 
 
34 
      .then((response) => {
 - 
 
35 
        const resData = response.data;
 - 
 
36 
        if (resData.success) {
 - 
 
37 
          setCompanies(resData.data);
 - 
 
38 
        }
 - 
 
39 
      });
 - 
 
Línea 40... Línea 35...
40 
    setLoading(false);
 35 
 
41 
  };
 36 
  const handleSearch = debounce((value) => getCompanies(value), 500)
42 
 
 - 
 
43 
  return (
 - 
 
44 
    <section className="companies-info">
 37 
 
45 
      <div className="container">
 38 
  return (
46 
        <SearchList
 - 
 
47 
          title="Empresas donde trabajo"
 - 
 
48 
          fetchCallback={fetchCompanies}
 39 
    <section className="companies-info">
49 
        />
 40 
      <TitleSection title={LABELS.COMPANIES_I_WORK_WITH} />
50 
        <div
 - 
 
51 
          className="companies-list"
 41 
      <SearchList fetchCallback={handleSearch} />
52 
          id="profiles-container"
 - 
 
53 
          style={{
 - 
 
54 
            position: "relative",
 42 
      <div className="companies-list">
55 
          }}
 43 
        {loading && <Spinner />}
56 
        >
 44 
        {(!loading && Boolean(!companies.length)) && <EmptySection align='left' message={LABELS.DATATABLE_SZERORECORDS} />}
57 
          {companies.length > 0 ? (
 45 
        {(!loading && Boolean(companies.length)) &&
58 
            companies.map(({ image, link_leave, link_view, name, link_my_company }, id) => (
 46 
          companies.map(({ image, link_leave, link_view, name, link_my_company }, id) =>
59 
              <Profile
 47 
            <Profile
60 
                key={id}
 48 
              key={id}
61 
                image={image}
 49 
              image={image}
62 
                link_admin={link_my_company}
 50 
              link_admin={link_my_company}
63 
                link_leave={link_leave}
 51 
              link_leave={link_leave}
64 
                fetchCallback={fetchCompanies}
 52 
              fetchCallback={getCompanies}
65 
                link_view={link_view}
 53 
              link_view={link_view}
66 
                name={name}
 - 
 
67 
                btnAcceptTitle='Ver Empresa'
 - 
 
68 
              />
 - 
 
69 
            ))
 - 
 
70 
          ) : (
 - 
 
71 
            <div style={{ margin: "auto", textAlign: "center" }}>
 54 
              name={name}
72 
              Ningún registro coincidio con su consulta
 - 
 
73 
            </div>
 - 
 
74 
          )}
 - 
 
75 
          {loading && (
 - 
 
76 
            <div className="spinner-container">
 - 
 
77 
              <Spinner />
 - 
 
78 
            </div>
 - 
 
79 
          )}
 55 
              btnAcceptTitle={LABELS.VIEW_COMPANY}
80 
          {/* <!--product-feed-tab end--> */}
 56 
            />
81 
        </div>
 57 
          )}
82 
      </div>
 58 
      </div>
83 
    </section>
 - 
 
84 
  );
 - 
 
Línea 85... Línea 59...
85 
};
 59 
    </section>
86 
 
 60 
  )
87 
// const mapStateToProps = (state) => ({});
 61 
}
Línea 88... Línea 62...
88 
 
 62