Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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