I'm using places api for autocomplete, i want the postcode prepended at the end of the address.

[fzkhan19]

// LocationSearchInput.js
import {useMap, useMapsLibrary} from "@vis.gl/react-google-maps";
import {X} from "lucide-react";
import {FormEvent, useCallback, useEffect, useMemo, useState} from "react";

import {Input} from "../ui/input";
import {Label} from "../ui/label";

interface Props {
  onPlaceSelect?: (place: google.maps.places.PlaceResult | null) => void;
  onChange?: (_place: string | object | null) => void;
  value?: {lat: number; lng: number; name: string};
  placeholder?: string;
}

const ListSkeleton = () => {
  return (
    <ul className="absolute top-12 z-20 flex w-full flex-col rounded-lg border bg-white p-2">
      <li key={1} className="from-left to-right mb-3 h-10 animate-pulse rounded bg-gray-100" />
      <li key={2} className="from-left to-right mb-3 h-10 animate-pulse rounded bg-gray-100" />
      <li key={3} className="from-left to-right mb-3 h-10 animate-pulse rounded bg-gray-100" />
    </ul>
  );
};

const LocationSearchInput = ({onChange, value}: Props) => {
  const map = useMap();
  const places = useMapsLibrary("places");
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [inputValue, setInputValue] = useState<string>(value?.name || "");

  const [sessionToken, setSessionToken] = useState<google.maps.places.AutocompleteSessionToken>();

  const [autocompleteService, setAutocompleteService] =
    useState<google.maps.places.AutocompleteService | null>(null);

  const [placesService, setPlacesService] = useState<google.maps.places.PlacesService | null>(null);

  const [predictionResults, setPredictionResults] = useState<
    Array<google.maps.places.AutocompletePrediction>
  >([]);

  useEffect(() => {
    if (!places || !map) return;

    setAutocompleteService(new places.AutocompleteService());
    setPlacesService(new places.PlacesService(map));
    setSessionToken(new places.AutocompleteSessionToken());

    return () => setAutocompleteService(null);
  }, [map, places]);

  const fetchPredictions = useCallback(
    async (inputValue: string) => {
      setLoading(true);
      if (!autocompleteService || !inputValue) {
        setPredictionResults([]);
        setLoading(false);

        return;
      }

      const request = {
        input: inputValue,
        sessionToken,
        types: ["airport", "lodging", "point_of_interest", "transit_station", "street_address"],
        locationBias: new google.maps.LatLngBounds(
          new google.maps.LatLng(49.8711, -8.6475),
          new google.maps.LatLng(58.6398, 1.7754),
        ),
        //Country Restricted to London
        componentRestrictions: {country: "gb"},
      };
      const response = await autocompleteService.getPlacePredictions(request);

      setPredictionResults(response.predictions);
      setLoading(false);
    },
    [autocompleteService, sessionToken],
  );

  const onInputChange = useCallback(
    (event: FormEvent<HTMLInputElement>) => {
      const value = (event.target as HTMLInputElement)?.value;

      setOpen(true);
      setInputValue(value);
      fetchPredictions(value);
    },
    [fetchPredictions],
  );

  const handleSuggestionClick = useCallback(
    (placeId: string) => {
      if (!places) return;

      const detailRequestOptions = {
        placeId,
        fields: ["geometry", "name", "formatted_address"],
        sessionToken,
      };

      const detailsRequestCallback = (placeDetails: google.maps.places.PlaceResult | null) => {
        onChange &&
          onChange({
            lat: placeDetails?.geometry?.location?.lat(),
            lng: placeDetails?.geometry?.location?.lng(),
            name: placeDetails?.name + ", " + placeDetails?.formatted_address,
          });
        setPredictionResults([]);
        setInputValue(placeDetails?.name + ", " + placeDetails?.formatted_address ?? "");
        setSessionToken(new places.AutocompleteSessionToken());
        setOpen(false);
      };

      placesService?.getDetails(detailRequestOptions, detailsRequestCallback);
    },
    [places, placesService, sessionToken, onChange],
  );

  const listView = useMemo(() => {
    if (open) {
      if (loading) {
        return <ListSkeleton />;
      } else if (inputValue.length > 0) {
        return (
          <ul className="absolute top-12 z-20 flex w-full flex-col rounded-lg border bg-white ">
            {predictionResults.length ? (
              predictionResults.map(({place_id, description}) => (
                <li
                  key={place_id}
                  className="cursor-pointer rounded-md p-2 py-4 text-sm hover:bg-accent"
                  role="button"
                  tabIndex={0}
                  onClick={() => handleSuggestionClick(place_id)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      handleSuggestionClick(place_id);
                    }
                  }}
                >
                  {description}
                </li>
              ))
            ) : (
              <Label className="w-full p-8 text-center text-sm ">No results found</Label>
            )}
          </ul>
        );
      }
    }
  }, [loading, handleSuggestionClick, predictionResults, inputValue, open]);

  return (
    <div className="relative flex flex-col gap-2">
      <Input
        className="pr-8"
        placeholder={`Search Location`}
        value={inputValue}
        onBlur={() => {
          if (predictionResults.length === 0) {
            setInputValue("");
          }
        }}
        onFocus={(event: FormEvent<HTMLInputElement>) => {
          if (inputValue.length > 0) onInputChange(event);
        }}
        onInput={(event: FormEvent<HTMLInputElement>) => onInputChange(event)}
      />
      {inputValue.length > 0 && (
        <X
          className="absolute right-2 top-[11px] cursor-pointer text-slate-400"
          size={20}
          onClick={() => {
            setOpen(false);
            setInputValue("");
            onChange && onChange({});
          }}
        />
      )}{" "}
      {listView}
    </div>
  );
};

export default LocationSearchInput;