Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { Facebook, Instagram, Twitter } from "@mui/icons-material";

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

import ConfirmModal from "../../shared/confirm-modal/ConfirmModal";
import SocialNetworks from "../../shared/social-networks/SocialNetwors";

const ProfileInfo = ({
  id,
  image,
  following,
  follower,
  facebook,
  twitter,
  instagram,
  showContact,
  fullName,
  linkInmail,
  connectUrl,
  cancelUrl,
  isEdit,
}) => {
  const [isAdded, setIsAdded] = useState(!connectUrl);
  const [connectionUrl, setConnectionUrl] = useState(connectUrl || cancelUrl);
  const [showConfirmModal, setShowConfirmModal] = useState(false);
  const labels = useSelector(({ intl }) => intl.labels);
  const dispatch = useDispatch();

  const getProfile = () => {
    axios.get(window.location.href).then(({ data }) => {
      if (data.link_request) {
        return setConnectionUrl(data.link_request);
      }

      return setConnectionUrl(data.link_cancel);
    });
  };

  const connect = () => {
    axios.post(connectionUrl).then((response) => {
      const { data, success } = response.data;
      if (!success) {
        dispatch(addNotification({ style: "danger", msg: data }));
        return;
      }
      dispatch(addNotification({ style: "success", msg: data }));
      getProfile();
      setIsAdded(!isAdded);
    });
  };

  const toggleConfirmationModal = () => {
    setShowConfirmModal(!showConfirmModal);
  };

  return (
    <>
      <div className="profile-info">
        <img id="user-profile-img" src={image} alt="profile-image" />
        <h3>{fullName}</h3>
        <div className="row">
          {facebook && (
            <a href={facebook} target="_blank" rel="noreferrer">
              <Facebook />
            </a>
          )}
          {twitter && (
            <a href={twitter} target="_blank" rel="noreferrer">
              <Twitter />
            </a>
          )}
          {instagram && (
            <a href={instagram} target="_blank" rel="noreferrer">
              <Instagram />
            </a>
          )}
        </div>
        <div className="row">
          {following && (
            <span>
              <b>{following}</b>
              <br />
              Siguiendo
            </span>
          )}
          {follower && (
            <span>
              <b>{follower}</b>
              <br />
              Seguidores
            </span>
          )}
        </div>
        <div className="row ">
          {showContact && (
            <>
              <button
                className={`btn btn-${isAdded ? "secondary" : "primary"}`}
                onClick={() =>
                  isAdded ? toggleConfirmationModal() : connect()
                }
              >
                {isAdded ? labels.cancel : labels.add}
              </button>
              <Link to={linkInmail} className="btn btn-tertiary">
                {labels.message}
              </Link>
            </>
          )}
        </div>
        {isEdit && (
          <SocialNetworks
            type="profile"
            profileId={id}
            facebook={facebook}
            instagram={instagram}
            twitter={twitter}
          />
        )}
      </div>
      <ConfirmModal
        show={showConfirmModal}
        onClose={toggleConfirmationModal}
        onAccept={connect}
        title={labels.title_confirm_connection}
        acceptLabel={labels.accept}
      />
    </>
  );
};

export default ProfileInfo;