From 7453b951393dbf7298e4595b930e50268faaa4c7 Mon Sep 17 00:00:00 2001 From: dariaterekhovaae <98411986+dariaterekhovaae@users.noreply.github.com> Date: Wed, 11 May 2022 18:16:02 +0300 Subject: [PATCH] [Chore]: Technical: components/geocoder translated to typescript (#1808) * components/geocoder translated to typescript Signed-off-by: Daria Terekhova * Prettier check Signed-off-by: Daria Terekhova * Build errors fix Signed-off-by: Daria Terekhova * Build fix Signed-off-by: Daria Terekhova --- src/components/geocoder-panel.tsx | 6 +-- src/components/geocoder/geocoder.d.ts | 33 ------------ .../geocoder/{geocoder.js => geocoder.tsx} | 53 +++++++++++++++---- 3 files changed, 45 insertions(+), 47 deletions(-) delete mode 100644 src/components/geocoder/geocoder.d.ts rename src/components/geocoder/{geocoder.js => geocoder.tsx} (86%) diff --git a/src/components/geocoder-panel.tsx b/src/components/geocoder-panel.tsx index 881757d413..3edb68db6c 100644 --- a/src/components/geocoder-panel.tsx +++ b/src/components/geocoder-panel.tsx @@ -25,7 +25,7 @@ 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, @@ -33,7 +33,7 @@ import { 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 { + 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 deleted file mode 100644 index 1ef55ee2ab..0000000000 --- a/src/components/geocoder/geocoder.d.ts +++ /dev/null @@ -1,33 +0,0 @@ -import {FunctionComponent} from 'react'; -import {Viewport} from 'reducers/map-state-updaters'; -import {IntlShape} from 'react-intl'; - -interface Result { - center: [number, number], - place_name: string -} - -export type Results = ReadonlyArray; - -type GeocoderProps = { - mapboxApiAccessToken: string, - className?: string, - limit?: number, - timeout?: number, - formatItem?: (item: Result) => string, - viewport: Viewport, - onSelected: (viewport: Viewport, item: Result) => void, - onDeleteMarker: () => void, - transitionDuration: number, - pointZoom: number, - width: number -}; - -type IntlProps = { - intl: IntlShape -}; - -export type GeocoderComponent = FunctionComponent; - -const Geocoder: FunctionComponent; -export default Geocoder; diff --git a/src/components/geocoder/geocoder.js b/src/components/geocoder/geocoder.tsx similarity index 86% rename from src/components/geocoder/geocoder.js rename to src/components/geocoder/geocoder.tsx index 72427d4f48..58172b28ee 100644 --- a/src/components/geocoder/geocoder.js +++ b/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; + +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 = ({ 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(