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 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">

          {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_CONECTION}

        acceptLabel={labels.ACCEPT}

      />

    </>

  )

}

export default ProfileInfo