Merge branch 'master' into ez/add-types-side-panel-root

Signed-off-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com>

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,

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(

src/layers/s2-geometry-layer/s2-geometry-layer.ts

@@ -41,7 +41,7 @@ import {
   VisConfigRange
 } from '../layer-factory';
 import S2LayerIcon from './s2-layer-icon';
-import {getS2Center} from './s2-utils';
+import {getS2Center, validS2Token} from './s2-utils';
 
 export type S2GeometryLayerVisConfigSettings = {
   opacity: VisConfigNumber;
@@ -241,8 +241,7 @@ export default class S2GeometryLayer extends Layer {
     for (let i = 0; i < filteredIndex.length; i++) {
       const index = filteredIndex[i];
       const token = getS2Token({index});
-
-      if (token) {
+      if (validS2Token(token)) {
         data.push({
           index,
           token
@@ -257,9 +256,10 @@ export default class S2GeometryLayer extends Layer {
     const centroids = dataContainer.reduce(
       (acc, entry, index) => {
         const s2Token = getS2Token({index});
-        if (s2Token) {
+        if (validS2Token(s2Token)) {
           acc.push(getS2Center(s2Token));
         }
+
         return acc;
       },
       [],

src/layers/s2-geometry-layer/s2-utils.ts

@@ -34,3 +34,9 @@ export function getS2Center(s2Token) {
   const {lat, lng} = S2.idToLatLng(s2Id.toString());
   return [lng, lat];
 }
+
+const re = new RegExp('^[0-9a-z]*$', 'g');
+// simple test to see if token only contains numbers and letters
+export function validS2Token(token) {
+  return typeof token === 'string' && Boolean(token.match(re));
+}