Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 2384 Rev 4889
Línea 1... Línea 1...
1 
import React from "react";
 1 
import React from "react";
2 
import { useEffect, useState } from "react";
 2 
import { useEffect, useState } from "react";
3 
import { connect } from "react-redux";
 3 
import { connect } from "react-redux";
4 
import { useForm } from "react-hook-form";
 - 
 
5 
import styled from "styled-components";
 - 
 
6 
import { axios } from "../../../utils";
 4 
import { axios } from "../../../utils";
7 
import { addNotification } from "../../../redux/notification/notification.actions";
 5 
import { addNotification } from "../../../redux/notification/notification.actions";
8 
import Spinner from "../../../shared/loading-spinner/Spinner";
 6 
import Spinner from "../../../shared/loading-spinner/Spinner";
9 
import Entity from "./entity/Entity";
 - 
 
10 
import Profile from "../../../components/Profile";
 7 
import Profile from "../../../components/Profile";
11 
import SearchList from "../../../components/SearchList";
 8 
import SearchList from "../../../components/SearchList";
- 
 
 9 
import PaginationComponent from "../../../shared/pagination/PaginationComponent";
Línea 12... Línea 10...
12 
 
 10 
 
13 
const StyledSpinnerContainer = styled.div`
 - 
 
14 
  position: absolute;
 - 
 
15 
  left: 0;
 - 
 
16 
  top: 0;
 - 
 
17 
  width: 100%;
 - 
 
18 
  height: 100%;
 11 
const MyConnections = () => {
19 
  background: rgba(255, 255, 255, 0.4);
 - 
 
20 
  display: flex;
 12 
  const [myConnections, setMyConnections] = useState([])
21 
  justify-content: center;
 - 
 
22 
  align-items: center;
 - 
 
23 
  z-index: 300;
 - 
 
24 
`;
 - 
 
25 
 
 13 
  const [currentPage, setCurrentPage] = useState(1)
26 
const MyConnections = (props) => {
 - 
 
27 
  // states
 14 
  const [search, setSearch] = useState('')
28 
  const [myConnections, setMyConnections] = useState([]);
 15 
  const [pages, setPages] = useState(1)
Línea 29... Línea 16...
29 
  const [loading, setLoading] = useState(true);
 16 
  const [loading, setLoading] = useState(true)
30 
 
 17 
 
- 
 
 18 
  useEffect(() => {
- 
 
 19 
    fetchMyConnections({
- 
 
 20 
      params: {
- 
 
 21 
        search: search,
31 
  useEffect(() => {
 22 
        page: currentPage,
- 
 
 23 
      }
Línea 32... Línea 24...
32 
    fetchMyConnections();
 24 
    })
33 
  }, []);
 25 
  }, [currentPage, search]);
34 
 
 26 
 
35 
  const fetchMyConnections = async (searchParam = '') => {
 - 
 
36 
    setLoading(true);
 27 
  const fetchMyConnections = async ({ params = {} }) => {
37 
    await axios
 28 
    setLoading(true);
- 
 
 29 
    await axios
38 
      .get(
 30 
      .get('/connection/my-connections', { params: params })
39 
        "/connection/my-connections?search=" + searchParam)
 31 
      .then(({ data: response }) => {
40 
      .then((response) => {
 32 
        if (response.success) {
41 
        const resData = response.data;
 33 
          setMyConnections(response.data.current.items)
42 
        if (resData.success) {
 34 
          setCurrentPage(response.data.current.page)
43 
          setMyConnections(resData.data);
 35 
          setPages(response.data.total.pages)
44 
        }
 36 
        }
Línea -... Línea 37...
- 
 
 37 
      });
- 
 
 38 
    setLoading(false);
45 
      });
 39 
  };
46 
    setLoading(false);
 40 
 
47 
  };
 41 
  const handleChangePage = (newPage) => setCurrentPage(newPage)
48 
 
 42 
 
49 
  return (
 43 
  return (
50 
    <section className="companies-info">
 44 
    <section className="companies-info">
51 
      <div className="container">
 45 
      <div className="container">
52 
        <SearchList
 - 
 
53 
          title="Personas con Relación directa, de 1er nivel"
 - 
 
54 
          fetchCallback={fetchMyConnections}
 - 
 
55 
        />
 46 
        <SearchList
56 
        <div
 - 
 
57 
          className="companies-list"
 47 
          title="Personas con Relación directa, de 1er nivel"
58 
          id="profiles-container"
 48 
          fetchCallback={(value) => setSearch(value)}
59 
          style={{ position: "relative", padding: "0 15px" }}
 - 
 
60 
        >
 - 
 
61 
          {myConnections.length > 0 ? (
 49 
        />
62 
            myConnections.map(
 50 
        <div className="companies-list" style={{ position: "relative", padding: "0 15px" }}>
63 
              (
 51 
          {myConnections.length
64 
                {
 52 
            ? myConnections.map(({
65 
                  image,
 53 
              image,
66 
                  name,
 54 
              name,
67 
                  link_view,
 - 
 
68 
                  link_inmail,
 - 
 
69 
                  link_cancel,
 55 
              link_view,
70 
                  link_block,
 56 
              link_inmail,
71 
                },
 57 
              link_cancel,
72 
                id
 58 
              link_block,
73 
              ) => (
 59 
            }, id) =>
74 
                <Profile
 60 
              <Profile
75 
                  isTopData
 61 
                isTopData
76 
                  key={id}
 62 
                key={id}
77 
                  image={image}
 63 
                image={image}
78 
                  name={name}
 64 
                name={name}
79 
                  link_inmail={link_inmail}
 65 
                link_inmail={link_inmail}
80 
                  link_view={link_view}
 66 
                link_view={link_view}
81 
                  link_cancel={link_cancel}
 - 
 
82 
                  link_block={link_block}
 67 
                link_cancel={link_cancel}
83 
                  fetchCallback={fetchMyConnections}
 - 
 
84 
                />
 68 
                link_block={link_block}
85 
              )
 69 
                fetchCallback={fetchMyConnections}
86 
            )
 - 
 
87 
          ) : (
 - 
 
88 
            <p>No hay resultados</p>
 70 
              />
89 
          )}
 - 
 
90 
          {loading && (
 - 
 
91 
            <StyledSpinnerContainer>
 71 
            )
- 
 
 72 
            : <p>No hay resultados</p>
- 
 
 73 
          }
- 
 
 74 
          {loading && <Spinner />}
- 
 
 75 
        </div>
- 
 
 76 
        <PaginationComponent
- 
 
 77 
          onChangePage={handleChangePage}
92 
              <Spinner />
 78 
          pages={pages}
93 
            </StyledSpinnerContainer>
 79 
          currentActivePage={currentPage}
94 
          )}
 80 
          isRow={true}
95 
        </div>
 81 
        />
96 
      </div>
 - 
 
97 
    </section>
 - 
 
Línea 98... Línea 82...
98 
  );
 82 
      </div>
99 
};
 83 
    </section>
100 
 
 84 
  )
Línea 101... Línea 85...
101 
// const mapStateToProps = (state) => ({});
 85 
}
102 
 
 86