Proyectos de Subversion LeadersLinked - Antes de SPA

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

import { axios } from '../../../utils'

import { useForm } from 'react-hook-form'

import { Button, Modal } from 'react-bootstrap'

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

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

import Spinner from '../UI/Spinner'

import UbicationInput from '../../../shared/ubication-input/UbicationInput'

import FormErrorFeedback from '../UI/FormErrorFeedback'

const LocationModal = ({

  closeModal,

  isModalOpen,

  userIdEncrypted,

  setSettedAddress,

}) => {

  const [modalLoading, setModalLoading] = useState(false)

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

  const dispatch = useDispatch()

  const {

    register,

    errors,

    handleSubmit,

    setValue,

    clearErrors,

    getValues,

    watch,

    setError,

  } = useForm()

  const isAddressEmpty = useRef(true)

  const addressKeys = useRef([

    'address1',

    'address2',

    'country',

    'state',

    'city1',

    'city2',

    'postal_code',

    'latitude',

    'longitude',

  ])

  const handleModalOpen = (event) => {

    event && event.preventDefault()

    Object.keys(getValues()).map(([key]) => setValue(key, ''))

    closeModal()

  }

  const getAddressHandler = (addresObject) => {

    addressKeys.current.map((addressKey) => {

      setValue(addressKey, '')

    })

    const { address_components } = addresObject

    if (address_components) {

      address_components.map((address_component) => {

        const address_component_name = address_component.long_name

        const address_component_type = address_component.types[0]

        switch (address_component_type) {

          case 'route':

            setValue('address1', address_component_name)

            break

          case 'sublocality':

            setValue('address2', address_component_name)

            break

          case 'locality':

            setValue('city1', address_component_name)

            break

          case 'administrative_area_level_2':

            setValue('city2', address_component_name)

            break

          case 'administrative_area_level_1':

            setValue('state', address_component_name)

            break

          case 'country':

            setValue('country', address_component_name)

            break

          case 'postal_code':

            setValue('postal_code', address_component_name)

            break

          case 'geometry':

            setValue('latitude', address_component.latitude)

            setValue('longitude', address_component.longitude)

            break

          default:

            break

        }

      })

      isAddressEmpty.current = false

      clearErrors('formatted_address')

    } else {

      isAddressEmpty.current = true

    }

    setValue('formatted_address', addresObject.formatted_address)

  }

  const onSubmitHandler = async (data) => {

    setModalLoading(true)

    const formData = new FormData()

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

      formData.append(key, value)

    })

    await axios

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

      .then((response) => {

        const resData = response.data

        if (resData.success) {

          setSettedAddress(resData.data.formatted_address)

          handleModalOpen()

        } else {

          const resError = resData.data

          if (resError.constructor.name === 'Object') {

            Object.entries(resError).map(([key, value]) => {

              if (key in getValues()) {

                setError(key, {

                  type: 'manual',

                  message: Array.isArray(value) ? value[0] : value,

                })

              }

            })

          } else {

            dispatch(addNotification({ style: 'danger', msg: resError }))

          }

        }

      })

    setModalLoading(false)

  }

  useEffect(() => {

    addressKeys.current.map((addressKey) => {

      register(addressKey)

    })

    register('formatted_address', {

      required: 'por favor seleccione una ubicación correcta',

    })

  }, [])

  return (

    <Modal show={isModalOpen} onHide={handleModalOpen}>

      <Modal.Header closeButton>

        <Modal.Title>{labels.location}</Modal.Title>

      </Modal.Header>

      <form onSubmit={handleSubmit(onSubmitHandler)}>

        <Modal.Body>

          <div className="form-group datefm">

            <UbicationInput

              onGetAddress={getAddressHandler}

              settedQuery={watch('formatted_address')}

            />

            <i className="fa fa-map-marker"></i>

            {errors.formatted_address && (

              <FormErrorFeedback>

                {errors.formatted_address.message}

              </FormErrorFeedback>

            )}

          </div>

        </Modal.Body>

        <Modal.Footer>

          <Button size="sm" type="submit">

            {labels.accept}

          </Button>

          <Button size="sm" variant="danger" onClick={handleModalOpen}>

            {labels.cancel}

          </Button>

        </Modal.Footer>

      </form>

      {modalLoading && <Spinner />}

    </Modal>

  )

}

export default LocationModal