Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
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,
    email,
    network,
    status,
    link_view,
    link_edit,
    link_delete,
    link_cancel,
    link_block,
    link_reject,
    link_accept,
    link_inmail,
    link_request,
    link_unblock,
    link_unfollow,
    link_approve,
    link_leave,
    link_admin,
    link_impersonate,
    fetchCallback,
    isTopData = false,
    btnAcceptTitle = 'Ver perfil',
    btnCancelTitle = 'Borrar perfil',
    btnEditTitle = 'Editar perfil'
  } = props;

  const getImpersonateUrl = async (url = '') => {
    try {
      const { data } = await axios.get(url)
      if (data.success) window.location.href = data.data;
    } catch (error) {
      console.log('>>: error > ', error)
    }
  }

  // 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 [showLeaveConfirmationBox, setShowLeaveConfirmationBox] = 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 handleLeaveConfirmationBox = (show = !showConfirmationBox) => {
    setShowLeaveConfirmationBox(show);
  };

  const handleCancelApply = (url = link_delete) => {
    setLoading(true);
    axios.post(url)
      .then(({ data }) => {
        if (!data.success) {
          const errorMsg =
            typeof data.data === "string"
              ? data.data
              : "Ha ocurrido un error, Por favor intente más tarde";
          addNotification({
            style: "danger",
            msg: errorMsg,
          });
        }
        const msg = data.data;
        addNotification({
          style: "success",
          msg: msg,
        });
        if (fetchCallback) fetchCallback();
      })
      .catch((error) => console.log('>>: error > ', error))
      .finally(() => setLoading(false))
  };

  const handleUnfollow = async (link_unfollow) => {
    setLoading(true);
    await axios.post(link_unfollow)
      .then(({ data }) => {
        if (data.success) fetchCallback()

        typeof data.data === 'string' &&
          addNotification({
            style: "danger",
            msg: data.data
          })
      })
    setLoading(false);
  };

  const getManageUrl = async () => {
    try {
      const { data } = await axios.get(link_admin)
      if (data.success) window.open(data.data, '_backend')
    } catch (error) {
      console.log('>>: error > ', error)
    }
  }

  return (
    <div className='profile_info'>
      <div className={`${image ? 'd-flex' : 'd-block'} position-relative`}>
        {!!image &&
          <div className='profile_info_header_imgContainer'>
            <img src={image} className="object-fit-contain" style={{ maxHeight: '100px' }} alt="group image" />
          </div>
        }
        <div
          className={`${image ? 'col-8 d-flex flex-column align-items-start' : 'col-12'} ${isTopData ? 'justify-content-end' : 'justify-content-center'}`}>
          <h3 className={`${status ? '' : "w-100 text-left"} ${isTopData ? 'mb-2' : ''} w-100`}>
            {name}
          </h3>
          {(isTopData && email) &&
            <h4 className={`${status ? '' : "w-100 text-left"} ${isTopData ? 'mb-2' : ''} w-100`}>
              {email}
            </h4>
          }
          {network &&
            <h4 className={`${status ? '' : "w-100 text-left"} ${isTopData ? 'mb-2' : ''} w-100`}>
              {network}
            </h4>
          }
          {
            isTopData
            &&
            <ul>
              {link_view &&
                <li>
                  <a
                    href={link_view}
                    data-link={link_view}
                    className="btn btn-secondary ellipsis"
                  >
                    {btnAcceptTitle}
                  </a>
                </li>
              }
              {link_inmail &&
                <li>
                  <a
                    href={link_inmail}
                    data-link={link_inmail}
                    className="btn btn-primary"
                  >
                    Mensaje
                  </a>
                </li>
              }
            </ul>
          }
        </div>
        {status &&
          <h4 className={`col-sm-12 d-flex justify-content-center align-items-center ${!image ? 'position-relative' : ''}`}>
            {status}
          </h4>
        }
      </div>
      <hr />
      <ul>
        {
          link_view && !isTopData && (
            <li>
              <a
                href={link_view}
                data-link={link_view}
                title=""
                className="btn btn-secondary"
              >
                {btnAcceptTitle}
              </a>
            </li>
          )
        }
        {
          link_edit && (
            <li>
              <a
                href={link_edit}
                data-link={link_edit}
                title=""
                className="btn btn-tertiary"
              >
                {btnEditTitle}
              </a>
            </li>
          )
        }
        {
          link_approve
          &&
          <li>
            <a
              href="#"
              className="btn btn-tertiary"
              onClick={(e) => {
                e.preventDefault();
                handleApproveConfirmationBox();
              }}
            >
              Aprobar
            </a>
          </li>
        }
        {
          link_accept
          &&
          <li>
            <a
              href="#"
              className="btn btn-tertiary"
              onClick={(e) => {
                e.preventDefault();
                handleApproveConfirmationBox();
              }}
            >
              Aceptar
            </a>
          </li>
        }
        {
          link_reject &&
          <li>
            <a
              href="#"
              className="btn btn-primary"
              onClick={(e) => {
                e.preventDefault();
                handleRejectConfirmationBox();
              }}
            >
              Rechazar
            </a>
          </li>
        }
        {
          link_delete &&
          <li>
            <a
              href="#"
              className="btn btn-primary"
              onClick={(e) => {
                e.preventDefault();
                handleShowConfirmationBox();
              }}
            >
              {btnCancelTitle}
            </a>
          </li>
        }
        {
          link_inmail && !isTopData
          &&
          <li>
            <a
              href={link_inmail}
              data-link={link_inmail}
              title=""
              className="btn btn-primary"
            >
              Mensaje
            </a>
          </li>
        }
        {
          link_admin &&
          <li>
            <a
              onClick={() => getManageUrl()}
              data-link={link_admin}
              title="Administrar empresa"
              className="btn btn-primary"
            >
              Administrar
            </a>
          </li>
        }
        {
          link_unfollow
          &&
          <li>
            <a
              onClick={() => handleUnfollow(link_unfollow)}
              data-link={link_unfollow}
              title="Administrar empresa"
              className="btn btn-primary"
            >
              Dejar de seguir
            </a>
          </li>
        }

        {
          link_block &&
          <li>
            <a
              href="#"
              className="btn btn-primary"
              onClick={(e) => {
                e.preventDefault();
                handleBlockConfirmationBox();
              }}
            >
              Bloquear
            </a>
          </li>
        }
        {
          link_unblock && (
            <li>
              <a
                href="#"
                className="btn btn-tertiary"
                onClick={(e) => {
                  e.preventDefault();
                  handleUnblockConfirmationBox();
                }}
              >
                Desbloquear
              </a>
            </li>
          )
        }
        {
          link_request
          &&
          <li>
            <a
              href="#"
              className="btn btn-tertiary"
              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>
        }
        {
          link_leave &&
          <li>
            <a
              href="#"
              className="btn btn-tertiary"
              onClick={(e) => {
                e.preventDefault();
                handleLeaveConfirmationBox();
              }}
            >
              Abandonar
            </a>
          </li>
        }
      </ul>
      {
        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_accept && (
          <div style={{ position: "relative" }}>
            <ConfirmationBox
              show={showApproveConfirmationBox}
              onClose={() => handleApproveConfirmationBox(false)}
              onAccept={() => handleCancelApply(link_accept)}
            />
          </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>
        )
      }
      {
        link_leave && (
          <div style={{ position: "relative" }}>
            <ConfirmationBox
              show={showLeaveConfirmationBox}
              onClose={() => handleLeaveConfirmationBox(false)}
              onAccept={() => handleCancelApply(link_leave)}
            />
          </div>
        )
      }
      {
        link_impersonate
        &&
        <li>
          <a
            href="#" onClick={() => getImpersonateUrl(link_impersonate)} > Personificar </a>
        </li>
      }
      {
        loading &&
        <StyledSpinnerContainer>
          <Spinner />
        </StyledSpinnerContainer>
      }
    </div >
  );
};

export default Profile;