Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1518 | 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 AppliedJob from "./applied-job/AppliedJob";
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 AppliedJobs = (props) => {
25 
  // states
26 
  const [appliedJobs, setAppliedJobs] = useState([]);
27 
  const [loading, setLoading] = useState(true);
28 
 
29 
  // redux destructuring
30 
  const { addNotification } = props;
31 
 
32 
  // React hook form
33 
  const { register, getValues } = useForm();
34 
 
35 
  let axiosThrottle = null;
36 
 
37 
  useEffect(() => {
38 
    fetchAppliedJobs();
39 
    return () => {
40 
      clearTimeout(axiosThrottle);
41 
    };
42 
  }, []);
43 
 
44 
  const handleCancelApply = (cancelLink) => {
45 
    setLoading(true);
46 
    axios
47 
      .post(cancelLink)
48 
      .then((response) => {
49 
        const resData = response.data;
50 
         (resData);
51 
        if (resData.success) {
52 
          const msg = resData.data;
53 
          addNotification({
54 
            style: "success",
55 
            msg: msg,
56 
          });
57 
          fetchAppliedJobs();
58 
        } else {
59 
          const errorMsg =
60 
            typeof resData.data === "string"
61 
              ? resData.data
62 
              : "Ha ocurrido un error, Por favor intente más tarde";
63 
          addNotification({
64 
            style: "danger",
65 
            msg: errorMsg,
66 
          });
67 
          setLoading(false);
68 
        }
69 
      })
70 
      .catch((error) => {
71 
         (error);
72 
        setLoading(false);
73 
      });
74 
  };
75 
 
76 
  const fetchAppliedJobs = async (searchParam='') => {
77 
    setLoading(true);
78 
    await axios
79 
      .get(
80 
        "/job/applied-jobs?search="+searchParam)
81 
      .then((response) => {
82 
        const resData = response.data;
83 
        if (resData.success) {
84 
          setAppliedJobs(resData.data);
85 
        }
86 
      });
87 
    setLoading(false);
88 
  };
89 
 
90 
  const handleSearch = () => {
91 
    //  (getValues());
92 
    clearTimeout(axiosThrottle);
93 
    // setLoading(true);
94 
    const searchValue = getValues("search");
95 
    axiosThrottle = setTimeout(() => {
96 
      fetchAppliedJobs(searchValue);
97 
    }, 500);
98 
  };
99 
 
100 
  return (
101 
    <section className="companies-info" style={{ position: "relative" }}>
102 
      <div className="container">
103 
        <div className="company-title">
104 
          <div className="section_admin_title_buttons">
105 
            <div style={{ float: "left" }}>
106 
              <h1 className="title">Que he aplicado</h1>
107 
            </div>
108 
          </div>
109 
        </div>
110 
 
111 
        <div className="company-title">
112 
          <div className="section_admin_title_buttons">
113 
            <div className="form-group">
114 
              <input
115 
                type="text"
116 
                name="search"
117 
                id="search"
118 
                className="form-control"
119 
                placeholder="Buscar"
120 
                ref={register}
121 
                onChange={handleSearch}
122 
              />
123 
            </div>
124 
          </div>
125 
        </div>
126 
        <div
127 
          className="companies-list"
128 
          style={{
129 
            padding: "0 15px",
130 
          }}
131 
        >
132 
          <div className="row" id="profiles-container">
133 
            {appliedJobs.length > 0 ? (
134 
              appliedJobs.map(
135 
                (
136 
                  {
137 
                    title,
138 
                    employment_type,
139 
                    last_date_of_application,
140 
                    link_view,
141 
                    link_remove,
142 
                  },
143 
                  index
144 
                ) => (
145 
                  <AppliedJob
146 
                    title={title}
147 
                    employment_type={employment_type}
148 
                    last_date_of_application={last_date_of_application}
149 
                    link_view={link_view}
150 
                    link_remove={link_remove}
151 
                    onCancelApply={handleCancelApply}
152 
                    key={index}
153 
                  />
154 
                )
155 
              )
156 
            ) : (
157 
              <p>No hay resultados</p>
158 
            )}
159 
          </div>
160 
          {/* <!--product-feed-tab end--> */}
161 
        </div>
162 
      </div>
163 
      {loading && (
164 
        <StyledSpinnerContainer>
165 
          <Spinner />
166 
        </StyledSpinnerContainer>
167 
      )}
168 
    </section>
169 
  );
170 
};
171 
 
172 
// const mapStateToProps = (state) => ({});
173 
 
174 
const mapDispatchToProps = {
175 
  addNotification: (notification) => addNotification(notification),
176 
};
177 
 
178 
export default connect(null, mapDispatchToProps)(AppliedJobs);