Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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