Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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