Proyectos de Subversion LeadersLinked - SPA

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

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

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

import { Avatar, Box, Button, IconButton, Typography } from '@mui/material'

import { Edit } from '@mui/icons-material'

import { axios, parse } from '@utils'

import { addNotification } from '@store/notification/notification.actions'

import Widget from '@components/UI/Widget'

import Cover from '@components/UI/cover/Cover'

import ConfirmModal from '@components/modals/ConfirmModal'

import ProfileModal from './ProfileModal'

const ProfileCard = ({

  full_name: fullName,

  user_profile_id: userProfileId,

  image,

  cover,

  overview,

  facebook,

  instagram,

  twitter,

  formatted_address: formattedAddress,

  user_experiences: userExperiences,

  show_contact: showContact,

  link_inmail: linkInmail,

  following,

  view_following: viewFollowing,

  total_connections: totalConnections,

  view_total_connections: viewTotalConnections,

  request_connection: requestConnection,

  link_cancel: linkCancel,

  link_request: linkRequest,

  sizes

}) => {

  const [isAdded, setIsAdded] = useState(false)

  const [connectionUrl, setConnectionUrl] = useState('')

  const [modalToShow, setModalToShow] = useState(null)

  const [settedOverview, setSettedOverview] = useState('')

  const [profileImg, setProfileImg] = useState('')

  const [isModalShow, setIsModalShow] = useState(false)

  const [isEdit, setIsEdit] = useState(false)

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

  const { pathname } = useLocation()

  const dispatch = useDispatch()

  const showConnections = totalConnections && viewTotalConnections

  const showFollowing = following && viewFollowing

  const displayModal = () => {

    setIsModalShow(!isModalShow)

  }

  const getProfileData = async () => {

    try {

      const { data: response } = await axios.get(pathname)

      const { link_request, link_cancel } = response

      if (link_request) {

        setConnectionUrl(link_request)

        return

      }

      setConnectionUrl(link_cancel)

    } catch (err) {

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

    }

  }

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

    setSettedOverview(overview)

    setProfileImg(image)

  }, [requestConnection, overview, image])

  useEffect(() => {

    linkRequest ? setConnectionUrl(linkRequest) : setConnectionUrl(linkCancel)

  }, [linkRequest, linkCancel])

  useEffect(() => {

    setIsEdit(pathname.includes('edit'))

  }, [pathname])

  return (

    <Widget>

      <Cover

        cover={cover}

        sizes={sizes?.cover}

        edit={isEdit}

        editUrl={`/profile/my-profiles/cover/${userProfileId}/operation/upload`}

      />

      <Box>

        <Avatar

          src={profileImg}

          alt={fullName}

          sx={{

            width: { xs: '100px', lg: '150px' },

            height: { xs: '100px', lg: '150px' },

            mt: { xs: '-50px', lg: '-75px' },

            border: '4px solid #fff',

            backgroundColor: '#c9ced4',

            cursor: isEdit ? 'pointer' : 'default'

          }}

          onClick={() => isEdit && setModalToShow('image')}

        />

        {isEdit && (

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

            <Edit />

          </IconButton>

        )}

      </Box>

      <Widget.Body>

        <Typography variant='h2'>{fullName}</Typography>

        <Typography>{parse(settedOverview)}</Typography>

        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>

          <Typography>{formattedAddress}</Typography>

          <Button onClick={() => setModalToShow('info')}>

            {labels.personal_info}

          </Button>

        </Box>

        <div

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

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

        >

          {showConnections && (

            <Link to='/connection/my-connections'>

              {`${totalConnections} ${labels.connections}`}

            </Link>

          )}

          {showFollowing && (

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

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

            </Link>

          )}

        </div>

        <div className='button-actions mt-2'>

          {connectionUrl && isAdded && (

            <Button variant='primary' onClick={() => displayModal()}>

              {labels.cancel}

            </Button>

          )}

          {connectionUrl && !isAdded && (

            <Button variant='primary' onClick={connect}>

              {labels.connect}

            </Button>

          )}

          {showContact && (

            <Button to={linkInmail} LinkComponent={Link} variant='secondary'>

              {labels.message}

            </Button>

          )}

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

      </Widget.Body>

      <ProfileModal

        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()}

      />

    </Widget>

  )

}

export default ProfileCard