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 { Avatar, IconButton } from '@mui/material'
import EditIcon from '@mui/icons-material/EditOutlined'
import parse from 'html-react-parser'

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 OverviewModal from 'components/overview/OverviewModal'
import Cover from '../UI/cover/Cover'
import WidgetWrapper from '../widgets/WidgetLayout'

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 [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)
  }, [request_connection, overview, image])

  useEffect(() => {
    RequestConnectionUrl
      ? setConnectionUrl(RequestConnectionUrl)
      : setConnectionUrl(CancelConnectionUrl)
  }, [RequestConnectionUrl, CancelConnectionUrl])

  useEffect(() => {
    setIsEdit(pathname.includes('edit'))
  }, [pathname])

  return (
    <>
      <WidgetWrapper>
        <Cover
          cover={cover}
          sizes={sizes?.cover}
          edit={isEdit}
          editUrl={`/profile/my-profiles/cover/${profileId}/operation/upload`}
        />
        <section className='px-4 pb-4'>
          <div className='card__image-options'>
            <Avatar
              src={profileImg}
              alt={fullName}
              sx={{
                width: { xs: '100px', lg: '150px' },
                height: { xs: '100px', lg: '150px' },
                mt: { xs: '-50px', lg: '-75px' },
                border: '4px solid #fff',
                backgroundColor: '#c9ced4',
                cursor: isEdit ? 'pointer' : 'default'
              }}
              onClick={() => isEdit && setModalToShow('image')}
            />
            {isEdit && (
              <IconButton onClick={() => setModalToShow('overview')}>
                <EditIcon />
              </IconButton>
            )}
          </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>
      </WidgetWrapper>

      {isEdit && (
        <>
          <OverviewModal
            isOpen={modalToShow === 'overview'}
            overview={settedOverview}
            id={profileId}
            closeModal={() => closeModal()}
            onComplete={(newOverview) => setSettedOverview(newOverview)}
          />
          <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>
          {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