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, 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'

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 = [],

  user_profile_id: userProfileId,

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

  }, [requestConnection, overview])

  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`}

      />

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

          {showConnections && (

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

              <Typography variant='body2'>

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

              </Typography>

            </Link>

          )}

          {showFollowing && (

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

              <Typography variant='body2'>

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

              </Typography>

            </Link>

          )}

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