Add places services into usePlacesAutocompleteService and expose sessionToken to outside

ErrorPro · ErrorPro · commit d06b9f14d277 · 2021-06-02T21:20:42.000+02:00
diff --git a/README.md b/README.md
@@ -116,8 +116,8 @@ It has only one config argument which has propperties: `apiKey`, `ref`, `onPlace
 
 This hook returns object with only two properties:
 
-  - `ref` - is a react ref which you can assign to any input you would like.
-  - `autocompleteRef` - is the [autocomplete](https://developers.google.com/maps/documentation/javascript/reference/places-widget#Autocomplete) instance
+- `ref` - is a react ref which you can assign to any input you would like.
+- `autocompleteRef` - is the [autocomplete](https://developers.google.com/maps/documentation/javascript/reference/places-widget#Autocomplete) instance
 
 ## usePlacesAutocompleteService
 
@@ -130,10 +130,25 @@ This is an initial implementation of debounced google places autocomplete servic
 import usePlacesService from "react-google-autocomplete/lib/usePlacesAutocompleteService";
 
 export default () => {
-  const { placePredictions, getPlacePredictions, isPlacePredictionsLoading } =
-    usePlacesService({
-      apiKey: process.env.REACT_APP_GOOGLE,
-    });
+  const {
+    placesService,
+    placePredictions,
+    getPlacePredictions,
+    isPlacePredictionsLoading,
+  } = usePlacesService({
+    apiKey: process.env.REACT_APP_GOOGLE,
+  });
+
+  useEffect(() => {
+    // fetch place details for the first element in placePredictions array
+    if (placePredictions.length)
+      service.placesService?.getDetails(
+        {
+          placeId: placePredictions[0].place_id,
+        },
+        (placeDetails) => savePlaceDetailsToState(placeDetails)
+      );
+  }, [placePredictions]);
 
   return (
     <>
@@ -169,6 +184,8 @@ The hook has only one config argument.
 The hook returns an object with properties:
 
 - `placesAutocompleteService`: Instance of [AutocompleteService](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompleteService)
+- `placesService`: Instance of [PlacesService](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlacesService)
+- `autocompleteSessionToken`: Instance of [AutocompleteSessionToken](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompleteSessionToken). You can use this to [group several requests into a single session](https://developers.google.com/maps/documentation/places/web-service/session-tokens)
 - `placePredictions`: an array of [AutocompletePrediction](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompleteResponse)
 - `isPlacePredictionsLoading`: sets to true when a `getPlacePredictions` request is being sent and not yet resolved.
 - `getPlacePredictions: (opt: `[Options](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest)`): void`: a function which you call whenever you want to request places predictions. Takes one [argument](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompleteResponse).
diff --git a/lib/usePlacesAutocompleteService.d.ts b/lib/usePlacesAutocompleteService.d.ts
@@ -8,6 +8,10 @@ interface usePlacesAutocompleteServiceConfig {
 }
 
 interface usePlacesAutocompleteServiceResponse {
+  placesService: google.maps.places.PlacesService | null;
+  autocompleteSessionToken:
+    | google.maps.places.AutocompleteSessionToken
+    | undefined;
   placesAutocompleteService: google.maps.places.AutocompleteService | null;
   placePredictions: google.maps.places.AutocompletePrediction[];
   isPlacePredictionsLoading: boolean;
diff --git a/lib/usePlacesAutocompleteService.js b/lib/usePlacesAutocompleteService.js
@@ -43,7 +43,7 @@ function usePlacesAutocompleteService(_ref) {
       options = _ref$options === void 0 ? {} : _ref$options,
       sessionToken = _ref.sessionToken,
       language = _ref.language;
-  var languageQueryParam = language ? "&language=".concat(language) : '';
+  var languageQueryParam = language ? "&language=".concat(language) : "";
   var googleMapsScriptUrl = "".concat(googleMapsScriptBaseUrl, "?key=").concat(apiKey, "&libraries=places").concat(languageQueryParam);
 
   var _useState = (0, _react.useState)([]),
@@ -77,22 +77,23 @@ function usePlacesAutocompleteService(_ref) {
       setQueryPredictions = _useState12[1];
 
   var placesAutocompleteService = (0, _react.useRef)(null);
+  var placesService = (0, _react.useRef)(null);
   var autocompleteSession = (0, _react.useRef)(null);
   var handleLoadScript = (0, _react.useCallback)(function () {
     return (0, _utils.loadGoogleMapScript)(googleMapsScriptBaseUrl, googleMapsScriptUrl);
   }, [googleMapsScriptBaseUrl, googleMapsScriptUrl]);
   var debouncedPlacePredictions = (0, _react.useCallback)((0, _lodash.default)(function (optionsArg) {
-    if (placesAutocompleteService.current && optionsArg.input) placesAutocompleteService.current.getPlacePredictions(_objectSpread(_objectSpread(_objectSpread({}, options), optionsArg), sessionToken && autocompleteSession.current ? {
+    if (placesAutocompleteService.current && optionsArg.input) placesAutocompleteService.current.getPlacePredictions(_objectSpread(_objectSpread(_objectSpread({}, sessionToken && autocompleteSession.current ? {
       sessionToken: autocompleteSession.current
-    } : {}), function (r) {
+    } : {}), options), optionsArg), function (r) {
       setIsPlacePredsLoading(false);
       setPlacePredictions(r || []);
     });
   }, debounce), [debounce]);
   var debouncedQueryPredictions = (0, _react.useCallback)((0, _lodash.default)(function (optionsArg) {
-    if (placesAutocompleteService.current && optionsArg.input) placesAutocompleteService.current.getQueryPredictions(_objectSpread(_objectSpread(_objectSpread({}, options), optionsArg), sessionToken && autocompleteSession.current ? {
+    if (placesAutocompleteService.current && optionsArg.input) placesAutocompleteService.current.getQueryPredictions(_objectSpread(_objectSpread(_objectSpread({}, sessionToken && autocompleteSession.current ? {
       sessionToken: autocompleteSession.current
-    } : {}), function (r) {
+    } : {}), options), optionsArg), function (r) {
       setIsQueryPredsLoading(false);
       setQueryPredictions(r || []);
     });
@@ -104,7 +105,9 @@ function usePlacesAutocompleteService(_ref) {
       // eslint-disable-next-line no-undef
       if (!google) return console.error("Google has not been found. Make sure your provide apiKey prop."); // eslint-disable-next-line no-undef
 
-      placesAutocompleteService.current = new google.maps.places.AutocompleteService();
+      placesAutocompleteService.current = new google.maps.places.AutocompleteService(); // eslint-disable-next-line no-undef
+
+      placesService.current = new google.maps.places.PlacesService(document.createElement("div"));
       if (sessionToken) autocompleteSession.current = new google.maps.places.AutocompleteSessionToken();
     };
 
@@ -117,6 +120,8 @@ function usePlacesAutocompleteService(_ref) {
     }
   }, []);
   return {
+    placesService: placesService.current,
+    autocompleteSessionToken: autocompleteSession.current,
     placesAutocompleteService: placesAutocompleteService.current,
     placePredictions: placeInputValue ? placePredictions : [],
     isPlacePredictionsLoading: isPlacePredsLoading,
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-google-autocomplete",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "description": "React component for google autocomplete.",
   "main": "index.js",
   "types": "index.d.ts",
diff --git a/src/usePlacesAutocompleteService.d.ts b/src/usePlacesAutocompleteService.d.ts
@@ -8,6 +8,10 @@ interface usePlacesAutocompleteServiceConfig {
 }
 
 interface usePlacesAutocompleteServiceResponse {
+  placesService: google.maps.places.PlacesService | null;
+  autocompleteSessionToken:
+    | google.maps.places.AutocompleteSessionToken
+    | undefined;
   placesAutocompleteService: google.maps.places.AutocompleteService | null;
   placePredictions: google.maps.places.AutocompletePrediction[];
   isPlacePredictionsLoading: boolean;
diff --git a/src/usePlacesAutocompleteService.js b/src/usePlacesAutocompleteService.js
@@ -12,7 +12,7 @@ export default function usePlacesAutocompleteService({
   sessionToken,
   language,
 }) {
-  const languageQueryParam = language ? `&language=${language}` : '';
+  const languageQueryParam = language ? `&language=${language}` : "";
   const googleMapsScriptUrl = `${googleMapsScriptBaseUrl}?key=${apiKey}&libraries=places${languageQueryParam}`;
   const [placePredictions, setPlacePredictions] = useState([]);
   const [isPlacePredsLoading, setIsPlacePredsLoading] = useState(false);
@@ -21,6 +21,7 @@ export default function usePlacesAutocompleteService({
   const [queryInputValue, setQueryInputValue] = useState(false);
   const [queryPredictions, setQueryPredictions] = useState([]);
   const placesAutocompleteService = useRef(null);
+  const placesService = useRef(null);
   const autocompleteSession = useRef(null);
   const handleLoadScript = useCallback(
     () => loadGoogleMapScript(googleMapsScriptBaseUrl, googleMapsScriptUrl),
@@ -32,11 +33,11 @@ export default function usePlacesAutocompleteService({
       if (placesAutocompleteService.current && optionsArg.input)
         placesAutocompleteService.current.getPlacePredictions(
           {
-            ...options,
-            ...optionsArg,
             ...(sessionToken && autocompleteSession.current
               ? { sessionToken: autocompleteSession.current }
               : {}),
+            ...options,
+            ...optionsArg,
           },
           (r) => {
             setIsPlacePredsLoading(false);
@@ -52,11 +53,11 @@ export default function usePlacesAutocompleteService({
       if (placesAutocompleteService.current && optionsArg.input)
         placesAutocompleteService.current.getQueryPredictions(
           {
-            ...options,
-            ...optionsArg,
             ...(sessionToken && autocompleteSession.current
               ? { sessionToken: autocompleteSession.current }
               : {}),
+            ...options,
+            ...optionsArg,
           },
           (r) => {
             setIsQueryPredsLoading(false);
@@ -81,6 +82,11 @@ export default function usePlacesAutocompleteService({
       placesAutocompleteService.current =
         new google.maps.places.AutocompleteService();
 
+      // eslint-disable-next-line no-undef
+      placesService.current = new google.maps.places.PlacesService(
+        document.createElement("div")
+      );
+
       if (sessionToken)
         autocompleteSession.current =
           new google.maps.places.AutocompleteSessionToken();
@@ -94,6 +100,8 @@ export default function usePlacesAutocompleteService({
   }, []);
 
   return {
+    placesService: placesService.current,
+    autocompleteSessionToken: autocompleteSession.current,
     placesAutocompleteService: placesAutocompleteService.current,
     placePredictions: placeInputValue ? placePredictions : [],
     isPlacePredictionsLoading: isPlacePredsLoading,

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-google-autocomplete",`
`3`		`- "version": "2.3.2",`
	`3`	`+ "version": "2.4.0",`
`4`	`4`	`"description": "React component for google autocomplete.",`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"types": "index.d.ts",`