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