[Chore]: Technical: components/geocoder translated to typescript (#1808)

* components/geocoder translated to typescript Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com> * Prettier check Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com> * Build errors fix Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com> * Build fix Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com>
keplergl · May 11, 2022 · 7453b95 · 7453b95
1 parent 5b918e0
commit 7453b95
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 47 deletions.
diff --git a/src/components/geocoder-panel.tsx b/src/components/geocoder-panel.tsx
@@ -25,15 +25,15 @@ import {FlyToInterpolator} from '@deck.gl/core';
 import KeplerGlSchema from 'schemas';
 import {getCenterAndZoomFromBounds} from 'utils/projection-utils';
 
-import Geocoder from './geocoder/geocoder';
+import Geocoder, { Result } from './geocoder/geocoder';
 import {
   GEOCODER_DATASET_NAME,
   GEOCODER_LAYER_ID,
   GEOCODER_GEO_OFFSET,
   GEOCODER_ICON_COLOR,
   GEOCODER_ICON_SIZE
 } from 'constants/default-settings';
-import {MapState} from 'reducers';
+import {MapState, Viewport} from 'reducers';
 
 const ICON_LAYER = {
   id: GEOCODER_LAYER_ID,
@@ -133,7 +133,7 @@ export default function GeocoderPanelFactory(): ComponentType<GeocoderPanelProps
       this.props.removeDataset(GEOCODER_DATASET_NAME);
     }
 
-    onSelected = (viewport = null, geoItem) => {
+    onSelected = (viewport: Viewport | null = null, geoItem: Result) => {
       const {
         center: [lon, lat],
         text,

diff --git a/src/components/geocoder/geocoder.d.ts b/src/components/geocoder/geocoder.d.ts
diff --git a/src/components/geocoder/geocoder.js → src/components/geocoder/geocoder.tsx b/src/components/geocoder/geocoder.js → src/components/geocoder/geocoder.tsx
@@ -22,11 +22,12 @@ import React, {useCallback, useMemo, useState} from 'react';
 import styled from 'styled-components';
 import classnames from 'classnames';
 import MapboxClient from 'mapbox';
-import {injectIntl} from 'react-intl';
+import {injectIntl, IntlShape} from 'react-intl';
 import {WebMercatorViewport} from 'viewport-mercator-project';
 import KeyEvent from 'constants/keyevent';
 import {Input} from 'components/common/styled-components';
 import {Search, Delete} from 'components/common/icons';
+import {Viewport} from 'reducers/map-state-updaters';
 
 // matches only valid coordinates
 const COORDINATE_REGEX_STRING =
@@ -35,9 +36,9 @@ const COORDINATE_REGEX = RegExp(COORDINATE_REGEX_STRING);
 
 const PLACEHOLDER = 'Enter an address or coordinates, ex 37.79,-122.40';
 
-let debounceTimeout = null;
+let debounceTimeout: NodeJS.Timeout | null = null;
 
-export const testForCoordinates = query => {
+export const testForCoordinates = (query: string): [true, number, number] | [false, string] => {
   const isValid = COORDINATE_REGEX.test(query.trim());
 
   if (!isValid) {
@@ -106,8 +107,35 @@ const StyledContainer = styled.div`
   }
 `;
 
+export interface Result {
+  center: [number, number];
+  place_name: string;
+  bbox?: [number, number, number, number];
+  text?: string;
+}
+
+export type Results = ReadonlyArray<Result>;
+
+type GeocoderProps = {
+  mapboxApiAccessToken: string;
+  className?: string;
+  limit?: number;
+  timeout?: number;
+  formatItem?: (item: Result) => string;
+  viewport?: Viewport;
+  onSelected: (viewport: Viewport | null, item: Result) => void;
+  onDeleteMarker?: () => void;
+  transitionDuration?: number;
+  pointZoom?: number;
+  width?: number;
+};
+
+type IntlProps = {
+  intl: IntlShape;
+};
+
 /** @type {import('./geocoder').GeocoderComponent} */
-const GeoCoder = ({
+const GeoCoder: React.FC<GeocoderProps & IntlProps> = ({
   mapboxApiAccessToken,
   className = '',
   limit = 5,
@@ -125,7 +153,7 @@ const GeoCoder = ({
   const [showResults, setShowResults] = useState(false);
   const [showDelete, setShowDelete] = useState(false);
   /** @type {import('./geocoder').Results} */
-  const initialResults = [];
+  const initialResults: Result[] = [];
   const [results, setResults] = useState(initialResults);
   const [selectedIndex, setSelectedIndex] = useState(0);
 
@@ -135,11 +163,14 @@ const GeoCoder = ({
     event => {
       const queryString = event.target.value;
       setInputValue(queryString);
-      const [hasValidCoordinates, longitude, latitude] = testForCoordinates(queryString);
-      if (hasValidCoordinates) {
+      const resultCoordinates = testForCoordinates(queryString);
+      if (resultCoordinates[0]) {
+        const [_, latitude, longitude] = resultCoordinates;
         setResults([{center: [latitude, longitude], place_name: queryString}]);
       } else {
-        clearTimeout(debounceTimeout);
+        if (debounceTimeout) {
+          clearTimeout(debounceTimeout);
+        }
         debounceTimeout = setTimeout(async () => {
           if (limit > 0 && Boolean(queryString)) {
             try {
@@ -173,7 +204,7 @@ const GeoCoder = ({
       let newViewport = new WebMercatorViewport(viewport);
       const {bbox, center} = item;
 
-      newViewport = bbox
+      const resultViewport = bbox
         ? newViewport.fitBounds([
             [bbox[0], bbox[1]],
             [bbox[2], bbox[3]]
@@ -184,7 +215,7 @@ const GeoCoder = ({
             zoom: pointZoom
           };
 
-      const {longitude, latitude, zoom} = newViewport;
+      const {longitude, latitude, zoom} = resultViewport;
 
       onSelected({...viewport, ...{longitude, latitude, zoom, transitionDuration}}, item);
 
@@ -198,7 +229,7 @@ const GeoCoder = ({
   const onMarkDeleted = useCallback(() => {
     setShowDelete(false);
     setInputValue('');
-    onDeleteMarker();
+    onDeleteMarker?.();
   }, [onDeleteMarker]);
 
   const onKeyDown = useCallback(