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