extenalize state of GeocoderWidge

CartoDB · Apr 28, 2022 · cb97447 · cb97447
1 parent 5abfac5
commit cb97447
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 93 deletions.
diff --git a/packages/react-widgets/src/hooks/useGeocoderWidgetController.js b/packages/react-widgets/src/hooks/useGeocoderWidgetController.js
@@ -0,0 +1,106 @@
+import { selectOAuthCredentials, setViewState } from '@carto/react-redux/';
+import { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { geocodeStreetPoint } from '../models/GeocodingModel';
+
+const DEFAULT_COUNTRY = ''; // 'SPAIN', 'USA'
+
+const setGeocoderResult = (payload) => ({
+  type: 'carto/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.
+ */
+export default function useGeocoderWidgetController(props) {
+  const oauthCredentials = useSelector(selectOAuthCredentials);
+  const globalCredentials = useSelector((state) => state.carto.credentials);
+  const credentials = oauthCredentials || globalCredentials;
+  // Component local state and events handling
+  const [searchText, setSearchText] = useState('');
+  const [loading, setIsLoading] = useState(false);
+
+  // Actions dispatched
+  const dispatch = useDispatch();
+
+  const handleChange = (e) => {
+    setSearchText(e.target.value);
+  };
+
+  const handleInput = (e) => {
+    if (e.target.value === '') {
+      updateMarker(null);
+    }
+  };
+
+  const handleKeyPress = async (e) => {
+    if (e.keyCode === 13) {
+      // Force blur to hide virtual keyboards on mobile and search
+      e.target.blur();
+    }
+  };
+
+  // Needed to handle keyboard "Done" button on iOS
+  const handleBlur = async () => {
+    if (searchText.length) {
+      handleSearch();
+    }
+  };
+
+  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);
+      }
+    }
+  };
+
+  const zoomToResult = (result) => {
+    dispatch(
+      setViewState({
+        longitude: result.longitude,
+        latitude: result.latitude,
+        zoom: 16,
+        transitionDuration: 500
+      })
+    );
+  };
+
+  const updateMarker = (result) => {
+    dispatch(setGeocoderResult(result));
+  };
+
+  const handleGeocodeError = (error) => {
+    if (props.onError) {
+      props.onError(error);
+    }
+  };
+
+  return {
+    searchText,
+    loading,
+    handleChange,
+    handleInput,
+    handleKeyPress,
+    handleBlur
+  };
+}
diff --git a/packages/react-widgets/src/index.d.ts b/packages/react-widgets/src/index.d.ts
@@ -17,4 +17,5 @@ export {
 export { default as TimeSeriesWidget } from './widgets/TimeSeriesWidget';
 export { default as useSourceFilters } from './hooks/useSourceFilters';
 export { default as FeatureSelectionWidget } from './widgets/FeatureSelectionWidget';
-export { default as FeatureSelectionLayer } from './layers/FeatureSelectionLayer';
+export { default as FeatureSelectionLayer } from './layers/FeatureSelectionLayer';
+export { default as useGeocoderWidgetController } from './hooks/useGeocoderWidgetController';
diff --git a/packages/react-widgets/src/index.js b/packages/react-widgets/src/index.js
@@ -18,3 +18,4 @@ export {
 } from './models';
 export { default as useSourceFilters } from './hooks/useSourceFilters';
 export { default as FeatureSelectionLayer } from './layers/FeatureSelectionLayer';
+export { default as useGeocoderWidgetController } from './hooks/useGeocoderWidgetController';
diff --git a/packages/react-widgets/src/widgets/GeocoderWidget.js b/packages/react-widgets/src/widgets/GeocoderWidget.js
@@ -1,19 +1,12 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import { PropTypes } from 'prop-types';
 
-import { geocodeStreetPoint } from '../models';
-import { addLayer, selectOAuthCredentials, setViewState } from '@carto/react-redux';
+import { addLayer } from '@carto/react-redux';
 
 import { CircularProgress, InputBase, Paper, SvgIcon } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-
-const DEFAULT_COUNTRY = ''; // 'SPAIN', 'USA'
-
-const setGeocoderResult = (payload) => ({
-  type: 'carto/setGeocoderResult',
-  payload
-});
+import useGeocoderWidgetController from '../hooks/useGeocoderWidgetController';
 
 const useStyles = makeStyles((theme) => ({
   paperInput: {
@@ -54,20 +47,14 @@ const SearchIcon = (args) => (
  * @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.
- *
- * @see geocodeStreetPoint
  */
 function GeocoderWidget(props) {
-  const inputRef = useRef();
-  const oauthCredentials = useSelector(selectOAuthCredentials);
-  const globalCredentials = useSelector((state) => state.carto.credentials);
-  const credentials = oauthCredentials || globalCredentials;
-  // Component local state and events handling
-  const [searchText, setSearchText] = useState('');
-  const [loading, setIsLoading] = useState(false);
-  // Actions dispatched
+  const classes = useStyles();
   const dispatch = useDispatch();
 
+  const { searchText, loading, handleChange, handleInput, handleKeyPress, handleBlur } =
+    useGeocoderWidgetController(props);
+
   useEffect(() => {
     // layer to display the geocoded direction marker
     dispatch(
@@ -77,86 +64,17 @@ function GeocoderWidget(props) {
     );
   }, [dispatch]);
 
-  const classes = useStyles();
-
-  const handleChange = (e) => {
-    setSearchText(e.target.value);
-  };
-
-  const handleInput = (e) => {
-    if (e.target.value === '') {
-      updateMarker(null);
-    }
-  };
-
-  const handleKeyPress = async (e) => {
-    if (e.keyCode === 13) {
-      // Force blur to hide virtual keyboards on mobile and search
-      e.target.blur();
-    }
-  };
-
-  // Needed to handle keyboard "Done" button on iOS
-  const handleBlur = async () => {
-    if (searchText.length) {
-      handleSearch();
-    }
-  };
-
-  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);
-      }
-    }
-  };
-
-  const zoomToResult = (result) => {
-    dispatch(
-      setViewState({
-        longitude: result.longitude,
-        latitude: result.latitude,
-        zoom: 16,
-        transitionDuration: 500
-      })
-    );
-  };
-
-  const updateMarker = (result) => {
-    dispatch(setGeocoderResult(result));
-  };
-
-  const handleGeocodeError = (error) => {
-    if (props.onError) {
-      props.onError(error);
-    }
-  };
-
   return (
     <Paper className={`${props.className} ${classes.paperInput}`} elevation={2}>
       {loading ? (
         <CircularProgress size={20} className={classes.icon} />
       ) : (
         <SearchIcon className={classes.icon} />
       )}
+
       <InputBase
         type='search'
         tabIndex={-1}
-        inputRef={inputRef}
         size='small'
         placeholder='Search address'
         className={classes.input}
@@ -173,7 +91,8 @@ function GeocoderWidget(props) {
 
 GeocoderWidget.propTypes = {
   className: PropTypes.string,
-  onError: PropTypes.func
+  onError: PropTypes.func,
+  zoomToResult: PropTypes.bool
 };
 
 GeocoderWidget.defaultProps = {};