Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react'

import { useSelector } from 'react-redux'

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

import Modal from 'components/UI/modal/Modal'

import UbicationInput from 'components/UI/inputs/UbicationInput'

import FormErrorFeedback from 'components/UI/form/FormErrorFeedback'

const LocationModal = ({

  show = false,

  onConfirm = () => {},

  onClose = () => {}

}) => {

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

  const {

    register,

    errors,

    handleSubmit,

    setValue,

    clearErrors,

    watch,

    reset

  } = useForm()

  const toggleModal = () => {

    reset()

    onClose()

  }

  const addressHandler = (address) => {

    Object.entries(address).forEach(([key, value]) => {

      if (value) {

        register(key)

        clearErrors(key)

        setValue(key, value)

      }

    })

  }

  const onSubmit = handleSubmit((data) => onConfirm(data))

  useEffect(() => {

    register('formatted_address', {

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

    })

  }, [])

  return (

    <Modal

      title={labels.location}

      show={show}

      onClose={toggleModal}

      onAccept={onSubmit}

    >

      <UbicationInput

        onGetAddress={addressHandler}

        settedQuery={watch('formatted_address')}

      />

      {errors.formatted_address && (

        <FormErrorFeedback>

          {errors.formatted_address.message}

        </FormErrorFeedback>

      )}

    </Modal>

  )

}

export default LocationModal