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,
  uuid,
  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(
    `/storage/type/user-profile/code/${uuid}/`
  )
  const [coverImg, setCoverImg] = useState(
    `/storage/type/user-cover/code/${uuid}}/`
  )
  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