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