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;