Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2507 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2507 Rev 5166
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 styled from "styled-components";
 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 { connect } from "react-redux";
 6 
import { searchEntities } from '../../../services/search'
7 
import { addNotification } from "../../../redux/notification/notification.actions";
 7 
import { addNotification } from '../../../redux/notification/notification.actions'
- 
 
 8 
import Spinner from '../../../shared/loading-spinner/Spinner'
8 
import SearchList from "../../../components/SearchList";
 9 
import SearchList from '../../../components/SearchList'
9 
import Profile from "../../../components/Profile";
 10 
import Profile from '../../../components/Profile'
10 
 
 - 
 
11 
const StyledSpinnerContainer = styled.div`
 11 
import TitleSection from '../../../components/TitleSection'
12 
  position: absolute;
 - 
 
13 
  left: 0;
 - 
 
14 
  top: 0;
 - 
 
15 
  width: 100%;
 - 
 
16 
  height: 100%;
 - 
 
17 
  background: rgba(255, 255, 255, 0.4);
 12 
import EmptySection from '../../../shared/empty-section/EmptySection'
18 
  display: flex;
 - 
 
19 
  justify-content: center;
 - 
 
20 
  align-items: center;
 - 
 
21 
  z-index: 300;
 - 
 
22 
`;
 - 
 
23 
 
 13 
 
24 
const FollowingCompanies = (props) => {
 14 
const FollowingCompanies = ({ addNotification }) => {
25 
  // states
 - 
 
26 
  const [companies, setCompanies] = useState([]);
 15 
  const [companies, setCompanies] = useState([])
27 
  const [loading, setLoading] = useState(true);
 16 
  const [loading, setLoading] = useState(true)
28 
  useEffect(() => {
 - 
 
29 
    fetchCompanies();
 - 
 
30 
  }, []);
 - 
 
Línea 31... Línea -...
31 
 
 - 
 
32 
  const fetchCompanies = async (searchParam = '') => {
 17 
 
33 
    setLoading(true);
 18 
  useEffect(() => {
34 
    await axios
 - 
 
35 
      .get(
 - 
 
36 
        "/company/following-companies?search=" + searchParam)
 - 
 
37 
      .then((response) => {
 - 
 
38 
        const resData = response.data;
 - 
 
39 
        if (resData.success) {
 - 
 
40 
          setCompanies(resData.data);
 - 
 
41 
        }
 19 
    getCompanies()
42 
      });
 - 
 
43 
    setLoading(false);
 - 
 
Línea -... Línea 20...
- 
 
 20 
  }, [])
- 
 
 21 
 
- 
 
 22 
  const getCompanies = async (searchValue = '') => {
- 
 
 23 
    setLoading(true)
- 
 
 24 
    const response = await searchEntities('company/following-companies', searchValue)
- 
 
 25 
 
- 
 
 26 
    if (!response.success) {
- 
 
 27 
      addNotification({ style: 'danger', msg: response.data })
- 
 
 28 
      setLoading(false)
- 
 
 29 
      return
- 
 
 30 
    }
- 
 
 31 
 
- 
 
 32 
    setCompanies(response.data)
Línea -... Línea 33...
- 
 
 33 
    setLoading(false)
Línea 44... Línea 34...
44 
  };
 34 
  }
45 
 
 - 
 
46 
 
 35 
 
47 
 
 - 
 
48 
  return (
 - 
 
49 
    <React.Fragment>
 36 
  const handleSearch = debounce((value) => getCompanies(value), 500)
50 
      <section className="companies-info">
 37 
 
51 
        <div className="container">
 - 
 
52 
          <SearchList
 38 
  return (
53 
            title="Empresas que sigo"
 39 
    <section className="companies-info container">
- 
 
 40 
      <TitleSection title={LABELS.COMPANIES_I_FOLLOW} />
54 
            fetchCallback={fetchCompanies}
 41 
      <SearchList onChange={handleSearch} />
55 
          />
 - 
 
56 
          <div className="companies-list">
 42 
      <div className="companies-list">
57 
            {
 43 
        {loading && <Spinner />}
58 
              companies.length
 44 
        {(!loading && Boolean(!companies.length)) && <EmptySection align='left' message={LABELS.DATATABLE_SZERORECORDS} />}
59 
                ?
 45 
        {(!loading && Boolean(companies.length)) &&
60 
                companies.map(({ image, name, link_view, link_unfollow }, index) => (
 46 
          companies.map(({ image, name, link_view, link_unfollow }, index) =>
61 
                  <Profile
 47 
            <Profile
62 
                    image={image}
 48 
              key={index}
63 
                    name={name}
 49 
              name={name}
64 
                    link_view={link_view}
 50 
              image={image}
65 
                    key={index}
 - 
 
66 
                    fetchCallback={fetchCompanies}
 - 
 
67 
                    link_unfollow={link_unfollow}
 - 
 
68 
                    btnAcceptTitle='Ver Empresa'
 - 
 
69 
                  />
 - 
 
70 
                ))
 - 
 
71 
                :
 - 
 
72 
                <div style={{ margin: "auto", textAlign: "center" }}>
 51 
              link_view={link_view}
73 
                  Ningún registro coincidio con su consulta
 - 
 
74 
                </div>
 - 
 
75 
            }
 - 
 
76 
            {
 - 
 
77 
              loading
 - 
 
78 
              &&
 52 
              fetchCallback={getCompanies}
79 
              <StyledSpinnerContainer>
 - 
 
80 
                <Spinner />
 - 
 
81 
              </StyledSpinnerContainer>
 53 
              link_unfollow={link_unfollow}
82 
            }
 54 
              btnAcceptTitle={LABELS.VIEW_COMPANY}
83 
            {/* <!--product-feed-tab end--> */}
 - 
 
84 
          </div>
 55 
            />
85 
        </div>
 56 
          )}
86 
      </section>
 - 
 
87 
    </React.Fragment>
 - 
 
88 
  );
 - 
 
89 
};
 - 
 
Línea 90... Línea 57...
90 
 
 57 
      </div>
91 
// const mapStateToProps = (state) => ({
 58 
    </section>
92 
 
 59 
  )
Línea 93... Línea 60...
93 
// })
 60 
}