diff --git a/packages/react-widgets/src/hooks/useGeocoderWidgetController.js b/packages/react-widgets/src/hooks/useGeocoderWidgetController.js
index 2176ba3e5..5d2180e97 100644
--- a/packages/react-widgets/src/hooks/useGeocoderWidgetController.js
+++ b/packages/react-widgets/src/hooks/useGeocoderWidgetController.js
@@ -1,4 +1,3 @@
-import { selectOAuthCredentials, setViewState } from '@carto/react-redux/';
import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { geocodeStreetPoint } from '../models/GeocodingModel';
@@ -14,13 +13,10 @@ const setGeocoderResult = (payload) => ({
* Controller for component.
*
* @param {object} props
- * @param {Function} [props.onError] - Function to handle error messages from the widget.
- * @param {Boolean=} [props.zoomToResult] - Optional, default true. Whether control should zoom map on result.
+ * @param {Function=} [props.onError] - Function to handle error messages from the widget.
*/
-export default function useGeocoderWidgetController(props) {
- const oauthCredentials = useSelector(selectOAuthCredentials);
- const globalCredentials = useSelector((state) => state.carto.credentials);
- const credentials = oauthCredentials || globalCredentials;
+export default function useGeocoderWidgetController(props = {}) {
+ const credentials = useSelector((state) => state.carto.credentials);
// Component local state and events handling
const [searchText, setSearchText] = useState('');
const [loading, setIsLoading] = useState(false);
@@ -53,38 +49,25 @@ export default function useGeocoderWidgetController(props) {
};
const handleSearch = async () => {
- if (credentials) {
- try {
- setIsLoading(true);
- const result = await geocodeStreetPoint(credentials, {
- searchText,
- country: DEFAULT_COUNTRY
- });
- if (result) {
- if (props.zoomToResult !== false) {
- zoomToResult(result);
- }
- updateMarker(result);
- }
- } catch (e) {
- handleGeocodeError(e);
- } finally {
- setIsLoading(false);
+ if (!credentials) {
+ return;
+ }
+ try {
+ setIsLoading(true);
+ const result = await geocodeStreetPoint(credentials, {
+ searchText,
+ country: DEFAULT_COUNTRY
+ });
+ if (result) {
+ updateMarker(result);
}
+ } catch (e) {
+ handleGeocodeError(e);
+ } finally {
+ setIsLoading(false);
}
};
- const zoomToResult = (result) => {
- dispatch(
- setViewState({
- longitude: result.longitude,
- latitude: result.latitude,
- zoom: 16,
- transitionDuration: 500
- })
- );
- };
-
const updateMarker = (result) => {
dispatch(setGeocoderResult(result));
};
diff --git a/packages/react-widgets/src/widgets/GeocoderWidget.js b/packages/react-widgets/src/widgets/GeocoderWidget.js
index d2f9b4502..9cd36d809 100644
--- a/packages/react-widgets/src/widgets/GeocoderWidget.js
+++ b/packages/react-widgets/src/widgets/GeocoderWidget.js
@@ -1,8 +1,8 @@
import React, { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
import { PropTypes } from 'prop-types';
-import { addLayer } from '@carto/react-redux';
+import { addLayer, setViewState } from '@carto/react-redux';
import { CircularProgress, InputBase, Paper, SvgIcon } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
@@ -46,11 +46,11 @@ const SearchIcon = (args) => (
* @param {object} props
* @param {Object} [props.className] - Material-UI withStyle class for styling
* @param {Function} [props.onError] - Function to handle error messages from the widget.
- * @param {Boolean=} [props.zoomToResult] - Optional, default true. Whether control should zoom map on result.
*/
-function GeocoderWidget(props) {
+function GeocoderWidget(props = {}) {
const classes = useStyles();
const dispatch = useDispatch();
+ const geocoderResult = useSelector((state) => state.carto.geocoderResult);
const { searchText, loading, handleChange, handleInput, handleKeyPress, handleBlur } =
useGeocoderWidgetController(props);
@@ -64,6 +64,19 @@ function GeocoderWidget(props) {
);
}, [dispatch]);
+ useEffect(() => {
+ if (geocoderResult) {
+ dispatch(
+ setViewState({
+ longitude: geocoderResult.longitude,
+ latitude: geocoderResult.latitude,
+ zoom: 16,
+ transitionDuration: 500
+ })
+ );
+ }
+ }, [geocoderResult, dispatch]);
+
return (
{loading ? (
@@ -91,8 +104,7 @@ function GeocoderWidget(props) {
GeocoderWidget.propTypes = {
className: PropTypes.string,
- onError: PropTypes.func,
- zoomToResult: PropTypes.bool
+ onError: PropTypes.func
};
GeocoderWidget.defaultProps = {};