Proyectos de Subversion LeadersLinked - Antes de SPA

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

import { Modal } from 'react-bootstrap'

import { axios } from '../../../utils'

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

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

import parse from 'html-react-parser'

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

import ImageModal from '../../modals/ImageModal'

import CoverModal from '../../cover/CoverModal'

import OverviewModal from '../../overview/OverviewModal'

import ConfirmModal from '../../modals/ConfirmModal'

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

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,

  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(window.location.href)

      const { link_request, link_cancel } = response

      if (link_request) {

        setConnectionUrl(link_request)

        return

      }

      setConnectionUrl(link_cancel)

    } catch (err) {

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

    }

  }

  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(!RequestConnectionUrl)

    setSettedOverview(overview)

    setProfileImg(image)

    setCoverImg(cover)

    if (RequestConnectionUrl && CancelConnectionUrl) {

      setConnectionUrl('')

    } else {

      setConnectionUrl(RequestConnectionUrl || CancelConnectionUrl)

    }

  }, [RequestConnectionUrl, CancelConnectionUrl, overview, image, cover])

  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.replaceAll('h1', 'p'))}

              <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

                    className="cursor-auto"

                    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 show={show} onHide={closeModal}>

      <Modal.Header closeButton>

        <h2>{labels.about_group}</h2>

      </Modal.Header>

      <Modal.Body>

        <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.Body>

    </Modal>

  )

}

ProfileCard.Modal = InfoModal

export default ProfileCard