Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'

import parse from 'html-react-parser'

import { Modal } from 'react-bootstrap'

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

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

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

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'

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_id: profileId,

  follower,

  following,

  facebook,

  twitter,

  instagram,

  sizes,

  view_following,

  view_total_connections,

}) => {

  const [isAdded, setIsAdded] = useState(!RequestConnectionUrl)

  const [connectionUrl, setConnectionUrl] = useState(

    RequestConnectionUrl || CancelConnectionUrl

  )

  const [isModalShow, setIsModalShow] = useState(false)

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

  const dispatch = useDispatch()

  const PATH = window.location.pathname

  // modals state

  const [modalToShow, setModalToShow] = useState(null)

  const [settedOverview, setSettedOverview] = useState(overview)

  const [profileImg, setProfileImg] = useState(image)

  const [coverImg, setCoverImg] = useState(cover)

  const displayModal = () => setIsModalShow(!isModalShow)

  const getProfileData = async () => {

    try {

      const { data: response } = await axios.get(window.location.href)

      if (response.link_request) {

        return setConnectionUrl(response.link_request)

      }

      return setConnectionUrl(response.link_cancel)

    } catch (error) {

      console.log(error)

      return dispatch(

        addNotification({ style: 'danger', msg: 'Ha ocurrido un error' })

      )

    }

  }

  const connect = async () => {

    try {

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

      if (!response.success) {

        return dispatch(

          addNotification({ style: 'danger', msg: response.data })

        )

      }

      if (response.success && isModalShow) {

        displayModal()

      }

      await getProfileData()

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

      setIsAdded(!isAdded)

    } catch (error) {

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

    }

  }

  const closeModal = () => setModalToShow(null)

  return (

    <>

      <section className="profile__user-card">

        <div className="cover__image-container">

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

          {PATH.includes('edit') && (

            <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 ${PATH.includes('edit') && 'cursor-pointer'}`}

              src={profileImg}

              onClick={() => PATH.includes('edit') && setModalToShow('image')}

            />

            {PATH.includes('edit') && (

              <button

                className="button-icon"

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

              >

                <EditIcon />

              </button>

            )}

          </div>

          <div className="card-content">

            <div className="card-info">

              <h1>{fullName}</h1>

              {parse(settedOverview.replaceAll('h1', 'p'))}

              <div

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

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

              >

                <span>{formattedAddress}</span>

                <a

                  href=""

                  onClick={(e) => {

                    e.preventDefault()

                    setModalToShow('info')

                  }}

                >

                  {labels.PERSONAL_INFO}

                </a>

              </div>

              <div

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

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

              >

                {Boolean(totalConnections) && view_total_connections && (

                  <a href="/connection/my-connections" target="_blank">

                    {`${totalConnections} ${labels.CONNECTIONS}`}

                  </a>

                )}

                {Boolean(follower) && view_following && (

                  <a

                    href=""

                    className="cursor-auto"

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

                  >

                    {`${follower} ${labels.FOLLOWERS}`}

                  </a>

                )}

                {Boolean(following) && view_following && (

                  <a href="/company/following-companies" target="_blank">

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

                  </a>

                )}

              </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 && (

                  <a href={linkInmail} className="btn button btn-secondary">

                    {labels.MESSAGE}

                  </a>

                )}

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

      <OverviewModal

        isOpen={modalToShow === 'overview'}

        overview={settedOverview}

        id={profileId}

        closeModal={() => closeModal()}

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

      />

      <CoverModal

        isOpen={modalToShow === 'cover'}

        size={sizes}

        onClose={() => closeModal()}

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

      />

      <ImageModal

        show={modalToShow === 'image'}

        id={profileId}

        sizes={sizes}

        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>

            {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