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'
import styles from './Profile.module.scss'

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_unfollow,
    link_leave,
    link_admin,
    fetchCallback,
    isTopData = false
  } = 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 [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((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 handleUnfollow = async (link_unfollow) => {
    setLoading(true);
    await axios.post(link_unfollow).then((response) => {
      const resData = response.data;
      if (resData.success) {
        fetchCallback()
      } else {
        if (resError.constructor.name !== "Object") {
          addNotification({
            style: "danger",
            msg: resData.data,
          });
        }
      }
    });
    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-4 col-sm-6 col-12">
      <div className={styles.profile_info}>
        <div className={styles.profile_info_header}>
          {
            !!image && (
              <div className={styles.profile_info_header_imgContainer}>
                <img src={image} className="object-fit-contain" style={{ borderRadius: 0 }} alt="" />
              </div>
            )
          }
          <div className={image ? 'col-md-8 d-flex justify-content-start 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" + ' w-100'}>
              {name}
            </h3>
            {
              status
              &&
              <h4 className="col-sm-12 d-flex justify-content-center align-items-center">
                {status}
              </h4>
            }
            {
              isTopData
              &&
              <>
                <div className="col-6 list-style-none">
                  {
                    link_view
                    &&
                    <li>
                      <a
                        href={link_view}
                        data-link={link_view}
                        className="btn btn-secondary ellipsis"
                      >
                        Ver perfil
                      </a>
                    </li>
                  }
                </div>
                <div className="col-6 list-style-none">
                  {
                    link_inmail
                    &&
                    <li>
                      <a
                        href={link_inmail}
                        data-link={link_inmail}
                        className="btn btn-primary"
                      >
                        Mensaje
                      </a>
                    </li>
                  }
                </div>
              </>
            }
          </div>
        </div>
        <hr />
        <ul>
          {
            link_view && !isTopData && (
              <li>
                <a
                  href={link_view}
                  data-link={link_view}
                  title=""
                  className="btn btn-secondary"
                >
                  Ver perfil
                </a>
              </li>
            )
          }
          {
            link_edit && (
              <li>
                <a
                  href={link_edit}
                  data-link={link_edit}
                  title=""
                  className="btn btn-tertiary"
                >
                  Editar perfil
                </a>
              </li>
            )
          }
          {
            link_approve && (
              <li>
                <a
                  href="#"
                  className="btn btn-primary"
                  onClick={(e) => {
                    e.preventDefault();
                    handleApproveConfirmationBox();
                  }}
                >
                  Aprobar
                </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();
                  }}
                >
                  Borrar perfil
                </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-tertiary"
                  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-secondary"
                  onClick={(e) => {
                    e.preventDefault();
                    handleCancelConfirmationBox();
                  }}
                >
                  Cancelar
                </a>
              </li>
            )
          }
          {
            link_leave && (
              <li>
                <a
                  href="#"
                  className="btn btn-secondary"
                  onClick={(e) => {
                    e.preventDefault();
                    handleLeaveConfirmationBox();
                  }}
                >
                  Abandonar
                </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>
        )
      }
      {
        link_leave && (
          <div style={{ position: "relative" }}>
            <ConfirmationBox
              show={showLeaveConfirmationBox}
              onClose={() => handleLeaveConfirmationBox(false)}
              onAccept={() => handleCancelApply(link_leave)}
            />
          </div>
        )
      }
      {
        loading && (
          <StyledSpinnerContainer>
            <Spinner />
          </StyledSpinnerContainer>
        )
      }
    </div >
  );
};

export default Profile;