Function LocationAutocompleteInput

src/Components/LocationAutocompleteInput.tsx:41–160

({ onChange, onClick, onClose, onSelect, ...rest })

  onChange?: (place?: Place) => void
  onSelect?: (place?: Place) => void
}

export const LocationAutocompleteInput: FC<
  React.PropsWithChildren<LocationAutocompleteInputProps>
> = ({ onChange, onClick, onClose, onSelect, ...rest }) => {
  const [suggestions, setSuggestions] = useState<
    Array<AutocompleteInputOptionType>
  >([])
  const [ready, setReady] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const autocompleteServiceRef =
    useRef<google.maps.places.AutocompleteService | null>(null)
  const geocoderRef = useRef<google.maps.Geocoder | null>(null)

  useEffect(() => {
    if (!isGooglePlacesLoaded()) {
      window.__googleMapsCallback = () => {
        setReady(true)
      }
      return
    }

    setReady(true)
  }, [])

  useEffect(() => {
    if (!ready || !isGooglePlacesLoaded()) return
    autocompleteServiceRef.current =
      new google.maps.places.AutocompleteService()
    geocoderRef.current = new google.maps.Geocoder()
  }, [ready])

  useLoadScript({ id: "google-maps-js", src: GOOGLE_PLACES_API_SRC })

  const fetchSuggestions = async (searchQuery: string) => {
    const res = await autocompleteServiceRef.current?.getPlacePredictions({
      input: searchQuery,
      types: ["(cities)"],
    })

    return res?.predictions
  }

  const updateSuggestions = useCallback(async (value: string) => {
    setSuggestions([])
    if (!value.trim()) return

    try {
      setIsLoading(true)
      const suggestions = await fetchSuggestions(value)
      setIsLoading(false)
      if (suggestions) {
        setSuggestions(
          suggestions.map(option => ({
            text: option.description,
            value: option.place_id,
          })),
        )