ErrorPro / react-google-autocomplete

React components for google places API.
MIT License
474 stars 113 forks source link

'Autocomplete - Per Request' google cloud SKU is charged after setting sessionToken to true #222

Open fghorbani opened 1 year ago

fghorbani commented 1 year ago

I have a problem when use of sessionToken. As I see session token start when user start typing until user select one place (all of my requests have a unique session). After that I create another token for next request. I dont know why but Autocomplete - Per Request google cloud SKU still is charged and I dont expect that because Im using of session.

const [autocompleteValue, setAutocompleteValue] = useState<string>('')
const [openSelectList, setOpenSelectList] = useState<boolean>(false)

const {
  placesService,
  placePredictions,
  getPlacePredictions,
  autocompleteSessionToken,
  refreshSessionToken,
} = usePlacesService({
  apiKey: GmapApiKey,
  sessionToken: true,
  options: {
    componentRestrictions: { country: 'za' },
    types: ['establishment', 'geocode'],
    input: autocompleteValue,
  },
})

const onClickAddrressSugestion = (placeID: string, value: string) => {
  placesService?.getDetails(
    {
      placeId: placeID,
      fields: ['address_components', 'geometry'],
      sessionToken: autocompleteSessionToken,
    },
    (placeDetails: any) => {
      updateForm(placeDetails)
      setOpenSelectList(false)
      setAutocompleteValue(value)
    }
  )
  refreshSessionToken()
}

return (
  <SearchMapTitle>
    <TextInput
      placeholder="Search your address"
      classname="autocompletePredictions"
      changeValue={(evt: React.ChangeEvent<HTMLInputElement>) => {
        getPlacePredictions({
          input: evt.target.value,
          types: ['establishment', 'geocode'],
        })
        setAutocompleteValue(evt.target.value)
      }}
      inputVal={autocompleteValue}
    />

    <ListHolder>
      {openSelectList && (
        <GoogleAutocompleteBox
          itemPredictions={placePredictions}
          click={onClickAddrressSugestion}
        />
      )}
    </ListHolder>
  </SearchMapTitle>
)