Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1594 | Rev 2113 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1587 steven 1 
import React, { useState } from "react";
2 
import { addNotification } from "../redux/notification/notification.actions";
3 
import ConfirmationBox from "../shared/confirmation-box/ConfirmationBox";
4 
import Spinner from "../shared/loading-spinner/Spinner";
5 
import { axios } from "../utils";
6 
import styled from 'styled-components'
7 
 
8 
const StyledSpinnerContainer = styled.div`
9 
  position: absolute;
10 
  left: 0;
11 
  top: 0;
12 
  width: 100%;
13 
  height: 100%;
14 
  background: rgba(255, 255, 255, 0.4);
15 
  display: flex;
16 
  justify-content: center;
17 
  align-items: center;
18 
  z-index: 300;
19 
`;
20 
const Profile = (props) => {
21 
  // props destructuring
22 
  const {
23 
    image,
24 
    name,
25 
    status,
26 
    link_view,
27 
    link_edit,
28 
    link_delete,
29 
    link_cancel,
30 
    link_block,
31 
    link_reject,
32 
    link_approve,
33 
    link_inmail,
34 
    link_request,
35 
    link_unblock,
1588 steven 36 
    link_unfollow,
1592 steven 37 
    link_leave,
1587 steven 38 
    link_admin,
39 
    fetchCallback
40 
  } = props;
41 
 
42 
  // states
43 
  const [showConfirmationBox, setShowConfirmationBox] = useState(false);
44 
  const [showCancelConfirmationBox, setShowCancelConfirmationBox] = useState(false);
45 
  const [showBlockConfirmationBox, setShowBlockConfirmationBox] = useState(false);
46 
  const [showRejectConfirmationBox, setShowRejectConfirmationBox] = useState(false);
47 
  const [showApproveConfirmationBox, setShowApproveConfirmationBox] = useState(false);
48 
  const [showRequestConfirmationBox, setShowRequestConfirmationBox] = useState(false);
49 
  const [showUnblockConfirmationBox, setShowUnblockConfirmationBox] = useState(false);
1592 steven 50 
  const [showLeaveConfirmationBox, setShowLeaveConfirmationBox] = useState(false);
1587 steven 51 
 
52 
  const [loading, setLoading] = useState(false)
53 
  const handleShowConfirmationBox = (show = !showConfirmationBox) => {
54 
    setShowConfirmationBox(show);
55 
  };
56 
  const handleCancelConfirmationBox = (show = !showConfirmationBox) => {
57 
    setShowCancelConfirmationBox(show);
58 
  };
59 
  const handleBlockConfirmationBox = (show = !showConfirmationBox) => {
60 
    setShowBlockConfirmationBox(show);
61 
  };
62 
  const handleRejectConfirmationBox = (show = !showConfirmationBox) => {
63 
    setShowRejectConfirmationBox(show);
64 
  };
65 
  const handleApproveConfirmationBox = (show = !showConfirmationBox) => {
66 
    setShowApproveConfirmationBox(show);
67 
  };
68 
  const handleRequestConfirmationBox = (show = !showConfirmationBox) => {
69 
    setShowRequestConfirmationBox(show);
70 
  };
71 
  const handleUnblockConfirmationBox = (show = !showConfirmationBox) => {
72 
    setShowUnblockConfirmationBox(show);
73 
  };
1592 steven 74 
  const handleLeaveConfirmationBox = (show = !showConfirmationBox) => {
75 
    setShowLeaveConfirmationBox(show);
76 
  };
1587 steven 77 
 
78 
  const handleCancelApply = (url = link_delete) => {
79 
    setLoading(true);
80 
    axios
81 
      .post(url)
82 
      .then((response) => {
83 
        const resData = response.data;
84 
         (resData);
85 
        if (resData.success) {
86 
          const msg = resData.data;
87 
          addNotification({
88 
            style: "success",
89 
            msg: msg,
90 
          });
91 
          if(fetchCallback)
92 
            fetchCallback();
93 
        } else {
94 
          const errorMsg =
95 
            typeof resData.data === "string"
96 
              ? resData.data
97 
              : "Ha ocurrido un error, Por favor intente más tarde";
98 
          addNotification({
99 
            style: "danger",
100 
            msg: errorMsg,
101 
          });
102 
          setLoading(false);
103 
        }
104 
      })
105 
      .catch((error) => {
106 
        console.log('>>: error > ', error)
107 
      })
108 
      .finally(() => {
109 
        setLoading(false);
110 
      });
111 
  };
112 
 
1588 steven 113 
  const handleUnfollow = async (link_unfollow) => {
114 
    setLoading(true);
115 
    await axios.post(link_unfollow).then((response) => {
116 
      const resData = response.data;
117 
      if (resData.success) {
118 
        fetchCallback()
119 
      } else {
120 
        if (resError.constructor.name !== "Object") {
121 
          addNotification({
122 
            style: "danger",
123 
            msg: resData.data,
124 
          });
125 
        }
126 
      }
127 
    });
128 
    setLoading(false);
129 
  };
130 
 
1587 steven 131 
  const getManageUrl = async () => {
132 
    try {
133 
      const res = await axios.get(link_admin)
134 
      if(res.data.success){
135 
        window.open(res.data.data, '_backend')
136 
      }
137 
    } catch (error) {
138 
      console.log('>>: error > ', error)
139 
    }
140 
  }
141 
 
142 
  return (
2112 steven 143 
    <div className="col-md-4 col-sm-6 col-12">
1587 steven 144 
      <div className="company_profile_info border-radius border-gray">
145 
        <div className="company-up-info border-radius">
146 
          <div className="ph-15">
147 
            <div
148 
              className="row border-bottom-gray mb-2"
149 
            >
150 
              {
151 
                !!image && (
152 
                  <div className="col-md-4 col-sm-12 p-0">
153 
                    <img src={image} className="object-fit-contain" style={{borderRadius: 0}} alt="" />
154 
                  </div>
155 
                )
156 
              }
157 
              <div className={image ? 'col-md-8 d-flex justify-content-center align-items-center' : 'col-md-12 '+ ' col-sm-12 col-12'}>
158 
                <h3 className={status ? '' : "col-sm-12 d-flex justify-content-center align-items-center"}>
159 
                  {name}
160 
                  {
161 
                    status && (
162 
                      <>
163 
                        <br />
164 
                        <h4 className="col-sm-12 d-flex justify-content-center align-items-center">{status}</h4>
165 
                      </>
166 
                    )
167 
                  }
168 
                </h3>
169 
              </div>
170 
            </div>
171 
          </div>
172 
 
173 
          <ul>
174 
            {
175 
              link_view && (
176 
                <li>
177 
                  <a
178 
                    href={link_view}
179 
                    data-link={link_view}
180 
                    title=""
181 
                    className="btn btn-primary"
182 
                  >
183 
                    Ver perfil
184 
                  </a>
185 
                </li>
186 
              )
187 
            }
188 
            {
189 
              link_edit && (
190 
                <li>
191 
                  <a
192 
                    href={link_edit}
193 
                    data-link={link_edit}
194 
                    title=""
195 
                    className="btn btn-secondary"
196 
                  >
197 
                    Editar perfil
198 
                  </a>
199 
                </li>
200 
              )
201 
            }
202 
            {
203 
              link_approve && (
204 
                <li>
205 
                  <a
206 
                    href="#"
207 
                    className="btn btn-tertiary"
208 
                    onClick={(e) => {
209 
                      e.preventDefault();
210 
                      handleApproveConfirmationBox();
211 
                    }}
212 
                  >
213 
                    Aprobar
214 
                  </a>
215 
                </li>
216 
              )
217 
            }
218 
            {
219 
              link_reject && (
220 
                <li>
221 
                  <a
222 
                    href="#"
223 
                    className="btn btn-tertiary"
224 
                    onClick={(e) => {
225 
                      e.preventDefault();
226 
                      handleRejectConfirmationBox();
227 
                    }}
228 
                  >
229 
                    Rechazar
230 
                  </a>
231 
                </li>
232 
              )
233 
            }
234 
            {
235 
              link_delete && (
236 
                <li>
237 
                  <a
238 
                    href="#"
239 
                    className="btn btn-tertiary"
240 
                    onClick={(e) => {
241 
                      e.preventDefault();
242 
                      handleShowConfirmationBox();
243 
                    }}
244 
                  >
245 
                    Borrar perfil
246 
                  </a>
247 
                </li>
248 
              )
249 
            }
250 
            {
251 
              link_inmail && (
252 
                <li>
253 
                  <a
254 
                    href={link_inmail}
255 
                    data-link={link_inmail}
256 
                    title=""
257 
                    className="btn btn-tertiary"
258 
                  >
259 
                    Mensaje
260 
                  </a>
261 
                </li>
262 
              )
263 
            }
264 
            {
265 
              link_admin && (
266 
                <li>
267 
                  <a
268 
                    onClick={() => getManageUrl()}
269 
                    data-link={link_admin}
270 
                    title="Administrar empresa"
271 
                    className="btn btn-tertiary"
272 
                  >
273 
                    Administrar
274 
                  </a>
275 
                </li>
276 
              )
277 
            }
1588 steven 278 
            {
279 
              link_unfollow && (
280 
                <li>
281 
                  <a
282 
                    onClick={() => handleUnfollow(link_unfollow)}
283 
                    data-link={link_unfollow}
284 
                    title="Administrar empresa"
285 
                    className="btn btn-tertiary"
286 
                  >
287 
                    Dejar de seguir
288 
                  </a>
289 
                </li>
290 
              )
291 
            }
1587 steven 292 
 
293 
            {
294 
              link_block && (
295 
                <li>
296 
                  <a
297 
                    href="#"
298 
                    className="btn btn-secondary"
299 
                    onClick={(e) => {
300 
                      e.preventDefault();
301 
                      handleBlockConfirmationBox();
302 
                    }}
303 
                  >
304 
                    Bloquear
305 
                  </a>
306 
                </li>
307 
              )
308 
            }
309 
            {
310 
              link_unblock && (
311 
                <li>
312 
                  <a
313 
                    href="#"
314 
                    className="btn btn-secondary"
315 
                    onClick={(e) => {
316 
                      e.preventDefault();
317 
                      handleUnblockConfirmationBox();
318 
                    }}
319 
                  >
320 
                    Desbloquear
321 
                  </a>
322 
                </li>
323 
              )
324 
            }
325 
            {
326 
              link_request && (
327 
                <li>
328 
                  <a
329 
                    href="#"
330 
                    className="btn btn-secondary"
331 
                    onClick={(e) => {
332 
                      e.preventDefault();
333 
                      handleRequestConfirmationBox();
334 
                    }}
335 
                  >
336 
                    Conectar
337 
                  </a>
338 
                </li>
339 
              )
340 
            }
341 
            {
342 
              link_cancel && (
343 
                <li>
344 
                  <a
345 
                    href="#"
346 
                    className="btn btn-primary"
347 
                    onClick={(e) => {
348 
                      e.preventDefault();
349 
                      handleCancelConfirmationBox();
350 
                    }}
351 
                  >
352 
                    Cancelar
353 
                  </a>
354 
                </li>
355 
              )
356 
            }
1592 steven 357 
            {
358 
              link_leave && (
359 
                <li>
360 
                  <a
361 
                    href="#"
362 
                    className="btn btn-primary"
363 
                    onClick={(e) => {
364 
                      e.preventDefault();
1594 steven 365 
                      handleLeaveConfirmationBox();
1592 steven 366 
                    }}
367 
                  >
368 
                    Abandonar
369 
                  </a>
370 
                </li>
371 
              )
372 
            }
1587 steven 373 
 
374 
          </ul>
375 
        </div>
376 
        {link_delete && (
377 
          <div style={{ position: "relative" }}>
378 
            <ConfirmationBox
379 
              show={showConfirmationBox}
380 
              onClose={() => handleShowConfirmationBox(false)}
381 
              onAccept={() => handleCancelApply(link_delete)}
382 
            />
383 
          </div>
384 
        )}
385 
        {link_cancel && (
386 
          <div style={{ position: "relative" }}>
387 
            <ConfirmationBox
388 
              show={showCancelConfirmationBox}
389 
              onClose={() => handleCancelConfirmationBox(false)}
390 
              onAccept={() => handleCancelApply(link_cancel)}
391 
            />
392 
          </div>
393 
        )}
394 
        {link_block && (
395 
          <div style={{ position: "relative" }}>
396 
            <ConfirmationBox
397 
              show={showBlockConfirmationBox}
398 
              onClose={() => handleBlockConfirmationBox(false)}
399 
              onAccept={() => handleCancelApply(link_block)}
400 
            />
401 
          </div>
402 
        )}
403 
        {link_approve && (
404 
          <div style={{ position: "relative" }}>
405 
            <ConfirmationBox
406 
              show={showApproveConfirmationBox}
407 
              onClose={() => handleApproveConfirmationBox(false)}
408 
              onAccept={() => handleCancelApply(link_approve)}
409 
            />
410 
          </div>
411 
        )}
412 
        {link_reject && (
413 
          <div style={{ position: "relative" }}>
414 
            <ConfirmationBox
415 
              show={showRejectConfirmationBox}
416 
              onClose={() => handleRejectConfirmationBox(false)}
417 
              onAccept={() => handleCancelApply(link_reject)}
418 
            />
419 
          </div>
420 
        )}
421 
        {link_request && (
422 
          <div style={{ position: "relative" }}>
423 
            <ConfirmationBox
424 
              show={showRequestConfirmationBox}
425 
              onClose={() => handleRequestConfirmationBox(false)}
426 
              onAccept={() => handleCancelApply(link_request)}
427 
            />
428 
          </div>
429 
        )}
430 
        {link_unblock && (
431 
          <div style={{ position: "relative" }}>
432 
            <ConfirmationBox
433 
              show={showUnblockConfirmationBox}
434 
              onClose={() => handleUnblockConfirmationBox(false)}
435 
              onAccept={() => handleCancelApply(link_unblock)}
436 
            />
437 
          </div>
438 
        )}
1592 steven 439 
        {link_leave && (
440 
          <div style={{ position: "relative" }}>
441 
            <ConfirmationBox
442 
              show={showLeaveConfirmationBox}
443 
              onClose={() => handleLeaveConfirmationBox(false)}
444 
              onAccept={() => handleCancelApply(link_leave)}
445 
            />
446 
          </div>
447 
        )}
1587 steven 448 
        {loading && (
449 
          <StyledSpinnerContainer>
450 
            <Spinner />
451 
          </StyledSpinnerContainer>
452 
        )}
453 
      </div>
454 
    </div>
455 
  );
456 
};
457 
 
458 
export default Profile;