Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1101 | Rev 1158 | 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";
1102 stevensc 5 
import { axios } from "../../../utils";
1 www 6 
import { addNotification } from "../../../redux/notification/notification.actions";
7 
import Spinner from "../../../shared/loading-spinner/Spinner";
8 
import RequestTemplate from './invitationTemplate/InvitationTemplate'
9 
 
10 
const InvitationsReceived = (props) => {
11 
  // states
12 
  const [invitations, setInvitations] = useState([]);
13 
  const [loading, setLoading] = useState(true);
14 
 
15 
  // redux destructuring
16 
  const { addNotification } = props;
17 
 
18 
  // React hook form
19 
  const { register, getValues } = useForm();
20 
 
21 
  let axiosThrottle = null;
22 
 
23 
  useEffect(() => {
24 
    fetchInvitationsReceived();
25 
    return () => {
26 
      clearTimeout(axiosThrottle);
27 
    };
28 
  }, []);
29 
 
1102 stevensc 30 
  const fetchInvitationsReceived = async (searchParam = '') => {
1 www 31 
    setLoading(true);
32 
    await axios
33 
      .get(
1102 stevensc 34 
        "/group/invitations-received?search=" + searchParam)
1 www 35 
      .then((response) => {
36 
        const resData = response.data;
1102 stevensc 37 
        (resData);
1 www 38 
        if (resData.success) {
39 
          setInvitations(resData.data);
40 
        }
41 
      });
42 
    setLoading(false);
43 
  };
44 
 
45 
  const handleResponse = (link) => {
46 
    setLoading(true);
1102 stevensc 47 
    axios.post(link)
48 
      .then((response) => {
49 
        const resData = response.data;
50 
        if (resData.success) {
51 
          addNotification({
52 
            style: "success",
53 
            msg: resData.data,
54 
          });
55 
          fetchInvitationsReceived();
56 
        } else {
57 
          setLoading(false);
58 
          addNotification({
59 
            style: "danger",
60 
            msg: resData.data ?? "ha ocurrido un error",
61 
          });
62 
        }
63 
      });
1 www 64 
  };
65 
 
66 
  const handleSearch = () => {
67 
    //  (getValues());
68 
    clearTimeout(axiosThrottle);
69 
    // setLoading(true);
70 
    const searchValue = getValues("search");
71 
    axiosThrottle = setTimeout(() => {
72 
      fetchInvitationsReceived(searchValue);
73 
    }, 500);
74 
  };
75 
 
76 
  return (
77 
    <section className="companies-info" style={{ position: "relative" }}>
78 
      <div className="container">
79 
        <div className="company-title">
80 
          <div className="section_admin_title_buttons">
81 
            <div style={{ float: "left" }}>
82 
              <h1 className="title">Invitaciones Recibidas</h1>
83 
            </div>
84 
          </div>
85 
        </div>
86 
 
87 
        <div className="company-title">
88 
          <div className="section_admin_title_buttons">
89 
            <div className="form-group">
90 
              <input
91 
                type="text"
92 
                name="search"
93 
                id="search"
94 
                className="form-control"
95 
                placeholder="Buscar"
96 
                ref={register}
97 
                onChange={handleSearch}
98 
              />
99 
            </div>
100 
          </div>
101 
        </div>
102 
        <div
103 
          className="companies-list"
104 
          style={{
105 
            padding: "0 15px",
106 
          }}
107 
        >
108 
          <div className="row" id="profiles-container">
109 
            {invitations.length > 0 ? (
110 
              invitations.map((invitation, index) => (
111 
                <RequestTemplate
112 
                  invitation={invitation}
113 
                  onResponse={handleResponse}
114 
                  key={index}
115 
                />
116 
              ))
117 
            ) : (
118 
              <p>No hay resultados</p>
119 
            )}
120 
          </div>
121 
          {/* <!--product-feed-tab end--> */}
122 
        </div>
123 
      </div>
124 
      {loading && (
125 
        <div className="spinner-container">
126 
          <Spinner />
127 
        </div>
128 
      )}
129 
    </section>
130 
  );
131 
};
132 
 
133 
const mapDispatchToProps = {
134 
  addNotification: (notification) => addNotification(notification),
135 
};
136 
 
137 
export default connect(null, mapDispatchToProps)(InvitationsReceived);