Proyectos de Subversion LeadersLinked - SPA

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

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

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

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

import { axios } from '@app/utils'

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

import ProfileWidget from '../ProfileWidget'

import LocationModal from './LocationModal'

const LocationCard = ({

  address: defaultAddress = '',

  uuid = '',

  edit = false

}) => {

  const [address, setAddress] = useState('')

  const [showModal, setShowModal] = useState(false)

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

  const dispatch = useDispatch()

  const toggleModal = () => setShowModal(!showModal)

  const handleEditLocation = (data) => {

    const formData = new FormData()

    Object.entries(data).map(([key, value]) => formData.append(key, value))

    axios

      .post(`/profile/my-profiles/location/${uuid}`, formData)

      .then((response) => {

        const { data, success } = response.data

        if (!success) {

          const resError =

            typeof data === 'string'

              ? data

              : Object.entries(data)

                  .map(([key, value]) => `${key}: ${value}`)

                  .join(', ')

          throw new Error(resError)

        }

        setAddress(data.formatted_address)

        toggleModal()

      })

      .catch((error) => {

        console.error(error)

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

      })

  }

  useEffect(() => {

    setAddress(defaultAddress)

  }, [defaultAddress])

  return (

    <>

      <ProfileWidget

        title={labels.location}

        action={

          edit && (

            <IconButton onClick={toggleModal}>

              <Edit />

            </IconButton>

          )

        }

      >

        <Typography variant='body1'>{address}</Typography>

      </ProfileWidget>

      <LocationModal

        show={showModal}

        onClose={toggleModal}

        onConfirm={handleEditLocation}

      />

    </>

  )

}

export default LocationCard