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;