Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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