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'

const ProfileInfo = ({
  id,
  image,
  following,
  facebook,
  twitter,
  instagram,
  showContact,
  fullName,
  linkInmail,
  connectUrl,
  cancelUrl,
}) => {
  const [isAdded, setIsAdded] = useState(!connectUrl)
  const [connectionUrl, setConnectionUrl] = useState(connectUrl || cancelUrl)
  const [showConfirmModal, setShowConfirmModal] = useState(false)

  const dispatch = useDispatch()
  const labels = useSelector((state) => state.labels)

  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">
          <a href={facebook} target="_blank" rel="noreferrer">
            <Facebook />
          </a>
          <a href={twitter} target="_blank" rel="noreferrer">
            <Twitter />
          </a>
          <a href={instagram} target="_blank" rel="noreferrer">
            <Instagram />
          </a>
        </div>
        <span>
          <b>{following}</b>
          <br />
          Seguidores
        </span>
        <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>
      </div>
      <ConfirmModal
        show={showConfirmModal}
        onClose={toggleConfirmationModal}
        onAccept={connect}
        title={labels.TITLE_CONFIRM_CONECTION}
        acceptLabel={labels.ACCEPT}
      />
    </>
  )
}

export default ProfileInfo