Proyectos de Subversion LeadersLinked - Antes de 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'

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={`/storage/type/user-profile/code/${id}/${
            image ? `filename/${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>
              <a href={linkInmail} className="btn btn-tertiary">
                {labels.message}
              </a>
            </>
          )}
        </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