Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1 | Rev 1571 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import React from "react";
2 
import { useEffect, useState } from "react";
3 
import { connect } from "react-redux";
4 
import { useForm } from "react-hook-form";
5 
import styled from "styled-components";
6 
import {axios} from "../../../utils";
7 
import { addNotification } from "../../../redux/notification/notification.actions";
8 
import Spinner from "../../../shared/loading-spinner/Spinner";
9 
import Invitation from "./invitation/Invitation";
1570 steven 10 
import SearchList from "../../../components/SearchList";
1 www 11 
 
12 
const StyledSpinnerContainer = styled.div`
13 
  position: absolute;
14 
  left: 0;
15 
  top: 0;
16 
  width: 100%;
17 
  height: 100%;
18 
  background: rgba(255, 255, 255, 0.4);
19 
  display: flex;
20 
  justify-content: center;
21 
  align-items: center;
22 
  z-index: 300;
23 
`;
24 
 
25 
const InvitationsSent = (props) => {
26 
  // states
27 
  const [sentInvitations, setSentInvitations] = useState([]);
28 
  const [loading, setLoading] = useState(false);
29 
 
30 
  // Redux
31 
  const { addNotification } = props;
32 
 
33 
  // React hook form
34 
  const { register, getValues } = useForm();
35 
 
36 
  let axiosThrottle = null;
37 
 
38 
  const handleCancel = (link) => {
39 
    setLoading(true);
40 
    axios
41 
      .post(link)
42 
      .then((response) => {
43 
        const resData = response.data;
44 
         (resData);
45 
        if (resData.success) {
46 
          const msg = resData.data;
47 
          addNotification({
48 
            style: "success",
49 
            msg: msg,
50 
          });
51 
          fetchInvitations();
52 
        } else {
53 
          setLoading(false);
54 
        }
55 
      })
56 
      .catch((error) => {
57 
        setLoading(false);
58 
      });
59 
  };
60 
 
61 
  useEffect(() => {
62 
    fetchInvitations();
63 
  }, []);
64 
 
65 
  const fetchInvitations = async (searchValue='') => {
66 
    setLoading(true);
67 
    await axios
68 
      .get("/connection/invitations-sent?search="+searchValue)
69 
      .then((response) => {
70 
        const resData = response.data;
71 
        if (resData.success) {
72 
          setSentInvitations(resData.data);
73 
        }
74 
      });
75 
    setLoading(false);
76 
  };
77 
 
78 
  const handleSearch = () => {
79 
    //  (getValues());
80 
    clearTimeout(axiosThrottle);
81 
    // setLoading(true);
82 
    const searchValue = getValues("search");
83 
    axiosThrottle = setTimeout(() => {
84 
      fetchInvitations(searchValue);
85 
    }, 500);
86 
  };
87 
 
88 
  return (
89 
    <section className="companies-info">
90 
      <div className="container">
1570 steven 91 
        <SearchList
92 
          title="Invitaciones Enviadas"
93 
          fetchCallback={handleSearch}
94 
        />
95 
 
1 www 96 
        <div className="companies-list">
97 
          <div
98 
            className="row"
99 
            id="profiles-container"
100 
            style={{
101 
              position: "relative",
102 
              padding: "0 15px",
103 
            }}
104 
          >
105 
            {sentInvitations.length > 0 ? (
106 
              sentInvitations.map(
107 
                ({ name, image, link_delete, link_view }, id) => (
108 
                  <Invitation
109 
                    image={image}
110 
                    name={name}
111 
                    link_delete={link_delete}
112 
                    key={id}
113 
                    id={id}
114 
                    link_view={link_view}
115 
                    handleCancel={handleCancel}
116 
                  />
117 
                )
118 
              )
119 
            ) : (
120 
              <p>No hay resultados</p>
121 
            )}
122 
            {loading ? (
123 
              <StyledSpinnerContainer>
124 
                <Spinner />
125 
              </StyledSpinnerContainer>
126 
            ) : (
127 
              ""
128 
            )}
129 
          </div>
130 
          {/* <!--product-feed-tab end--> */}
131 
        </div>
132 
      </div>
133 
    </section>
134 
  );
135 
};
136 
 
137 
const mapDispatchToProps = {
138 
  addNotification: (notification) => addNotification(notification),
139 
};
140 
 
141 
export default connect(null, mapDispatchToProps)(InvitationsSent);