Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1570 | Rev 1572 | 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";
1571 steven 11 
import Profile from "../../../components/Profile";
1 www 12 
 
13 
const StyledSpinnerContainer = styled.div`
14 
  position: absolute;
15 
  left: 0;
16 
  top: 0;
17 
  width: 100%;
18 
  height: 100%;
19 
  background: rgba(255, 255, 255, 0.4);
20 
  display: flex;
21 
  justify-content: center;
22 
  align-items: center;
23 
  z-index: 300;
24 
`;
25 
 
26 
const InvitationsSent = (props) => {
27 
  // states
28 
  const [sentInvitations, setSentInvitations] = useState([]);
29 
  const [loading, setLoading] = useState(false);
30 
 
31 
  // Redux
32 
  const { addNotification } = props;
33 
 
34 
  // React hook form
35 
  const { register, getValues } = useForm();
36 
 
37 
  let axiosThrottle = null;
38 
 
39 
  const handleCancel = (link) => {
40 
    setLoading(true);
41 
    axios
42 
      .post(link)
43 
      .then((response) => {
44 
        const resData = response.data;
45 
         (resData);
46 
        if (resData.success) {
47 
          const msg = resData.data;
48 
          addNotification({
49 
            style: "success",
50 
            msg: msg,
51 
          });
52 
          fetchInvitations();
53 
        } else {
54 
          setLoading(false);
55 
        }
56 
      })
57 
      .catch((error) => {
58 
        setLoading(false);
59 
      });
60 
  };
61 
 
62 
  useEffect(() => {
63 
    fetchInvitations();
64 
  }, []);
65 
 
66 
  const fetchInvitations = async (searchValue='') => {
67 
    setLoading(true);
68 
    await axios
69 
      .get("/connection/invitations-sent?search="+searchValue)
70 
      .then((response) => {
71 
        const resData = response.data;
72 
        if (resData.success) {
73 
          setSentInvitations(resData.data);
74 
        }
75 
      });
76 
    setLoading(false);
77 
  };
78 
 
79 
  const handleSearch = () => {
80 
    //  (getValues());
81 
    clearTimeout(axiosThrottle);
82 
    // setLoading(true);
83 
    const searchValue = getValues("search");
84 
    axiosThrottle = setTimeout(() => {
85 
      fetchInvitations(searchValue);
86 
    }, 500);
87 
  };
88 
 
89 
  return (
90 
    <section className="companies-info">
91 
      <div className="container">
1570 steven 92 
        <SearchList
93 
          title="Invitaciones Enviadas"
94 
          fetchCallback={handleSearch}
95 
        />
1571 steven 96 
 
1 www 97 
        <div className="companies-list">
98 
          <div
99 
            className="row"
100 
            id="profiles-container"
101 
            style={{
102 
              position: "relative",
103 
              padding: "0 15px",
104 
            }}
105 
          >
106 
            {sentInvitations.length > 0 ? (
107 
              sentInvitations.map(
108 
                ({ name, image, link_delete, link_view }, id) => (
1571 steven 109 
                  <Profile
1 www 110 
                    image={image}
111 
                    name={name}
112 
                    link_delete={link_delete}
1571 steven 113 
                    link_view={link_view}
1 www 114 
                    key={id}
1571 steven 115 
                    fetchCallback={handleCancel}
1 www 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);