Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'

import { axios } from '../utils'

import { addNotification } from '../redux/notification/notification.actions'

import { useDispatch, useSelector } from 'react-redux'

import { Facebook, Instagram, Twitter } from '@mui/icons-material'

import ConfirmModal from '../../shared/confirm-modal/ConfirmModal'

import SocialNetworks from '../../shared/social-networks/SocialNetwors'

import { Link } from 'react-router-dom'

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