Proyectos de Subversion LeadersLinked - SPA

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

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;