From 2d149efb50604e7ffce237d1e9a7bc0a3e2b3d75 Mon Sep 17 00:00:00 2001 From: tintef Date: Sun, 1 Sep 2024 11:20:40 -0300 Subject: [PATCH 1/2] [FEATURE/LOCATION-BIAS-AND-LOCATION-RESTRICTION] upgrade googlemaps libs versions to latest --- package-lock.json | 40 +++++++++++++++++----------------------- package.json | 4 ++-- 2 files changed, 19 insertions(+), 25 deletions(-) diff --git a/package-lock.json b/package-lock.json index 77c6055..83b2252 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,8 @@ "version": "4.1.0", "license": "MIT", "dependencies": { - "@googlemaps/js-api-loader": "^1.14.3", - "@types/google.maps": "^3.50.4", + "@googlemaps/js-api-loader": "^1.16.8", + "@types/google.maps": "^3.57.0", "react-select": "^5.7.4", "use-debounce": "^3.4.3" }, @@ -683,13 +683,9 @@ } }, "node_modules/@googlemaps/js-api-loader": { - "version": "1.15.1", - "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.15.1.tgz", - "integrity": "sha512-AsnEgNsB7S/VdrHGEQUaUM2e5tmjFGKBAfzR/AqO8O7TPq/jQGvoRw5liPBw4EMF38RDsHmKDV89q/X+qiUREQ==", - "license": "Apache-2.0", - "dependencies": { - "fast-deep-equal": "^3.1.3" - } + "version": "1.16.8", + "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz", + "integrity": "sha512-CROqqwfKotdO6EBjZO/gQGVTbeDps5V7Mt9+8+5Q+jTg5CRMi3Ii/L9PmV3USROrt2uWxtGzJHORmByxyo9pSQ==" }, "node_modules/@humanwhocodes/config-array": { "version": "0.5.0", @@ -855,10 +851,9 @@ "license": "MIT" }, "node_modules/@types/google.maps": { - "version": "3.50.5", - "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.50.5.tgz", - "integrity": "sha512-RuZf1MJtctGlpW+Gd4a/eGtAufUDjMf+eyN1l+B3fbe2YLScJbg8KEljJfb+6vnSPFAeM1/48geVIEg3vqOkxw==", - "license": "MIT" + "version": "3.57.0", + "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.57.0.tgz", + "integrity": "sha512-8X/HqaUXob25aVslslO84p9ESInpOQd3lMxW085IxqZZ1opRuFfwx2/c1JIUFVvCkkK+sCQHFDJ+Kw60Gsi1qA==" }, "node_modules/@types/json-schema": { "version": "7.0.9", @@ -1945,6 +1940,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true, "license": "MIT" }, "node_modules/fast-json-stable-stringify": { @@ -4722,12 +4718,9 @@ } }, "@googlemaps/js-api-loader": { - "version": "1.15.1", - "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.15.1.tgz", - "integrity": "sha512-AsnEgNsB7S/VdrHGEQUaUM2e5tmjFGKBAfzR/AqO8O7TPq/jQGvoRw5liPBw4EMF38RDsHmKDV89q/X+qiUREQ==", - "requires": { - "fast-deep-equal": "^3.1.3" - } + "version": "1.16.8", + "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz", + "integrity": "sha512-CROqqwfKotdO6EBjZO/gQGVTbeDps5V7Mt9+8+5Q+jTg5CRMi3Ii/L9PmV3USROrt2uWxtGzJHORmByxyo9pSQ==" }, "@humanwhocodes/config-array": { "version": "0.5.0", @@ -4851,9 +4844,9 @@ "dev": true }, "@types/google.maps": { - "version": "3.50.5", - "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.50.5.tgz", - "integrity": "sha512-RuZf1MJtctGlpW+Gd4a/eGtAufUDjMf+eyN1l+B3fbe2YLScJbg8KEljJfb+6vnSPFAeM1/48geVIEg3vqOkxw==" + "version": "3.57.0", + "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.57.0.tgz", + "integrity": "sha512-8X/HqaUXob25aVslslO84p9ESInpOQd3lMxW085IxqZZ1opRuFfwx2/c1JIUFVvCkkK+sCQHFDJ+Kw60Gsi1qA==" }, "@types/json-schema": { "version": "7.0.9", @@ -5591,7 +5584,8 @@ "fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true }, "fast-json-stable-stringify": { "version": "2.1.0", diff --git a/package.json b/package.json index 27c34e0..c8fa029 100644 --- a/package.json +++ b/package.json @@ -50,8 +50,8 @@ "typescript": "^3.9.7" }, "dependencies": { - "@googlemaps/js-api-loader": "^1.14.3", - "@types/google.maps": "^3.50.4", + "@googlemaps/js-api-loader": "^1.16.8", + "@types/google.maps": "^3.57.0", "react-select": "^5.7.4", "use-debounce": "^3.4.3" }, From 7b2b6a55064cd64c898253041c15a8705be09c63 Mon Sep 17 00:00:00 2001 From: tintef Date: Sun, 1 Sep 2024 11:21:31 -0300 Subject: [PATCH 2/2] [FEATURE/LOCATION-BIAS-AND-LOCATION-RESTRICTION] remove bounds and radius in favor of locationBias and locationRestriction --- src/google-places-autocomplete.tsx | 2 +- src/helpers/autocompletion-request-builder.ts | 34 ++++++------------- src/hooks/use-fetch-suggestions.ts | 15 ++++---- src/types.ts | 16 +-------- src/utils/geocode-by-lat-lng.ts | 4 +-- src/utils/get-lat-lng.ts | 8 ++--- 6 files changed, 23 insertions(+), 56 deletions(-) diff --git a/src/google-places-autocomplete.tsx b/src/google-places-autocomplete.tsx index dfca1e7..16bc9d3 100644 --- a/src/google-places-autocomplete.tsx +++ b/src/google-places-autocomplete.tsx @@ -16,7 +16,7 @@ const GooglePlacesAutocomplete: React.ForwardRefRenderFunction; + input: string; + sessionToken?: google.maps.places.AutocompleteSessionToken; +} -export default ( - autocompletionRequest: AutocompletionRequest, - input: string, - sessionToken?: google.maps.places.AutocompleteSessionToken, -): google.maps.places.AutocompletionRequest => { - const { bounds, location, ...rest } = autocompletionRequest; +const autocompletionRequestBuilder = ({ autocompletionRequest, input, sessionToken }: Arg): google.maps.places.AutocompletionRequest => { + let res: google.maps.places.AutocompletionRequest = { input }; - const res: google.maps.places.AutocompletionRequest= { - input, - ...rest, - }; - - if (sessionToken) { - res.sessionToken = sessionToken; - } - - if (bounds) { - res.bounds = new google.maps.LatLngBounds(...bounds); - } - - if (location) { - res.location = new google.maps.LatLng(location); - } + if (autocompletionRequest) res = { ...res, ...autocompletionRequest }; + if (sessionToken) res.sessionToken = sessionToken; return res; }; + +export default autocompletionRequestBuilder; diff --git a/src/hooks/use-fetch-suggestions.ts b/src/hooks/use-fetch-suggestions.ts index 9fc86c6..6a256b5 100644 --- a/src/hooks/use-fetch-suggestions.ts +++ b/src/hooks/use-fetch-suggestions.ts @@ -1,12 +1,11 @@ import { useDebouncedCallback } from 'use-debounce'; import { Options } from 'react-select'; -import { AutocompletionRequest } from '../types'; import autocompletionRequestBuilder from '../helpers/autocompletion-request-builder'; type CBType = (options: Options) => void; type UseFetchSuggestionsArg = { - autocompletionRequest: AutocompletionRequest; + autocompletionRequest?: Omit; debounce: number; minLengthAutocomplete: number; placesService?: google.maps.places.AutocompleteService; @@ -28,14 +27,12 @@ const useFetchSuggestions = (arg: UseFetchSuggestionsArg): ((value: string, cb: if (!placesService) return cb([]); if (value.length < minLengthAutocomplete) return cb([]); - const autocompletionReq: AutocompletionRequest = { ...autocompletionRequest }; - placesService.getPlacePredictions( - autocompletionRequestBuilder( - autocompletionReq, - value, - withSessionToken && sessionToken, - ), (suggestions) => { + autocompletionRequestBuilder({ + autocompletionRequest, + input: value, + sessionToken: withSessionToken && sessionToken, + }), (suggestions) => { cb((suggestions || []).map(suggestion => ({ label: suggestion.description, value: suggestion }))); }, ); diff --git a/src/types.ts b/src/types.ts index 10626c1..10646c0 100644 --- a/src/types.ts +++ b/src/types.ts @@ -7,20 +7,6 @@ export type GooglePlacesAutocompleteHandle = { refreshSessionToken: () => void; } -export interface LatLng { - lat: number; - lng: number; -} - -export interface AutocompletionRequest { - bounds?: [LatLng, LatLng]; - componentRestrictions?: { country: string | string[] }; - location?: LatLng; - offset?: number; - radius?: number; - types?: string[]; -} - export type Option = { label: string; value: any; @@ -29,7 +15,7 @@ export type Option = { export default interface GooglePlacesAutocompleteProps { apiKey?: string; apiOptions?: Partial; - autocompletionRequest?: AutocompletionRequest; + autocompletionRequest?: Omit; debounce?: number; minLengthAutocomplete?: number; onLoadFailed?: (error: Error) => void; diff --git a/src/utils/geocode-by-lat-lng.ts b/src/utils/geocode-by-lat-lng.ts index 35ba3fd..587087f 100644 --- a/src/utils/geocode-by-lat-lng.ts +++ b/src/utils/geocode-by-lat-lng.ts @@ -1,6 +1,4 @@ -import { LatLng } from '../types'; - -const geocodeByLatLng = (latLng: LatLng): Promise => { +const geocodeByLatLng = (latLng: google.maps.LatLng): Promise => { const geocoder = new window.google.maps.Geocoder(); const { OK } = window.google.maps.GeocoderStatus; diff --git a/src/utils/get-lat-lng.ts b/src/utils/get-lat-lng.ts index 539c0cf..b5a54c1 100644 --- a/src/utils/get-lat-lng.ts +++ b/src/utils/get-lat-lng.ts @@ -1,12 +1,10 @@ -import { LatLng } from '../types'; - -const getLatLng = (result: google.maps.GeocoderResult): Promise => ( +const getLatLng = (result: google.maps.GeocoderResult): Promise => ( new Promise((resolve, reject) => { try { - const latLng = { + const latLng = new google.maps.LatLng({ lat: result.geometry.location.lat(), lng: result.geometry.location.lng(), - }; + }); return resolve(latLng); } catch (e) { return reject(e);