Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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