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,

    handleSubmit,

    setValue,

    clearErrors,

    watch,

    reset,

    formState: { errors }

  } = 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;