last review & cleanup

CartoDB · Apr 28, 2022 · 771a508 · 771a508
1 parent cb97447
commit 771a508
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 41 deletions.
diff --git 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 <GeocoderWidget /> 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
@@ -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 (
     <Paper className={`${props.className} ${classes.paperInput}`} elevation={2}>
       {loading ? (
@@ -91,8 +104,7 @@ function GeocoderWidget(props) {
 
 GeocoderWidget.propTypes = {
   className: PropTypes.string,
-  onError: PropTypes.func,
-  zoomToResult: PropTypes.bool
+  onError: PropTypes.func
 };
 
 GeocoderWidget.defaultProps = {};