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 { api } from "@api";

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 = () => {

    api.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(({ data: response }) => {

      const { data, success } = response;

      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;