Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */

/* eslint-disable indent */

/* eslint-disable react/prop-types */

import React, { useState } from 'react'

import parse from 'html-react-parser'

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

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

import { useDispatch } from 'react-redux'

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

import { Modal } from 'react-bootstrap'

import ImageModal from '../../../../../shared/profile/edit/profile-info/profile-img/ImageModal'

import { profileTypes } from '../../../../../shared/profile/Profile.types'

import CoverModal from '../../../../../shared/profile/edit/cover-section/CoverModal'

import OverviewModal from '../../../../my-profiles/edit/overview/OverviewModal'

import ConfirmModal from '../../../../../shared/confirm-modal/ConfirmModal'

const ProfileCard = ({

    fullName = '',

    overview = '',

    formatted_address: formattedAddress = '',

    total_connections: totalConnections,

    showContact = false,

    userExperiences = [],

    linkInmail = '',

    CancelConnectionUrl = '',

    RequestConnectionUrl = '',

    image = '',

    cover = '',

    userIdEncrypted,

    userProfileIdEncrypted,

    follower,

    following,

    facebook,

    twitter,

    instagram,

    imageProfileCover,

    imageSizeCover,

    view_following,

    view_total_connections

}) => {

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

    const [connectionUrl, setConnectionUrl] = useState(RequestConnectionUrl || CancelConnectionUrl)

    const [isModalShow, setIsModalShow] = useState(false)

    const dispatch = useDispatch()

    const PATH = window.location.pathname

    // modals state

    const [modalToShow, setModalToShow] = useState(null)

    const [settedOverview, setSettedOverview] = useState(overview)

    const [profileImg, setProfileImg] = useState({

        path: `/storage/type/user-profile/code/${userIdEncrypted}/${image ? `filename/${image}` : ''}`

    })

    const [coverImg, setCoverImg] = useState({

        path: `/storage/type/user-cover/code/${userIdEncrypted}/${cover ? `filename/${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.message}` }))

        }

    }

    const closeModal = () => setModalToShow(null)

    return (

        <>

            <section className='profile__user-card'>

                <div className='cover__image-container'>

                    <img alt='Background Image' src={coverImg.path} />

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

                            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>

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

                userIdEncrypted={userProfileIdEncrypted}

                closeModal={() => closeModal()}

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

            />

            <CoverModal

                isModalOpen={modalToShow === 'cover'}

                coverType={profileTypes.USER}

                entityId={userIdEncrypted}

                profileId={userProfileIdEncrypted}

                handleCoverSectionModalOpen={() => closeModal()}

                imageSizeCover={imageSizeCover}

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

            />

            <ImageModal

                handleModalOpen={() => closeModal()}

                isModalOpen={modalToShow === 'image'}

                profileId={userProfileIdEncrypted}

                imageProfileCover={imageProfileCover}

                profileType={profileTypes.USER}

                setProfileImg={(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

}) => {

    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