Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from "react";

import { addNotification } from "../redux/notification/notification.actions";

import ConfirmationBox from "../shared/confirmation-box/ConfirmationBox";

import Spinner from "../shared/loading-spinner/Spinner";

import { axios } from "../utils";

import styled from 'styled-components'

const StyledSpinnerContainer = styled.div`

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: rgba(255, 255, 255, 0.4);

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 300;

`;

const Profile = (props) => {

  // props destructuring

  const {

    image,

    name,

    status,

    link_view,

    link_edit,

    link_delete,

    link_cancel,

    link_block,

    link_reject,

    link_approve,

    link_inmail,

    link_request,

    link_unblock,

    link_admin,

    fetchCallback

  } = props;

  // states

  const [showConfirmationBox, setShowConfirmationBox] = useState(false);

  const [showCancelConfirmationBox, setShowCancelConfirmationBox] = useState(false);

  const [showBlockConfirmationBox, setShowBlockConfirmationBox] = useState(false);

  const [showRejectConfirmationBox, setShowRejectConfirmationBox] = useState(false);

  const [showApproveConfirmationBox, setShowApproveConfirmationBox] = useState(false);

  const [showRequestConfirmationBox, setShowRequestConfirmationBox] = useState(false);

  const [showUnblockConfirmationBox, setShowUnblockConfirmationBox] = useState(false);

  const [loading, setLoading] = useState(false)

  const handleShowConfirmationBox = (show = !showConfirmationBox) => {

    setShowConfirmationBox(show);

  };

  const handleCancelConfirmationBox = (show = !showConfirmationBox) => {

    setShowCancelConfirmationBox(show);

  };

  const handleBlockConfirmationBox = (show = !showConfirmationBox) => {

    setShowBlockConfirmationBox(show);

  };

  const handleRejectConfirmationBox = (show = !showConfirmationBox) => {

    setShowRejectConfirmationBox(show);

  };

  const handleApproveConfirmationBox = (show = !showConfirmationBox) => {

    setShowApproveConfirmationBox(show);

  };

  const handleRequestConfirmationBox = (show = !showConfirmationBox) => {

    setShowRequestConfirmationBox(show);

  };

  const handleUnblockConfirmationBox = (show = !showConfirmationBox) => {

    setShowUnblockConfirmationBox(show);

  };

  const handleCancelApply = (url = link_delete) => {

    setLoading(true);

    axios

      .post(url)

      .then((response) => {

        const resData = response.data;

         (resData);

        if (resData.success) {

          const msg = resData.data;

          addNotification({

            style: "success",

            msg: msg,

          });

          if(fetchCallback)

            fetchCallback();

        } else {

          const errorMsg =

            typeof resData.data === "string"

              ? resData.data

              : "Ha ocurrido un error, Por favor intente más tarde";

          addNotification({

            style: "danger",

            msg: errorMsg,

          });

          setLoading(false);

        }

      })

      .catch((error) => {

        console.log('>>: error > ', error)

      })

      .finally(() => {

        setLoading(false);

      });

  };

  const getManageUrl = async () => {

    try {

      const res = await axios.get(link_admin)

      if(res.data.success){

        window.open(res.data.data, '_backend')

      }

    } catch (error) {

      console.log('>>: error > ', error)

    }

  }

  return (

    <div className="col-md-3 col-sm-6 col-12">

      <div className="company_profile_info border-radius border-gray">

        <div className="company-up-info border-radius">

          <div className="ph-15">

            <div

              className="row border-bottom-gray mb-2"

            >

              {

                !!image && (

                  <div className="col-md-4 col-sm-12 p-0">

                    <img src={image} className="object-fit-contain" style={{borderRadius: 0}} alt="" />

                  </div>

                )

              }

              <div className={image ? 'col-md-8 d-flex justify-content-center align-items-center' : 'col-md-12 '+ ' col-sm-12 col-12'}>

                <h3 className={status ? '' : "col-sm-12 d-flex justify-content-center align-items-center"}>

                  {name}

                  {

                    status && (

                      <>

                        <br />

                        <h4 className="col-sm-12 d-flex justify-content-center align-items-center">{status}</h4>

                      </>

                    )

                  }

                </h3>

              </div>

            </div>

          </div>

          <ul>

            {

              link_view && (

                <li>

                  <a

                    href={link_view}

                    data-link={link_view}

                    title=""

                    className="btn btn-primary"

                  >

                    Ver perfil

                  </a>

                </li>

              )

            }

            {

              link_edit && (

                <li>

                  <a

                    href={link_edit}

                    data-link={link_edit}

                    title=""

                    className="btn btn-secondary"

                  >

                    Editar perfil

                  </a>

                </li>

              )

            }

            {

              link_approve && (

                <li>

                  <a

                    href="#"

                    className="btn btn-tertiary"

                    onClick={(e) => {

                      e.preventDefault();

                      handleApproveConfirmationBox();

                    }}

                  >

                    Aprobar

                  </a>

                </li>

              )

            }

            {

              link_reject && (

                <li>

                  <a

                    href="#"

                    className="btn btn-tertiary"

                    onClick={(e) => {

                      e.preventDefault();

                      handleRejectConfirmationBox();

                    }}

                  >

                    Rechazar

                  </a>

                </li>

              )

            }

            {

              link_delete && (

                <li>

                  <a

                    href="#"

                    className="btn btn-tertiary"

                    onClick={(e) => {

                      e.preventDefault();

                      handleShowConfirmationBox();

                    }}

                  >

                    Borrar perfil

                  </a>

                </li>

              )

            }

            {

              link_inmail && (

                <li>

                  <a

                    href={link_inmail}

                    data-link={link_inmail}

                    title=""

                    className="btn btn-tertiary"

                  >

                    Mensaje

                  </a>

                </li>

              )

            }

            {

              link_admin && (

                <li>

                  <a

                    onClick={() => getManageUrl()}

                    data-link={link_admin}

                    title="Administrar empresa"

                    className="btn btn-tertiary"

                  >

                    Administrar

                  </a>

                </li>

              )

            }

            {

              link_block && (

                <li>

                  <a

                    href="#"

                    className="btn btn-secondary"

                    onClick={(e) => {

                      e.preventDefault();

                      handleBlockConfirmationBox();

                    }}

                  >

                    Bloquear

                  </a>

                </li>

              )

            }

            {

              link_unblock && (

                <li>

                  <a

                    href="#"

                    className="btn btn-secondary"

                    onClick={(e) => {

                      e.preventDefault();

                      handleUnblockConfirmationBox();

                    }}

                  >

                    Desbloquear

                  </a>

                </li>

              )

            }

            {

              link_request && (

                <li>

                  <a

                    href="#"

                    className="btn btn-secondary"

                    onClick={(e) => {

                      e.preventDefault();

                      handleRequestConfirmationBox();

                    }}

                  >

                    Conectar

                  </a>

                </li>

              )

            }

            {

              link_cancel && (

                <li>

                  <a

                    href="#"

                    className="btn btn-primary"

                    onClick={(e) => {

                      e.preventDefault();

                      handleCancelConfirmationBox();

                    }}

                  >

                    Cancelar

                  </a>

                </li>

              )

            }

          </ul>

        </div>

        {link_delete && (

          <div style={{ position: "relative" }}>

            <ConfirmationBox

              show={showConfirmationBox}

              onClose={() => handleShowConfirmationBox(false)}

              onAccept={() => handleCancelApply(link_delete)}

            />

          </div>

        )}

        {link_cancel && (

          <div style={{ position: "relative" }}>

            <ConfirmationBox

              show={showCancelConfirmationBox}

              onClose={() => handleCancelConfirmationBox(false)}

              onAccept={() => handleCancelApply(link_cancel)}

            />

          </div>

        )}

        {link_block && (

          <div style={{ position: "relative" }}>

            <ConfirmationBox

              show={showBlockConfirmationBox}

              onClose={() => handleBlockConfirmationBox(false)}

              onAccept={() => handleCancelApply(link_block)}

            />

          </div>

        )}

        {link_approve && (

          <div style={{ position: "relative" }}>

            <ConfirmationBox

              show={showApproveConfirmationBox}

              onClose={() => handleApproveConfirmationBox(false)}

              onAccept={() => handleCancelApply(link_approve)}

            />

          </div>

        )}

        {link_reject && (

          <div style={{ position: "relative" }}>

            <ConfirmationBox

              show={showRejectConfirmationBox}

              onClose={() => handleRejectConfirmationBox(false)}

              onAccept={() => handleCancelApply(link_reject)}

            />

          </div>

        )}

        {link_request && (

          <div style={{ position: "relative" }}>

            <ConfirmationBox

              show={showRequestConfirmationBox}

              onClose={() => handleRequestConfirmationBox(false)}

              onAccept={() => handleCancelApply(link_request)}

            />

          </div>

        )}

        {link_unblock && (

          <div style={{ position: "relative" }}>

            <ConfirmationBox

              show={showUnblockConfirmationBox}

              onClose={() => handleUnblockConfirmationBox(false)}

              onAccept={() => handleCancelApply(link_unblock)}

            />

          </div>

        )}

        {loading && (

          <StyledSpinnerContainer>

            <Spinner />

          </StyledSpinnerContainer>

        )}

      </div>

    </div>

  );

};

export default Profile;