Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 2718 Rev 5175
Línea 1... Línea 1...
1 
import React from "react";
 1 
/* eslint-disable react/prop-types */
- 
 
 2 
/* eslint-disable camelcase */
2 
import { useEffect, useState } from "react";
 3 
import React, { useEffect, useState } from 'react'
3 
import { connect } from "react-redux";
 4 
import { connect } from 'react-redux'
4 
import { useForm } from "react-hook-form";
 - 
 
5 
import styled from "styled-components";
 - 
 
6 
import { axios } from "../../../../utils";
 5 
import { debounce } from '../../../../utils'
7 
import Group from "./group/Group";
 - 
 
8 
import AddGroupModal from "./add-group-modal/AddGroupModal";
 6 
import { searchEntities } from '../../../../services/search'
9 
import { addNotification } from "../../../../redux/notification/notification.actions";
 7 
import { addNotification } from '../../../../redux/notification/notification.actions'
10 
import Spinner from "../../../../shared/loading-spinner/Spinner";
 8 
import Spinner from '../../../../shared/loading-spinner/Spinner'
11 
import SearchList from "../../../../components/SearchList";
 9 
import Profile from '../../../../components/Profile'
12 
import Profile from "../../../../components/Profile";
 10 
import SearchList from '../../../../components/SearchList'
13 
 
 - 
 
14 
const StyledSpinnerContainer = styled.div`
 11 
import TitleSection from '../../../../components/TitleSection'
15 
  position: absolute;
 12 
import EmptySection from '../../../../shared/empty-section/EmptySection'
16 
  left: 0;
 - 
 
17 
  top: 0;
 - 
 
18 
  width: 100%;
 - 
 
19 
  height: 100%;
 - 
 
20 
  background: rgba(255, 255, 255, 0.4);
 13 
import AddGroupModal from './add-group-modal/AddGroupModal'
21 
  display: flex;
 - 
 
22 
  justify-content: center;
 - 
 
23 
  align-items: center;
 - 
 
24 
  z-index: 300;
 - 
 
25 
`;
 - 
 
26 
 
 14 
 
27 
const MyGroups = (props) => {
 - 
 
28 
  // props destructuring
 - 
 
29 
  const { groupTypes, industries } = props.backendVars;
 15 
const MyGroups = ({ groupTypes, industries, addNotification }) => {
30 
 
 - 
 
31 
  // states
 - 
 
32 
  const [Groups, setGroups] = useState([]);
 16 
  const [groups, setGroups] = useState([])
33 
  const [loading, setLoading] = useState(true);
 17 
  const [loading, setLoading] = useState(true)
34 
  const [showAddGroupModal, setShowAddGroupModal] = useState(false);
 18 
  const [showAddGroupModal, setShowAddGroupModal] = useState(false)
Línea 35... Línea 19...
35 
 
 19 
 
36 
  useEffect(() => {
 20 
  useEffect(() => {
37 
    fetchGroups();
 21 
    getGroups()
Línea 38... Línea 22...
38 
  }, []);
 22 
  }, [])
39 
 
 23 
 
40 
  const fetchGroups = async (searchParam = '') => {
 - 
 
41 
    setLoading(true);
 - 
 
42 
    await axios
 24 
  const getGroups = async (searchValue = '') => {
- 
 
 25 
    setLoading(true)
43 
      .get(
 26 
    const response = await searchEntities('group/my-groups', searchValue)
44 
        "/group/my-groups?search=" + searchParam)
 27 
 
45 
      .then((response) => {
 28 
    if (!response.success) {
46 
        const resData = response.data;
 29 
      addNotification({ style: 'danger', msg: response.data })
47 
        (resData);
 - 
 
48 
        if (resData.success) {
 30 
      setLoading(false)
- 
 
 31 
      return
49 
          setGroups(resData.data);
 32 
    }
50 
        }
 33 
 
51 
      });
 34 
    setGroups(response.data)
Línea 52... Línea 35...
52 
    setLoading(false);
 35 
    setLoading(false)
53 
  };
 36 
  }
54 
 
 37 
 
- 
 
 38 
  const handleShowAddGroupModal = () => {
- 
 
 39 
    setShowAddGroupModal(!showAddGroupModal)
Línea 55... Línea 40...
55 
  const handleShowAddGroupModal = () => {
 40 
  }
56 
    setShowAddGroupModal(!showAddGroupModal);
 - 
 
57 
  };
 41 
 
58 
 
 - 
 
59 
  return (
 - 
 
60 
    <React.Fragment>
 - 
 
61 
      <section className="companies-info">
 42 
  const handleSearch = debounce((value) => getGroups(value), 500)
62 
        <div className="container">
 - 
 
63 
          <SearchList
 43 
 
64 
            title="Mis Grupos"
 - 
 
65 
            fetchCallback={fetchGroups}
 - 
 
66 
            addTitle="Agregar"
 44 
  return (
67 
            addCallback={handleShowAddGroupModal}
 45 
    <section className="companies-info container">
- 
 
 46 
      <TitleSection title={LABELS.MY_GROUPS} allowAdd onAdd={handleShowAddGroupModal} />
68 
          />
 47 
      <SearchList onChange={handleSearch} />
69 
 
 - 
 
70 
          <div className="companies-list">
 48 
      <div className="companies-list">
71 
            {
 49 
        {loading && <Spinner />}
72 
              Groups.length
 50 
        {(!loading && Boolean(!groups.length)) && <EmptySection align='left' message={LABELS.DATATABLE_SZERORECORDS} />}
73 
                ?
 51 
        {(!loading && Boolean(groups.length)) &&
74 
                Groups.map(
 52 
          groups.map(
75 
                  ({ image, link_delete, link_edit, link_view, name, privacy }, id) => (
 53 
            ({ image, link_delete, link_edit, link_view, name, privacy }, id) =>
76 
                    <Profile
 54 
              <Profile
77 
                      image={image}
 55 
                image={image}
78 
                      name={name}
 56 
                name={name}
79 
                      status={privacy}
 57 
                status={privacy}
80 
                      link_view={link_view}
 58 
                link_view={link_view}
81 
                      link_edit={link_edit}
 59 
                link_edit={link_edit}
82 
                      link_delete={link_delete}
 60 
                link_delete={link_delete}
83 
                      key={id}
 61 
                key={id}
84 
                      fetchCallback={fetchGroups}
 - 
 
85 
                      btnAcceptTitle='Ver grupo'
 - 
 
86 
                      btnEditTitle='Editar grupo'
 62 
                fetchCallback={getGroups}
87 
                      btnCancelTitle='Borrar grupo'
 - 
 
88 
                    />
 - 
 
89 
                  ))
 - 
 
90 
                :
 - 
 
91 
                <div style={{ margin: "auto", textAlign: "center" }}>
 - 
 
92 
                  Ningún registro coincidio con su consulta
 - 
 
93 
                </div>
 - 
 
94 
            }
 - 
 
95 
            {loading && (
 63 
                btnAcceptTitle={LABELS.GROUP_VIEW}
96 
              <StyledSpinnerContainer>
 - 
 
97 
                <Spinner />
 - 
 
98 
              </StyledSpinnerContainer>
 64 
                btnEditTitle={`${LABELS.EDIT} ${LABELS.GROUP.toLowerCase()}`}
99 
            )}
 - 
 
100 
          </div>
 65 
                btnCancelTitle={`${LABELS.DELETE} ${LABELS.GROUP.toLowerCase()}`}
101 
          {/* <!--product-feed-tab end--> */}
 66 
              />
102 
        </div>
 67 
          )}
103 
      </section>
 68 
      </div>
104 
      <AddGroupModal
 69 
      <AddGroupModal
105 
        show={showAddGroupModal}
 70 
        show={showAddGroupModal}
106 
        onHide={handleShowAddGroupModal}
 71 
        onHide={handleShowAddGroupModal}
107 
        fetchGroups={fetchGroups}
 72 
        getGroups={getGroups}
108 
        groupTypes={groupTypes}
 73 
        groupTypes={groupTypes}
109 
        industries={industries}
 74 
        industries={industries}
110 
      />
 - 
 
111 
    </React.Fragment>
 - 
 
Línea 112... Línea 75...
112 
  );
 75 
      />
113 
};
 76 
    </section>
114 
 
 77 
  )
Línea 115... Línea 78...
115 
// const mapStateToProps = (state) => ({});
 78 
}