ErrorPro / react-google-autocomplete

React components for google places API.
MIT License
473 stars 114 forks source link

AutoComplete - per session is not working even after setting sessionToken to true #152

Closed mandula-abhilash closed 1 year ago

mandula-abhilash commented 2 years ago

Here is my code. Even after passing the autocompleteSessionToken, billing is generated per character instead of per session.

import React, { useState } from "react";
import useGoogle from "react-google-autocomplete/lib/usePlacesAutocompleteService";

const AutocompleteWidget = ({ setCenter, setZoom }) => {
  const {
    placePredictions,
    getPlacePredictions,
    isPlacePredictionsLoading,
    placesService,
    autocompleteSessionToken,
    refreshSessionToken,
  } = useGoogle({
    apiKey: process.env.REACT_APP_MAP_ACCESS_TOKEN,
    sessionToken: true,
  });
  const [value, setValue] = useState("");

  const getPlaceDetails = (placeId) => {
    placesService.getDetails(
      {
        placeId: placeId,
        fields: ["name", "formatted_address", "geometry"],
        sessionToken: autocompleteSessionToken,
      },
      (place, status) => {
        if (status === window.google.maps.places.PlacesServiceStatus.OK) {
          setCenter(place.geometry.location);
          setZoom(20);
        }
      }
    );
    refreshSessionToken();
  };

  return (
    <>
      <div className="fixed top-24 lg:top-6 z-10 w-full md:w-3/12 flex flex-col items-center justify-center">
        <input
          className="w-full p-2"
          value={value}
          onChange={(e) => {
            getPlacePredictions({
              input: e.target.value,
              sessionToken: autocompleteSessionToken,
              options: {
                componentRestrictions: { country: "uk" },
              },
            });
            setValue(e.target.value);
          }}
        />
        <div>
          {!isPlacePredictionsLoading &&
            placePredictions.map((prediction) => (
              <div onClick={() => getPlaceDetails(prediction.place_id)}>
                {prediction.description}
              </div>
            ))}
        </div>
      </div>
    </>
  );
};

export default AutocompleteWidget;
ErrorPro commented 2 years ago

Hey @mandula-abhilash Can you please check if autocompleteSessionToken changes between the renders? It should be the same per session. Let me know the result so I can try to help you

AlexeyRDKV commented 1 year ago

This issue was closed because it has been inactive for long time.