Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useEffect } from 'react'

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

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

import parse from 'html-react-parser'

import EditIcon from '@mui/icons-material/EditOutlined'

import { axios } from 'utils/index'

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

import Modal from 'components/UI/modal/Modal'

import ConfirmModal from 'components/modals/ConfirmModal'

import ImageModal from 'components/modals/ImageModal'

import CoverModal from 'components/cover/CoverModal'

import OverviewModal from 'components/overview/OverviewModal'

const ProfileCard = ({

  full_name: fullName = '',

  overview = '',

  formatted_address: formattedAddress = '',

  total_connections: totalConnections,

  show_contact: showContact = false,

  experiences = [],

  link_inmail: linkInmail = '',

  link_cancel: CancelConnectionUrl = '',

  link_request: RequestConnectionUrl = '',

  image = '',

  cover = '',

  user_profile_uuid: profileId,

  request_connection,

  follower,

  following,

  facebook,

  twitter,

  instagram,

  sizes,

  view_following,

  view_total_connections

}) => {

  const [isAdded, setIsAdded] = useState(false)

  const [connectionUrl, setConnectionUrl] = useState('')

  const [modalToShow, setModalToShow] = useState(null)

  const [settedOverview, setSettedOverview] = useState('')

  const [profileImg, setProfileImg] = useState('')

  const [coverImg, setCoverImg] = useState('')

  const [isModalShow, setIsModalShow] = useState(false)

  const [isEdit, setIsEdit] = useState(false)

  const labels = useSelector(({ intl }) => intl.labels)

  const { pathname } = useLocation()

  const dispatch = useDispatch()

  const displayModal = () => {

    setIsModalShow(!isModalShow)

  }

  const getProfileData = async () => {

    try {

      const { data: response } = await axios.get(pathname)

      const { link_request, link_cancel } = response

      if (link_request) {

        setConnectionUrl(link_request)

        return

      }

      setConnectionUrl(link_cancel)

    } catch (err) {

      dispatch(addNotification({ style: 'danger', msg: err.message }))

    }

  }

  const connect = async () => {

    try {

      const { data: response } = await axios.post(connectionUrl)

      const { data, success } = response

      if (!success) {

        return dispatch(addNotification({ style: 'danger', msg: data }))

      }

      if (success && isModalShow) {

        displayModal()

      }

      await getProfileData()

      dispatch(addNotification({ style: 'success', msg: data }))

      setIsAdded(!isAdded)

    } catch (error) {

      dispatch(addNotification({ style: 'danger', msg: `Error: ${error}` }))

    }

  }

  const closeModal = () => {

    setModalToShow(null)

  }

  useEffect(() => {

    setIsAdded(!request_connection)

    setSettedOverview(overview)

    setProfileImg(image)

    setCoverImg(cover)

  }, [request_connection, overview, image, cover])

  useEffect(() => {

    RequestConnectionUrl

      ? setConnectionUrl(RequestConnectionUrl)

      : setConnectionUrl(CancelConnectionUrl)

  }, [RequestConnectionUrl, CancelConnectionUrl])

  useEffect(() => {

    setIsEdit(pathname.includes('edit'))

  }, [pathname])

  return (

    <>

      <section className='profile__user-card'>

        <div className='cover__image-container'>

          <img alt='Background Image' src={coverImg} />

          {isEdit && (

            <button

              className='button-icon cover__edit-btn'

              onClick={() => setModalToShow('cover')}

            >

              <EditIcon />

            </button>

          )}

        </div>

        <section className='px-4 pb-4'>

          <div className='card__image-options'>

            <img

              alt='Profile Image'

              className={`img ${isEdit && 'cursor-pointer'}`}

              src={profileImg}

              onClick={() => isEdit && setModalToShow('image')}

            />

            {isEdit && (

              <button

                className='button-icon'

                onClick={() => setModalToShow('overview')}

              >

                <EditIcon />

              </button>

            )}

          </div>

          <div className='card-content'>

            <div className='card-info'>

              <h1>{fullName}</h1>

              {settedOverview && parse(settedOverview)}

              <div

                className='d-inline-flex align-items-center mt-2'

                style={{ gap: '1rem' }}

              >

                <span>{formattedAddress}</span>

                <Link

                  onClick={(e) => {

                    e.preventDefault()

                    setModalToShow('info')

                  }}

                >

                  {labels.personal_info}

                </Link>

              </div>

              <div

                className='d-inline-flex align-items-center mt-2'

                style={{ gap: '1rem' }}

              >

                {Boolean(totalConnections) && view_total_connections && (

                  <Link to='/connection/my-connections'>

                    {`${totalConnections} ${labels.connections}`}

                  </Link>

                )}

                {Boolean(follower) && view_following && (

                  <Link onClick={(e) => e.preventDefault()}>

                    {`${follower} ${labels.followers}`}

                  </Link>

                )}

                {Boolean(following) && view_following && (

                  <Link to='/company/following-companies'>

                    {`${following} ${labels.following}`}

                  </Link>

                )}

              </div>

              <div className='button-actions mt-2'>

                {connectionUrl && isAdded && (

                  <button

                    className='btn button btn-primary'

                    onClick={() => displayModal()}

                  >

                    {labels.cancel}

                  </button>

                )}

                {connectionUrl && !isAdded && (

                  <button className='btn button btn-primary' onClick={connect}>

                    {labels.connect}

                  </button>

                )}

                {showContact && (

                  <Link to={linkInmail} className='btn button btn-secondary'>

                    {labels.message}

                  </Link>

                )}

              </div>

            </div>

            <div className='card-experiences'>

              <ul>

                {experiences.map(

                  ({ company, title, industry, size }, index) => (

                    <li key={index}>

                      <span>{`${company} - ${title}`}</span>

                      <p>{`${industry} / ${size}`}</p>

                    </li>

                  )

                )}

              </ul>

            </div>

          </div>

        </section>

      </section>

      {isEdit && (

        <>

          <OverviewModal

            isOpen={modalToShow === 'overview'}

            overview={settedOverview}

            id={profileId}

            closeModal={() => closeModal()}

            onComplete={(newOverview) => setSettedOverview(newOverview)}

          />

          <CoverModal

            isOpen={modalToShow === 'cover'}

            sizes={sizes?.cover}

            onClose={() => closeModal()}

            onComplete={(newImage) => setCoverImg(newImage)}

          />

          <ImageModal

            show={modalToShow === 'image'}

            id={profileId}

            sizes={sizes?.image}

            onClose={() => closeModal()}

            onComplete={(newImage) => setProfileImg(newImage)}

          />

        </>

      )}

      <ProfileCard.Modal

        show={modalToShow === 'info'}

        closeModal={() => closeModal()}

        fullName={fullName}

        facebook={facebook}

        twitter={twitter}

        instagram={instagram}

        following={following}

        formatted_address={formattedAddress}

        overview={overview}

        total_connections={totalConnections}

        follower={follower}

      />

      <ConfirmModal

        show={isModalShow}

        onClose={() => setIsModalShow(false)}

        onAccept={() => connect()}

      />

    </>

  )

}

const InfoModal = ({

  show,

  closeModal,

  facebook,

  following,

  formatted_address,

  fullName,

  instagram,

  overview,

  total_connections,

  twitter,

  follower

}) => {

  const labels = useSelector(({ intl }) => intl.labels)

  return (

    <Modal title={labels.personal_info} show={show} onClose={closeModal}>

      <div className='description__label'>

        <label htmlFor='name'>{labels.first_name}</label>

        <p>{fullName}</p>

      </div>

      {overview && (

        <div className='description__label'>

          <label htmlFor='name'>{labels.description}</label>

          {overview && parse(overview)}

        </div>

      )}

      {formatted_address && (

        <div className='description__label'>

          <label htmlFor='name'>{labels.location}</label>

          <p>{formatted_address}</p>

        </div>

      )}

      {total_connections && (

        <div className='description__label'>

          <label htmlFor='name'>{labels.connections}</label>

          <p>{total_connections}</p>

        </div>

      )}

      {follower && (

        <div className='description__label'>

          <label htmlFor='name'>{labels.followers}</label>

          <p>{follower}</p>

        </div>

      )}

      {following && (

        <div className='description__label'>

          <label htmlFor='name'>{labels.following}</label>

          <p>{following}</p>

        </div>

      )}

      <div className='description__label'>

        <label htmlFor='name'>{labels.social_networks}</label>

        {facebook && (

          <a href={facebook} target='_blank' rel='noreferrer'>

            <p className='mb-1'>{facebook}</p>

          </a>

        )}

        {instagram && (

          <a href={instagram} target='_blank' rel='noreferrer'>

            <p className='mb-1'>{instagram}</p>

          </a>

        )}

        {twitter && (

          <a href={twitter} target='_blank' rel='noreferrer'>

            <p className='mb-1'>{twitter}</p>

          </a>

        )}

      </div>

    </Modal>

  )

}

ProfileCard.Modal = InfoModal

export default ProfileCard