Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1570 | Ir a la última revisión | | 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";
10 
 
11 
const StyledSpinnerContainer = styled.div`
12 
  position: absolute;
13 
  left: 0;
14 
  top: 0;
15 
  width: 100%;
16 
  height: 100%;
17 
  background: rgba(255, 255, 255, 0.4);
18 
  display: flex;
19 
  justify-content: center;
20 
  align-items: center;
21 
  z-index: 300;
22 
`;
23 
 
24 
const InvitationsSent = (props) => {
25 
  // states
26 
  const [sentInvitations, setSentInvitations] = useState([]);
27 
  const [loading, setLoading] = useState(false);
28 
 
29 
  // Redux
30 
  const { addNotification } = props;
31 
 
32 
  // React hook form
33 
  const { register, getValues } = useForm();
34 
 
35 
  let axiosThrottle = null;
36 
 
37 
  const handleCancel = (link) => {
38 
     ("handlecancel called");
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">
91 
        <div className="company-title">
92 
          <div className="section_admin_title_buttons">
93 
            <div style={{ float: "left" }}>
94 
              <h1 className="title">Invitaciones Enviadas</h1>
95 
            </div>
96 
          </div>
97 
        </div>
98 
 
99 
        <div className="company-title">
100 
          <div className="section_admin_title_buttons">
101 
            <form
102 
              name="form-connection-search"
103 
              id="form-connection-search"
104 
              onSubmit={(event) => event.preventDefault()}
105 
            >
106 
              <div className="form-group">
107 
                <input
108 
                  type="text"
109 
                  name="search"
110 
                  id="search"
111 
                  className="form-control"
112 
                  placeholder="Buscar"
113 
                  ref={register}
114 
                  onChange={handleSearch}
115 
                />
116 
              </div>
117 
            </form>
118 
          </div>
119 
        </div>
120 
 
121 
        <div className="companies-list">
122 
          <div
123 
            className="row"
124 
            id="profiles-container"
125 
            style={{
126 
              position: "relative",
127 
              padding: "0 15px",
128 
            }}
129 
          >
130 
            {sentInvitations.length > 0 ? (
131 
              sentInvitations.map(
132 
                ({ name, image, link_delete, link_view }, id) => (
133 
                  <Invitation
134 
                    image={image}
135 
                    name={name}
136 
                    link_delete={link_delete}
137 
                    key={id}
138 
                    id={id}
139 
                    link_view={link_view}
140 
                    handleCancel={handleCancel}
141 
                  />
142 
                )
143 
              )
144 
            ) : (
145 
              <p>No hay resultados</p>
146 
            )}
147 
            {loading ? (
148 
              <StyledSpinnerContainer>
149 
                <Spinner />
150 
              </StyledSpinnerContainer>
151 
            ) : (
152 
              ""
153 
            )}
154 
          </div>
155 
          {/* <!--product-feed-tab end--> */}
156 
        </div>
157 
      </div>
158 
    </section>
159 
  );
160 
};
161 
 
162 
const mapDispatchToProps = {
163 
  addNotification: (notification) => addNotification(notification),
164 
};
165 
 
166 
export default connect(null, mapDispatchToProps)(InvitationsSent);