QOL: Autocomplete entries sorted by distance (#390)

* implemented

* remove debug & reformat files

* removed low-level getQueryStore().state.queryPoints

* removed obsolete import

* removed more obsolete imports

* cleaned up the Geocoder

* format file

src/api/Api.ts

@@ -28,7 +28,7 @@ export default interface Api {
 
     routeWithDispatch(args: RoutingArgs, zoom: boolean): void
 
-    geocode(query: string, provider: string): Promise<GeocodingResult>
+    geocode(query: string, provider: string, additionalOptions?: Record<string, string>): Promise<GeocodingResult>
 
     supportsGeocoding(): boolean
 }
@@ -79,7 +79,11 @@ export class ApiImpl implements Api {
         }
     }
 
-    async geocode(query: string, provider: string): Promise<GeocodingResult> {
+    async geocode(
+        query: string,
+        provider: string,
+        additionalOptions?: Record<string, string>
+    ): Promise<GeocodingResult> {
         if (!this.supportsGeocoding())
             return {
                 hits: [],
@@ -96,6 +100,12 @@ export class ApiImpl implements Api {
         url.searchParams.append('osm_tag', '!boundary')
         url.searchParams.append('osm_tag', '!historic')
 
+        if (additionalOptions) {
+            for (const key in additionalOptions) {
+                url.searchParams.append(key, additionalOptions[key])
+            }
+        }
+
         const response = await fetch(url.toString(), {
             headers: { Accept: 'application/json' },
         })

src/sidebar/search/AddressInput.tsx

@@ -13,14 +13,15 @@ import Cross from '@/sidebar/times-solid-thin.svg'
 import styles from './AddressInput.module.css'
 import Api, { getApi } from '@/api/Api'
 import { tr } from '@/translation/Translation'
-import { hitToItem, nominatimHitToItem, textToCoordinate } from '@/Converters'
+import { coordinateToText, hitToItem, nominatimHitToItem, textToCoordinate } from '@/Converters'
 import { useMediaQuery } from 'react-responsive'
 import PopUp from '@/sidebar/search/PopUp'
 import PlainButton from '@/PlainButton'
 import { onCurrentLocationSelected } from '@/map/MapComponent'
 
 export interface AddressInputProps {
     point: QueryPoint
+    points: QueryPoint[]
     onCancel: () => void
     onAddressSelected: (queryText: string, coord: Coordinate | undefined, bbox: Bbox | undefined) => void
     onChange: (value: string) => void
@@ -134,6 +135,11 @@ export default function AddressInput(props: AddressInputProps) {
     const containerClass = hasFocus ? styles.fullscreen : ''
     const type = props.point.type
 
+    // get the bias point for the geocoder
+    // (the query point above the current one)
+    const autocompleteIndex = props.points.findIndex(point => !point.isInitialized)
+    const biasPoint = props.points[autocompleteIndex - 1]
+
     return (
         <div className={containerClass}>
             <div
@@ -166,7 +172,7 @@ export default function AddressInput(props: AddressInputProps) {
                     onChange={e => {
                         setText(e.target.value)
                         const coordinate = textToCoordinate(e.target.value)
-                        if (!coordinate) geocoder.request(e.target.value, 'default')
+                        if (!coordinate) geocoder.request(e.target.value, biasPoint, 'default')
                         props.onChange(e.target.value)
                     }}
                     onKeyDown={onKeypress}
@@ -213,7 +219,7 @@ export default function AddressInput(props: AddressInputProps) {
                                 } else if (item instanceof MoreResultsItem) {
                                     // do not hide autocomplete items
                                     const coordinate = textToCoordinate(item.search)
-                                    if (!coordinate) geocoder.request(item.search, 'nominatim')
+                                    if (!coordinate) geocoder.request(item.search, biasPoint, 'nominatim')
                                 }
                                 searchInput.current!.blur()
                             }}
@@ -271,23 +277,24 @@ class Geocoder {
         this.onSuccess = onSuccess
     }
 
-    request(query: string, provider: string) {
-        this.requestAsync(query, provider).then(() => {})
+    request(query: string, biasPoint: QueryPoint, provider: string) {
+        this.requestAsync(query, biasPoint, provider).then(() => {})
     }
 
     cancel() {
         // invalidates last request if there is one
         this.getNextId()
     }
 
-    async requestAsync(query: string, provider: string) {
+    async requestAsync(query: string, biasPoint: QueryPoint, provider: string) {
         const currentId = this.getNextId()
         this.timeout.cancel()
         if (!query || query.length < 2) return
 
         await this.timeout.wait()
         try {
-            const result = await this.api.geocode(query, provider)
+            const options: Record<string, string> = biasPoint ? { point: coordinateToText(biasPoint.coordinate) } : {}
+            const result = await this.api.geocode(query, provider, options)
             const hits = Geocoder.filterDuplicates(result.hits)
             if (currentId === this.requestId) this.onSuccess(query, provider, hits)
         } catch (reason) {

src/sidebar/search/Search.tsx

@@ -166,6 +166,7 @@ const SearchBox = ({
                     dropPreviewIndex={dropPreviewIndex}
                     index={index}
                     point={point}
+                    points={points}
                     onCancel={() => console.log('cancel')}
                     onAddressSelected={(queryText, coordinate) => {
                         const initCount = points.filter(p => p.isInitialized).length