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 { Button, Typography } from '@mui/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'
import Avatar from '@components/common/Avatar'
import Row from '@components/common/Row'

const ProfileCard = ({
  cover,
  facebook,
  following,
  formatted_address: formattedAddress,
  full_name: fullName,
  image,
  instagram,
  link_cancel: linkCancel,
  link_inmail: linkInmail,
  link_request: linkRequest,
  overview,
  request_connection: requestConnection,
  show_contact: showContact,
  sizes,
  total_connections: totalConnections,
  twitter,
  user_experiences: userExperiences = [],
  view_following: viewFollowing,
  view_total_connections: viewTotalConnections
}) => {
  const [isAdded, setIsAdded] = useState(false)
  const [connectionUrl, setConnectionUrl] = useState('')
  const [modalToShow, setModalToShow] = useState(null)
  const [settedOverview, setSettedOverview] = useState('')
  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(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)
  }, [requestConnection, overview])

  useEffect(() => {
    linkRequest ? setConnectionUrl(linkRequest) : setConnectionUrl(linkCancel)
  }, [linkRequest, linkCancel])

  useEffect(() => {
    setIsEdit(pathname.includes('edit'))
  }, [pathname])

  return (
    <Widget>
      <Cover cover={cover} />
      <Widget.Body>
        <Avatar
          src={image}
          alt={fullName}
          styles={{
            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'
          }}
        />

        <Typography variant='h2'>{fullName}</Typography>
        <Typography>{parse(settedOverview)}</Typography>

        <Row>
          <Typography>{formattedAddress}</Typography>
          <Typography variant='body2'> - </Typography>
          <Typography variant='body2' onClick={() => setModalToShow('info')}>
            {labels.personal_info}
          </Typography>
        </Row>

        <Row>
          {viewTotalConnections ? (
            <Link to='/connection/my-connections'>
              <Typography variant='body2'>
                {`${totalConnections} conexiones`}
              </Typography>
            </Link>
          ) : null}
          {viewFollowing ? (
            <Link onClick={(e) => e.preventDefault()}>
              <Typography variant='body2'>
                {`${following} siguiendo`}
              </Typography>
            </Link>
          ) : null}
        </Row>

        <Row>
          {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>
          )}
        </Row>
      </Widget.Body>
      {/*  {isEdit && (
        <>
          <OverviewModal
            isOpen={modalToShow === 'overview'}
            overview={settedOverview}
            id={profileId}
            closeModal={() => closeModal()}
            onComplete={(newOverview) => setSettedOverview(newOverview)}
          />
        </>
      )} */}

      <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