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