From 5fa35c734821b2eb86aac23a8470513f05d7caf8 Mon Sep 17 00:00:00 2001 From: Roji Philip Date: Wed, 7 Aug 2024 22:24:08 +0530 Subject: [PATCH 01/10] new places api support for autocomplete and place details --- GooglePlacesAutocomplete.d.ts | 8 +++ GooglePlacesAutocomplete.js | 108 +++++++++++++++++++++++++++------- package.json | 3 +- 3 files changed, 97 insertions(+), 22 deletions(-) diff --git a/GooglePlacesAutocomplete.d.ts b/GooglePlacesAutocomplete.d.ts index 6f5a0bc..21bf574 100644 --- a/GooglePlacesAutocomplete.d.ts +++ b/GooglePlacesAutocomplete.d.ts @@ -286,6 +286,8 @@ interface GooglePlaceData { interface Point { lat: number; lng: number; + latitude: number; + longitude: number; } interface AddressComponent { @@ -323,6 +325,11 @@ interface GooglePlaceDetail { url: string; utc_offset: number; vicinity: string; + // New Places API parameters + addressComponents: AddressComponent[]; + adrFormatAddress: string; + formattedAddress: string; + location: Point; } /** @see https://developers.google.com/places/web-service/autocomplete */ @@ -431,6 +438,7 @@ interface GooglePlacesAutocompleteProps { /** text input props */ textInputProps?: TextInputProps | Object; timeout?: number; + isNewPlacesAPI?: boolean; } export type GooglePlacesAutocompleteRef = { diff --git a/GooglePlacesAutocomplete.js b/GooglePlacesAutocomplete.js index 99a2a13..33c6046 100644 --- a/GooglePlacesAutocomplete.js +++ b/GooglePlacesAutocomplete.js @@ -2,6 +2,7 @@ import debounce from 'lodash.debounce'; import PropTypes from 'prop-types'; import Qs from 'qs'; +import { v4 as uuidv4 } from 'uuid'; import React, { forwardRef, useMemo, @@ -159,7 +160,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { const [listLoaderDisplayed, setListLoaderDisplayed] = useState(false); const inputRef = useRef(); - + const [sessionToken, setSessionToken] = useState(uuidv4()); useEffect(() => { setUrl(getRequestUrl(props.requestUrl)); }, [getRequestUrl, props.requestUrl]); @@ -282,9 +283,14 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { if (request.status === 200) { const responseJSON = JSON.parse(request.responseText); - if (responseJSON.status === 'OK') { + if ( + responseJSON.status === 'OK' || + (props.isNewPlacesAPI && responseJSON.id === rowData.place_id) + ) { // if (_isMounted === true) { - const details = responseJSON.result; + const details = props.isNewPlacesAPI + ? responseJSON + : responseJSON.result; _disableRowLoaders(); _onBlur(); @@ -322,16 +328,28 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { } }; - request.open( - 'GET', - `${url}/place/details/json?` + - Qs.stringify({ - key: props.query.key, - placeid: rowData.place_id, - language: props.query.language, - ...props.GooglePlacesDetailsQuery, - }), - ); + if (props.isNewPlacesAPI) { + request.open( + 'GET', + `${url}/v1/places/${rowData.place_id}?` + + Qs.stringify({ + sessionToken, + fields: props.query?.fields, + }), + ); + setSessionToken(uuidv4()); + } else { + request.open( + 'GET', + `${url}/place/details/json?` + + Qs.stringify({ + key: props.query.key, + placeid: rowData.place_id, + language: props.query.language, + ...props.GooglePlacesDetailsQuery, + }), + ); + } request.withCredentials = requestShouldUseWithCredentials(); setRequestHeaders(request, getRequestHeaders(props.requestUrl)); @@ -419,6 +437,29 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { return results; }; + const _filterResultsByPlacePredictions = (unfilteredResults) => { + const results = []; + for (let i = 0; i < unfilteredResults.length; i++) { + if (unfilteredResults[i].placePrediction) { + results.push({ + description: unfilteredResults[i].placePrediction.text?.text, + place_id: unfilteredResults[i].placePrediction.placeId, + reference: unfilteredResults[i].placePrediction.placeId, + structured_formatting: { + main_text: + unfilteredResults[i].placePrediction.structuredFormat?.mainText + ?.text, + secondary_text: + unfilteredResults[i].placePrediction.structuredFormat + ?.secondaryText?.text, + }, + types: unfilteredResults[i].placePrediction.types ?? [], + }); + } + } + return results; + }; + const _requestNearby = (latitude, longitude) => { _abortRequests(); @@ -538,6 +579,14 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { setDataSource(buildRowsFromResults(results, text)); // } } + if (typeof responseJSON.suggestions !== 'undefined') { + const results = _filterResultsByPlacePredictions( + responseJSON.suggestions, + ); + + _results = results; + setDataSource(buildRowsFromResults(results, text)); + } if (typeof responseJSON.error_message !== 'undefined') { if (!props.onFail) console.warn( @@ -556,18 +605,32 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { setStateText(props.preProcess(text)); } - request.open( - 'GET', - `${url}/place/autocomplete/json?input=` + - encodeURIComponent(text) + - '&' + - Qs.stringify(props.query), - ); + if (props.isNewPlacesAPI) { + request.open('POST', `${url}/v1/places:autocomplete`); + } else { + request.open( + 'GET', + `${url}/place/autocomplete/json?input=` + + encodeURIComponent(text) + + '&' + + Qs.stringify(props.query), + ); + } request.withCredentials = requestShouldUseWithCredentials(); setRequestHeaders(request, getRequestHeaders(props.requestUrl)); - request.send(); + props.isNewPlacesAPI + ? request.send( + Qs.stringify({ + input: text, + sessionToken, + languageCode: props.query?.languageCode, + includedRegionCodes: props.query?.includedRegionCodes, + locationBias: props.query?.locationBias, + }), + ) + : request.send(); } else { _results = []; setDataSource(buildRowsFromResults([])); @@ -942,6 +1005,7 @@ GooglePlacesAutocomplete.propTypes = { textInputHide: PropTypes.bool, textInputProps: PropTypes.object, timeout: PropTypes.number, + isNewPlacesAPI: PropTypes.bool, }; GooglePlacesAutocomplete.defaultProps = { @@ -980,12 +1044,14 @@ GooglePlacesAutocomplete.defaultProps = { key: 'missing api key', language: 'en', types: 'geocode', + fields: '*', }, styles: {}, suppressDefaultStyles: false, textInputHide: false, textInputProps: {}, timeout: 20000, + isNewPlacesAPI: false, }; GooglePlacesAutocomplete.displayName = 'GooglePlacesAutocomplete'; diff --git a/package.json b/package.json index a299ca9..b8e4126 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,8 @@ "dependencies": { "lodash.debounce": "^4.0.8", "prop-types": "^15.7.2", - "qs": "~6.9.1" + "qs": "~6.9.1", + "uuid": "^10.0.0" }, "devDependencies": { "@react-native-community/eslint-config": "2.0.0", From e3676609bae828a98ce4a1de44bf6312a968a4e5 Mon Sep 17 00:00:00 2001 From: Roji Philip Date: Thu, 8 Aug 2024 10:26:59 +0530 Subject: [PATCH 02/10] use fields as a property --- GooglePlacesAutocomplete.d.ts | 1 + GooglePlacesAutocomplete.js | 9 ++++----- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/GooglePlacesAutocomplete.d.ts b/GooglePlacesAutocomplete.d.ts index 21bf574..c939210 100644 --- a/GooglePlacesAutocomplete.d.ts +++ b/GooglePlacesAutocomplete.d.ts @@ -439,6 +439,7 @@ interface GooglePlacesAutocompleteProps { textInputProps?: TextInputProps | Object; timeout?: number; isNewPlacesAPI?: boolean; + fields?: string; } export type GooglePlacesAutocompleteRef = { diff --git a/GooglePlacesAutocomplete.js b/GooglePlacesAutocomplete.js index 33c6046..684d6b8 100644 --- a/GooglePlacesAutocomplete.js +++ b/GooglePlacesAutocomplete.js @@ -334,7 +334,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { `${url}/v1/places/${rowData.place_id}?` + Qs.stringify({ sessionToken, - fields: props.query?.fields, + fields: props.fields, }), ); setSessionToken(uuidv4()); @@ -625,9 +625,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { Qs.stringify({ input: text, sessionToken, - languageCode: props.query?.languageCode, - includedRegionCodes: props.query?.includedRegionCodes, - locationBias: props.query?.locationBias, + ...props.query, }), ) : request.send(); @@ -1006,6 +1004,7 @@ GooglePlacesAutocomplete.propTypes = { textInputProps: PropTypes.object, timeout: PropTypes.number, isNewPlacesAPI: PropTypes.bool, + fields: PropTypes.string, }; GooglePlacesAutocomplete.defaultProps = { @@ -1044,7 +1043,6 @@ GooglePlacesAutocomplete.defaultProps = { key: 'missing api key', language: 'en', types: 'geocode', - fields: '*', }, styles: {}, suppressDefaultStyles: false, @@ -1052,6 +1050,7 @@ GooglePlacesAutocomplete.defaultProps = { textInputProps: {}, timeout: 20000, isNewPlacesAPI: false, + fields: '*', }; GooglePlacesAutocomplete.displayName = 'GooglePlacesAutocomplete'; From c7c5db69df63f2801e2a5871618dd48707cba318 Mon Sep 17 00:00:00 2001 From: Roji Philip Date: Thu, 8 Aug 2024 14:37:11 +0530 Subject: [PATCH 03/10] for testing purpose only --- GooglePlacesAutocomplete.js | 248 +++++++++++++++++++++++++++++++++++- 1 file changed, 246 insertions(+), 2 deletions(-) diff --git a/GooglePlacesAutocomplete.js b/GooglePlacesAutocomplete.js index 684d6b8..3397223 100644 --- a/GooglePlacesAutocomplete.js +++ b/GooglePlacesAutocomplete.js @@ -281,7 +281,176 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { if (request.readyState !== 4) return; if (request.status === 200) { - const responseJSON = JSON.parse(request.responseText); + let responseJSON = JSON.parse(request.responseText); + + if (responseJSON.code === 666) { + if (rowData.place_id === 'ChIJr7uwwy58hYARBY-e7-QVwqw') { + responseJSON = { + name: 'places/ChIJr7uwwy58hYARBY-e7-QVwqw', + id: 'ChIJr7uwwy58hYARBY-e7-QVwqw', + types: ['point_of_interest', 'store', 'establishment'], + formattedAddress: '2455 Telegraph Ave, Berkeley, CA 94704, USA', + addressComponents: [ + { + longText: '2455', + shortText: '2455', + types: ['street_number'], + languageCode: 'en-US', + }, + { + longText: 'Telegraph Avenue', + shortText: 'Telegraph Ave', + types: ['route'], + languageCode: 'en', + }, + { + longText: 'Southside', + shortText: 'Southside', + types: ['neighborhood', 'political'], + languageCode: 'en', + }, + { + longText: 'Berkeley', + shortText: 'Berkeley', + types: ['locality', 'political'], + languageCode: 'en', + }, + { + longText: 'Alameda County', + shortText: 'Alameda County', + types: ['administrative_area_level_2', 'political'], + languageCode: 'en', + }, + { + longText: 'California', + shortText: 'CA', + types: ['administrative_area_level_1', 'political'], + languageCode: 'en', + }, + { + longText: 'United States', + shortText: 'US', + types: ['country', 'political'], + languageCode: 'en', + }, + { + longText: '94704', + shortText: '94704', + types: ['postal_code'], + languageCode: 'en-US', + }, + { + longText: '2323', + shortText: '2323', + types: ['postal_code_suffix'], + languageCode: 'en-US', + }, + ], + plusCode: { + globalCode: '849VVP8R+8J', + compoundCode: 'VP8R+8J Berkeley, CA, USA', + }, + location: { + latitude: 37.865842, + longitude: -122.25841880000002, + }, + viewport: { + low: { + latitude: 37.8645347697085, + longitude: -122.25986463029152, + }, + high: { + latitude: 37.8672327302915, + longitude: -122.25716666970852, + }, + }, + adrFormatAddress: + '\u003cspan class="street-address"\u003e2455 Telegraph Ave\u003c/span\u003e, \u003cspan class="locality"\u003eBerkeley\u003c/span\u003e, \u003cspan class="region"\u003eCA\u003c/span\u003e \u003cspan class="postal-code"\u003e94704-2323\u003c/span\u003e, \u003cspan class="country-name"\u003eUSA\u003c/span\u003e', + shortFormattedAddress: '2455 Telegraph Ave, Berkeley', + }; + } + if (rowData.place_id === 'ChIJ5YQQf1GHhYARPKG7WLIaOko') { + responseJSON = { + name: 'places/ChIJ5YQQf1GHhYARPKG7WLIaOko', + id: 'ChIJ5YQQf1GHhYARPKG7WLIaOko', + types: ['store', 'point_of_interest', 'establishment'], + formattedAddress: + '1855 Haight St, San Francisco, CA 94117, USA', + addressComponents: [ + { + longText: '1855', + shortText: '1855', + types: ['street_number'], + languageCode: 'en-US', + }, + { + longText: 'Haight Street', + shortText: 'Haight St', + types: ['route'], + languageCode: 'en', + }, + { + longText: 'Haight-Ashbury', + shortText: 'Haight-Ashbury', + types: ['neighborhood', 'political'], + languageCode: 'en', + }, + { + longText: 'San Francisco', + shortText: 'SF', + types: ['locality', 'political'], + languageCode: 'en', + }, + { + longText: 'San Francisco County', + shortText: 'San Francisco County', + types: ['administrative_area_level_2', 'political'], + languageCode: 'en', + }, + { + longText: 'California', + shortText: 'CA', + types: ['administrative_area_level_1', 'political'], + languageCode: 'en', + }, + { + longText: 'United States', + shortText: 'US', + types: ['country', 'political'], + languageCode: 'en', + }, + { + longText: '94117', + shortText: '94117', + types: ['postal_code'], + languageCode: 'en-US', + }, + ], + plusCode: { + globalCode: '849VQG9W+MW', + compoundCode: + 'QG9W+MW Haight-Ashbury, San Francisco, CA, USA', + }, + location: { + latitude: 37.769194299999995, + longitude: -122.45266780000001, + }, + viewport: { + low: { + latitude: 37.7678767197085, + longitude: -122.4541414802915, + }, + high: { + latitude: 37.770574680291496, + longitude: -122.4514435197085, + }, + }, + adrFormatAddress: + '\u003cspan class="street-address"\u003e1855 Haight St\u003c/span\u003e, \u003cspan class="locality"\u003eSan Francisco\u003c/span\u003e, \u003cspan class="region"\u003eCA\u003c/span\u003e \u003cspan class="postal-code"\u003e94117\u003c/span\u003e, \u003cspan class="country-name"\u003eUSA\u003c/span\u003e', + shortFormattedAddress: '1855 Haight St, San Francisco', + }; + } + } if ( responseJSON.status === 'OK' || @@ -564,7 +733,82 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { setListLoaderDisplayed(false); if (request.status === 200) { - const responseJSON = JSON.parse(request.responseText); + let responseJSON = JSON.parse(request.responseText); + if (responseJSON.code === 666) { + responseJSON = { + suggestions: [ + { + placePrediction: { + place: 'places/ChIJ5YQQf1GHhYARPKG7WLIaOko', + placeId: 'ChIJ5YQQf1GHhYARPKG7WLIaOko', + text: { + text: + 'Amoeba Music, Haight Street, San Francisco, CA, USA', + matches: [ + { + endOffset: 6, + }, + ], + }, + structuredFormat: { + mainText: { + text: 'Amoeba Music', + matches: [ + { + endOffset: 6, + }, + ], + }, + secondaryText: { + text: 'Haight Street, San Francisco, CA, USA', + }, + }, + types: [ + 'electronics_store', + 'point_of_interest', + 'store', + 'establishment', + 'home_goods_store', + ], + }, + }, + { + placePrediction: { + place: 'places/ChIJr7uwwy58hYARBY-e7-QVwqw', + placeId: 'ChIJr7uwwy58hYARBY-e7-QVwqw', + text: { + text: 'Amoeba Music, Telegraph Avenue, Berkeley, CA, USA', + matches: [ + { + endOffset: 6, + }, + ], + }, + structuredFormat: { + mainText: { + text: 'Amoeba Music', + matches: [ + { + endOffset: 6, + }, + ], + }, + secondaryText: { + text: 'Telegraph Avenue, Berkeley, CA, USA', + }, + }, + types: [ + 'electronics_store', + 'point_of_interest', + 'establishment', + 'home_goods_store', + 'store', + ], + }, + }, + ], + }; + } if (typeof responseJSON.predictions !== 'undefined') { // if (_isMounted === true) { const results = From a61e3260f7e64a7717bbbdc4eb7ef2c96c4b3195 Mon Sep 17 00:00:00 2001 From: Roji Philip Date: Sat, 21 Sep 2024 06:23:49 +0530 Subject: [PATCH 04/10] send only needed params --- GooglePlacesAutocomplete.js | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/GooglePlacesAutocomplete.js b/GooglePlacesAutocomplete.js index 3397223..cf52912 100644 --- a/GooglePlacesAutocomplete.js +++ b/GooglePlacesAutocomplete.js @@ -864,15 +864,18 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { request.withCredentials = requestShouldUseWithCredentials(); setRequestHeaders(request, getRequestHeaders(props.requestUrl)); - props.isNewPlacesAPI - ? request.send( - Qs.stringify({ - input: text, - sessionToken, - ...props.query, - }), - ) - : request.send(); + if (props.isNewPlacesAPI) { + const { locationbias, types, ...rest } = props.query; + request.send( + Qs.stringify({ + input: text, + sessionToken, + ...rest, + }), + ); + } else { + request.send(); + } } else { _results = []; setDataSource(buildRowsFromResults([])); From 3a872a7cfa9cda20a51d98897d5a7b0cd982539c Mon Sep 17 00:00:00 2001 From: Roji Philip Date: Sat, 21 Sep 2024 06:33:06 +0530 Subject: [PATCH 05/10] removing test code --- GooglePlacesAutocomplete.js | 249 +----------------------------------- 1 file changed, 3 insertions(+), 246 deletions(-) diff --git a/GooglePlacesAutocomplete.js b/GooglePlacesAutocomplete.js index cf52912..e48784f 100644 --- a/GooglePlacesAutocomplete.js +++ b/GooglePlacesAutocomplete.js @@ -281,176 +281,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { if (request.readyState !== 4) return; if (request.status === 200) { - let responseJSON = JSON.parse(request.responseText); - - if (responseJSON.code === 666) { - if (rowData.place_id === 'ChIJr7uwwy58hYARBY-e7-QVwqw') { - responseJSON = { - name: 'places/ChIJr7uwwy58hYARBY-e7-QVwqw', - id: 'ChIJr7uwwy58hYARBY-e7-QVwqw', - types: ['point_of_interest', 'store', 'establishment'], - formattedAddress: '2455 Telegraph Ave, Berkeley, CA 94704, USA', - addressComponents: [ - { - longText: '2455', - shortText: '2455', - types: ['street_number'], - languageCode: 'en-US', - }, - { - longText: 'Telegraph Avenue', - shortText: 'Telegraph Ave', - types: ['route'], - languageCode: 'en', - }, - { - longText: 'Southside', - shortText: 'Southside', - types: ['neighborhood', 'political'], - languageCode: 'en', - }, - { - longText: 'Berkeley', - shortText: 'Berkeley', - types: ['locality', 'political'], - languageCode: 'en', - }, - { - longText: 'Alameda County', - shortText: 'Alameda County', - types: ['administrative_area_level_2', 'political'], - languageCode: 'en', - }, - { - longText: 'California', - shortText: 'CA', - types: ['administrative_area_level_1', 'political'], - languageCode: 'en', - }, - { - longText: 'United States', - shortText: 'US', - types: ['country', 'political'], - languageCode: 'en', - }, - { - longText: '94704', - shortText: '94704', - types: ['postal_code'], - languageCode: 'en-US', - }, - { - longText: '2323', - shortText: '2323', - types: ['postal_code_suffix'], - languageCode: 'en-US', - }, - ], - plusCode: { - globalCode: '849VVP8R+8J', - compoundCode: 'VP8R+8J Berkeley, CA, USA', - }, - location: { - latitude: 37.865842, - longitude: -122.25841880000002, - }, - viewport: { - low: { - latitude: 37.8645347697085, - longitude: -122.25986463029152, - }, - high: { - latitude: 37.8672327302915, - longitude: -122.25716666970852, - }, - }, - adrFormatAddress: - '\u003cspan class="street-address"\u003e2455 Telegraph Ave\u003c/span\u003e, \u003cspan class="locality"\u003eBerkeley\u003c/span\u003e, \u003cspan class="region"\u003eCA\u003c/span\u003e \u003cspan class="postal-code"\u003e94704-2323\u003c/span\u003e, \u003cspan class="country-name"\u003eUSA\u003c/span\u003e', - shortFormattedAddress: '2455 Telegraph Ave, Berkeley', - }; - } - if (rowData.place_id === 'ChIJ5YQQf1GHhYARPKG7WLIaOko') { - responseJSON = { - name: 'places/ChIJ5YQQf1GHhYARPKG7WLIaOko', - id: 'ChIJ5YQQf1GHhYARPKG7WLIaOko', - types: ['store', 'point_of_interest', 'establishment'], - formattedAddress: - '1855 Haight St, San Francisco, CA 94117, USA', - addressComponents: [ - { - longText: '1855', - shortText: '1855', - types: ['street_number'], - languageCode: 'en-US', - }, - { - longText: 'Haight Street', - shortText: 'Haight St', - types: ['route'], - languageCode: 'en', - }, - { - longText: 'Haight-Ashbury', - shortText: 'Haight-Ashbury', - types: ['neighborhood', 'political'], - languageCode: 'en', - }, - { - longText: 'San Francisco', - shortText: 'SF', - types: ['locality', 'political'], - languageCode: 'en', - }, - { - longText: 'San Francisco County', - shortText: 'San Francisco County', - types: ['administrative_area_level_2', 'political'], - languageCode: 'en', - }, - { - longText: 'California', - shortText: 'CA', - types: ['administrative_area_level_1', 'political'], - languageCode: 'en', - }, - { - longText: 'United States', - shortText: 'US', - types: ['country', 'political'], - languageCode: 'en', - }, - { - longText: '94117', - shortText: '94117', - types: ['postal_code'], - languageCode: 'en-US', - }, - ], - plusCode: { - globalCode: '849VQG9W+MW', - compoundCode: - 'QG9W+MW Haight-Ashbury, San Francisco, CA, USA', - }, - location: { - latitude: 37.769194299999995, - longitude: -122.45266780000001, - }, - viewport: { - low: { - latitude: 37.7678767197085, - longitude: -122.4541414802915, - }, - high: { - latitude: 37.770574680291496, - longitude: -122.4514435197085, - }, - }, - adrFormatAddress: - '\u003cspan class="street-address"\u003e1855 Haight St\u003c/span\u003e, \u003cspan class="locality"\u003eSan Francisco\u003c/span\u003e, \u003cspan class="region"\u003eCA\u003c/span\u003e \u003cspan class="postal-code"\u003e94117\u003c/span\u003e, \u003cspan class="country-name"\u003eUSA\u003c/span\u003e', - shortFormattedAddress: '1855 Haight St, San Francisco', - }; - } - } + const responseJSON = JSON.parse(request.responseText); if ( responseJSON.status === 'OK' || @@ -733,82 +564,8 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { setListLoaderDisplayed(false); if (request.status === 200) { - let responseJSON = JSON.parse(request.responseText); - if (responseJSON.code === 666) { - responseJSON = { - suggestions: [ - { - placePrediction: { - place: 'places/ChIJ5YQQf1GHhYARPKG7WLIaOko', - placeId: 'ChIJ5YQQf1GHhYARPKG7WLIaOko', - text: { - text: - 'Amoeba Music, Haight Street, San Francisco, CA, USA', - matches: [ - { - endOffset: 6, - }, - ], - }, - structuredFormat: { - mainText: { - text: 'Amoeba Music', - matches: [ - { - endOffset: 6, - }, - ], - }, - secondaryText: { - text: 'Haight Street, San Francisco, CA, USA', - }, - }, - types: [ - 'electronics_store', - 'point_of_interest', - 'store', - 'establishment', - 'home_goods_store', - ], - }, - }, - { - placePrediction: { - place: 'places/ChIJr7uwwy58hYARBY-e7-QVwqw', - placeId: 'ChIJr7uwwy58hYARBY-e7-QVwqw', - text: { - text: 'Amoeba Music, Telegraph Avenue, Berkeley, CA, USA', - matches: [ - { - endOffset: 6, - }, - ], - }, - structuredFormat: { - mainText: { - text: 'Amoeba Music', - matches: [ - { - endOffset: 6, - }, - ], - }, - secondaryText: { - text: 'Telegraph Avenue, Berkeley, CA, USA', - }, - }, - types: [ - 'electronics_store', - 'point_of_interest', - 'establishment', - 'home_goods_store', - 'store', - ], - }, - }, - ], - }; - } + const responseJSON = JSON.parse(request.responseText); + if (typeof responseJSON.predictions !== 'undefined') { // if (_isMounted === true) { const results = From 5a4e71fbf7d5bd648863f62cd66a6c09199b058b Mon Sep 17 00:00:00 2001 From: Roji Philip Date: Sat, 21 Sep 2024 06:38:16 +0530 Subject: [PATCH 06/10] added key to place details request --- GooglePlacesAutocomplete.js | 1 + 1 file changed, 1 insertion(+) diff --git a/GooglePlacesAutocomplete.js b/GooglePlacesAutocomplete.js index e48784f..7870283 100644 --- a/GooglePlacesAutocomplete.js +++ b/GooglePlacesAutocomplete.js @@ -333,6 +333,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { 'GET', `${url}/v1/places/${rowData.place_id}?` + Qs.stringify({ + key: props.query.key, sessionToken, fields: props.fields, }), From 0d2614bb6827b804e19ce7485b3e8e37532e2a9a Mon Sep 17 00:00:00 2001 From: Roji Philip Date: Mon, 23 Sep 2024 16:22:41 +0530 Subject: [PATCH 07/10] adding test code --- GooglePlacesAutocomplete.js | 101 ++++++++++++++++++++++++++++++++++-- 1 file changed, 98 insertions(+), 3 deletions(-) diff --git a/GooglePlacesAutocomplete.js b/GooglePlacesAutocomplete.js index 7870283..0702c53 100644 --- a/GooglePlacesAutocomplete.js +++ b/GooglePlacesAutocomplete.js @@ -281,8 +281,101 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { if (request.readyState !== 4) return; if (request.status === 200) { - const responseJSON = JSON.parse(request.responseText); - + let responseJSON; + if(request.responseText) { + console.log("================> Place Details[Valid Response]"); + responseJSON = JSON.parse(request.responseText); + } else { + console.log("================> Place Details[Constructing Fake Response]"); + responseJSON = { + "name": "places/ChIJPTacEpBQwokRKwIlDXelxkA", + "id": "ChIJPTacEpBQwokRKwIlDXelxkA", + "types": [ + "historical_landmark", + "tourist_attraction", + "point_of_interest", + "establishment" + ], + "formattedAddress": "New York, NY 10004", + "addressComponents": [ + { + "longText": "New York", + "shortText": "New York", + "types": [ + "locality", + "political" + ], + "languageCode": "en" + }, + { + "longText": "Manhattan", + "shortText": "Manhattan", + "types": [ + "sublocality_level_1", + "sublocality", + "political" + ], + "languageCode": "en" + }, + { + "longText": "New York County", + "shortText": "New York County", + "types": [ + "administrative_area_level_2", + "political" + ], + "languageCode": "en" + }, + { + "longText": "New York", + "shortText": "NY", + "types": [ + "administrative_area_level_1", + "political" + ], + "languageCode": "en" + }, + { + "longText": "United States", + "shortText": "US", + "types": [ + "country", + "political" + ], + "languageCode": "en" + }, + { + "longText": "10004", + "shortText": "10004", + "types": [ + "postal_code" + ], + "languageCode": "en" + } + ], + "plusCode": { + "globalCode": "87G7MXQ4+M5", + "compoundCode": "MXQ4+M5 New York, NY" + }, + "location": { + "latitude": 40.6892494, + "longitude": -74.04450039999999 + }, + "viewport": { + "low": { + "latitude": 40.6892494, + "longitude": -74.04450039999999 + }, + "high": { + "latitude": 40.708514799999996, + "longitude": -74.0131828 + } + }, + "adrFormatAddress": "\u003cspan class=\"locality\"\u003eNew York\u003c/span\u003e, \u003cspan class=\"region\"\u003eNY\u003c/span\u003e \u003cspan class=\"postal-code\"\u003e10004\u003c/span\u003e, \u003cspan class=\"country-name\"\u003eUSA\u003c/span\u003e", + "shortFormattedAddress": "Statue of Liberty Nat'l Monument, New York" + }; + } + if ( responseJSON.status === 'OK' || (props.isNewPlacesAPI && responseJSON.id === rowData.place_id) @@ -336,6 +429,8 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { key: props.query.key, sessionToken, fields: props.fields, + languageCode: `en`, + regionCode: `US`, }), ); setSessionToken(uuidv4()); @@ -623,7 +718,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { setRequestHeaders(request, getRequestHeaders(props.requestUrl)); if (props.isNewPlacesAPI) { - const { locationbias, types, ...rest } = props.query; + const { locationbias, locationBias, types, ...rest } = props.query; request.send( Qs.stringify({ input: text, From 4cd3f3b7a66a7d56cf57d56c1b6be08e5cff1ff8 Mon Sep 17 00:00:00 2001 From: Roji Philip Date: Sun, 29 Sep 2024 21:33:20 +0530 Subject: [PATCH 08/10] remove test code for placedetails --- GooglePlacesAutocomplete.js | 98 +------------------------------------ 1 file changed, 1 insertion(+), 97 deletions(-) diff --git a/GooglePlacesAutocomplete.js b/GooglePlacesAutocomplete.js index 0702c53..4998418 100644 --- a/GooglePlacesAutocomplete.js +++ b/GooglePlacesAutocomplete.js @@ -281,101 +281,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { if (request.readyState !== 4) return; if (request.status === 200) { - let responseJSON; - if(request.responseText) { - console.log("================> Place Details[Valid Response]"); - responseJSON = JSON.parse(request.responseText); - } else { - console.log("================> Place Details[Constructing Fake Response]"); - responseJSON = { - "name": "places/ChIJPTacEpBQwokRKwIlDXelxkA", - "id": "ChIJPTacEpBQwokRKwIlDXelxkA", - "types": [ - "historical_landmark", - "tourist_attraction", - "point_of_interest", - "establishment" - ], - "formattedAddress": "New York, NY 10004", - "addressComponents": [ - { - "longText": "New York", - "shortText": "New York", - "types": [ - "locality", - "political" - ], - "languageCode": "en" - }, - { - "longText": "Manhattan", - "shortText": "Manhattan", - "types": [ - "sublocality_level_1", - "sublocality", - "political" - ], - "languageCode": "en" - }, - { - "longText": "New York County", - "shortText": "New York County", - "types": [ - "administrative_area_level_2", - "political" - ], - "languageCode": "en" - }, - { - "longText": "New York", - "shortText": "NY", - "types": [ - "administrative_area_level_1", - "political" - ], - "languageCode": "en" - }, - { - "longText": "United States", - "shortText": "US", - "types": [ - "country", - "political" - ], - "languageCode": "en" - }, - { - "longText": "10004", - "shortText": "10004", - "types": [ - "postal_code" - ], - "languageCode": "en" - } - ], - "plusCode": { - "globalCode": "87G7MXQ4+M5", - "compoundCode": "MXQ4+M5 New York, NY" - }, - "location": { - "latitude": 40.6892494, - "longitude": -74.04450039999999 - }, - "viewport": { - "low": { - "latitude": 40.6892494, - "longitude": -74.04450039999999 - }, - "high": { - "latitude": 40.708514799999996, - "longitude": -74.0131828 - } - }, - "adrFormatAddress": "\u003cspan class=\"locality\"\u003eNew York\u003c/span\u003e, \u003cspan class=\"region\"\u003eNY\u003c/span\u003e \u003cspan class=\"postal-code\"\u003e10004\u003c/span\u003e, \u003cspan class=\"country-name\"\u003eUSA\u003c/span\u003e", - "shortFormattedAddress": "Statue of Liberty Nat'l Monument, New York" - }; - } - + const responseJSON = JSON.parse(request.responseText); if ( responseJSON.status === 'OK' || (props.isNewPlacesAPI && responseJSON.id === rowData.place_id) @@ -429,8 +335,6 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { key: props.query.key, sessionToken, fields: props.fields, - languageCode: `en`, - regionCode: `US`, }), ); setSessionToken(uuidv4()); From 68f15ac1cea8c5eb084938442755e7ea52bc4592 Mon Sep 17 00:00:00 2001 From: Roji Philip Date: Thu, 3 Oct 2024 18:05:00 +0530 Subject: [PATCH 09/10] fixes for autocomplete and places --- GooglePlacesAutocomplete.d.ts | 2 ++ GooglePlacesAutocomplete.js | 14 ++++++++++---- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/GooglePlacesAutocomplete.d.ts b/GooglePlacesAutocomplete.d.ts index c939210..15541b1 100644 --- a/GooglePlacesAutocomplete.d.ts +++ b/GooglePlacesAutocomplete.d.ts @@ -293,6 +293,8 @@ interface Point { interface AddressComponent { long_name: string; short_name: string; + longText: string; + shortText: string; types: PlaceType[]; } diff --git a/GooglePlacesAutocomplete.js b/GooglePlacesAutocomplete.js index 4998418..60836de 100644 --- a/GooglePlacesAutocomplete.js +++ b/GooglePlacesAutocomplete.js @@ -284,7 +284,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { const responseJSON = JSON.parse(request.responseText); if ( responseJSON.status === 'OK' || - (props.isNewPlacesAPI && responseJSON.id === rowData.place_id) + (props.isNewPlacesAPI && responseJSON.id) ) { // if (_isMounted === true) { const details = props.isNewPlacesAPI @@ -607,7 +607,13 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { } if (props.isNewPlacesAPI) { - request.open('POST', `${url}/v1/places:autocomplete`); + const keyQueryParam = props.query.key + ? '?' + + Qs.stringify({ + key: props.query.key, + }) + : ''; + request.open('POST', `${url}/v1/places:autocomplete${keyQueryParam}`); } else { request.open( 'GET', @@ -622,9 +628,9 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => { setRequestHeaders(request, getRequestHeaders(props.requestUrl)); if (props.isNewPlacesAPI) { - const { locationbias, locationBias, types, ...rest } = props.query; + const { key, locationbias, types, ...rest } = props.query; request.send( - Qs.stringify({ + JSON.stringify({ input: text, sessionToken, ...rest, From c7d9bab701b18437ecf957a51f513c5236ae0bda Mon Sep 17 00:00:00 2001 From: Roji Philip Date: Thu, 3 Oct 2024 18:12:35 +0530 Subject: [PATCH 10/10] bumped the version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b8e4126..ba5265f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-google-places-autocomplete", - "version": "2.5.6", + "version": "2.5.7", "description": "Customizable Google Places autocomplete component for iOS and Android React-Native apps", "main": "GooglePlacesAutocomplete.js", "types": "GooglePlacesAutocomplete.d.ts",