finished address autocomplete

Author: i30101

frontend/app/api/geocode/route.ts

@@ -0,0 +1,76 @@
+import { NextRequest, NextResponse } from "next/server";
+import type { PhotonReponse, AddressResult, PhotonFeature } from "@/lib/types";
+
+function photonFeatureToAddressResult(feature: PhotonFeature): AddressResult {
+  const props = feature.properties;
+  const [lon, lat] = feature.geometry.coordinates;
+
+  const displayParts: string[] = [];
+
+  if (props.housenumber && props.street) {
+    displayParts.push(`${props.housenumber} ${props.street}`);
+  } else if (props.street) {
+    displayParts.push(props.street);
+  } else if (props.name) {
+    displayParts.push(props.name);
+  }
+
+  if (props.city) displayParts.push(props.city);
+  if (props.state) displayParts.push(props.state);
+
+  const displayName = `${displayParts.join(", ")} + ${props.postcode ? props.postcode : ""}`;
+
+  return {
+    placeId: props.osm_id,
+    lat: lat.toString(),
+    lon: lon.toString(),
+    displayName,
+    address: {
+      housenumber: props.housenumber,
+      road: props.street,
+      city: props.city,
+      state: props.state,
+      postCode: props.postcode,
+      country: props.country,
+      countryCode: props.countrycode,
+    },
+  };
+}
+
+export async function GET(request: NextRequest) {
+  const query = request.nextUrl.searchParams.get("q");
+
+  if (!query || query.trim().length < 3) {
+    return NextResponse.json([]);
+  }
+
+  try {
+    // Philadelphia bounding box
+    const bbox = "-75.28,39.87,-75.0,40.14";
+
+    const params = new URLSearchParams({
+      q: query,
+      limit: "5",
+      lang: "en",
+      bbox: bbox,
+    });
+
+    const response = await fetch(`https://photon.komoot.io/api/?${params.toString()}`, {
+      headers: {
+        Accept: "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const data: PhotonReponse = await response.json();
+    const results = data.features.map(photonFeatureToAddressResult);
+
+    return NextResponse.json(results);
+  } catch (error) {
+    console.error("Geocode API error:", error);
+    return NextResponse.json({ error: "Failed to fetch addresses" }, { status: 500 });
+  }
+}

…istings/address/address-autocomplete.tsx …listings/address/AddressAutocomplete.tsxfrontend/components/listings/address/address-autocomplete.tsx renamed to frontend/components/listings/address/AddressAutocomplete.tsx frontend/components/listings/address/address-autocomplete.tsx renamed to frontend/components/listings/address/AddressAutocomplete.tsx

@@ -2,10 +2,10 @@
 
 import { useState, useRef, useEffect } from "react";
 import { X } from "lucide-react";
-import type { NominatimAddress, ValidatedAddress } from "@/lib/types";
+import type { AddressResult, ValidatedAddress } from "@/lib/types";
 import { useAddressAutocomplete } from "@/hooks/useAddressAutocomplete";
 import { Input } from "@/components/ui/input";
-import { AddressDropdown } from "./address-dropdown";
+import { AddressDropdown } from "@/components/listings/address/AddressDropdown";
 import { cn } from "@/lib/utils";
 
 interface AddressAutocompleteProps {
@@ -39,15 +39,15 @@ export function AddressAutocomplete({
   } = useAddressAutocomplete();
 
   useEffect(() => {
-    if (value.trim().length > 0 && !hasValidatedAddress) {
+    if (value.trim().length >= 3 && !hasValidatedAddress) {
       search(value);
       setIsOpen(true);
       setHighlightedIndex(-1);
     } else if (!hasValidatedAddress) {
       clearSuggestions();
       setIsOpen(false);
     }
-  }, [value, search, clearSuggestions, hasValidatedAddress]);
+  }, [value, hasValidatedAddress, search, clearSuggestions]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
@@ -59,15 +59,15 @@ export function AddressAutocomplete({
     }
   };
 
-  const handleSelect = (address: NominatimAddress) => {
+  const handleSelect = (address: AddressResult) => {
     const validatedAddress: ValidatedAddress = {
-      display_name: address.display_name,
+      displayName: address.displayName,
       lat: address.lat,
       lon: address.lon,
-      place_id: address.place_id,
+      placeId: address.placeId,
     };
 
-    onChange(address.display_name);
+    onChange(address.displayName);
     onValidatedAddressChange(validatedAddress);
     setHasValidatedAddress(true);
     setIsOpen(false);

…ts/listings/address/address-dropdown.tsx …nts/listings/address/AddressDropdown.tsxfrontend/components/listings/address/address-dropdown.tsx renamed to frontend/components/listings/address/AddressDropdown.tsx frontend/components/listings/address/address-dropdown.tsx renamed to frontend/components/listings/address/AddressDropdown.tsx

@@ -1,14 +1,13 @@
 import { Loader2 } from "lucide-react";
-import type { NominatimAddress } from "@/lib/types";
-import { AddressOption } from "./address-option";
+import type { AddressResult } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
 interface AddressDropdownProps {
-  suggestions: NominatimAddress[];
+  suggestions: AddressResult[];
   isLoading: boolean;
   error: string | null;
   isOpen: boolean;
-  onSelect: (address: NominatimAddress) => void;
+  onSelect: (address: AddressResult) => void;
   highlightedIndex: number;
 }
 
@@ -49,12 +48,22 @@ export function AddressDropdown({
       {!isLoading && !error && suggestions.length > 0 && (
         <div className={"p-1"}>
           {suggestions.map((address, index) => (
-            <AddressOption
-              key={address.place_id}
-              address={address}
-              isHighlighted={index === highlightedIndex}
+            <div
+              key={address.placeId}
+              role="option"
+              aria-selected={index === highlightedIndex}
+              className={cn(
+                "relative flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none",
+                "hover:bg-accent hover:text-accent-foreground",
+                index === highlightedIndex && "bg-accent text-accent-foreground"
+              )}
               onClick={() => onSelect(address)}
-            />
+              onMouseDown={(e) => {
+                e.preventDefault();
+              }}
+            >
+              <span className={"truncate"}>{address.displayName}</span>
+            </div>
           ))}
         </div>
       )}

frontend/components/listings/address/address-option.tsx

@@ -18,7 +18,7 @@ import { parsePriceString } from "@/lib/utils";
 import { createSubletSchema } from "@/lib/validations";
 import type { CreateSubletPayload } from "@/lib/types";
 import type { CreateSubletFormData } from "@/lib/validations";
-import { AddressAutocomplete } from "../address/address-autocomplete";
+import { AddressAutocomplete } from "@/components/listings/address/AddressAutocomplete";
 
 const DISPLAY_LABEL = "Listing";
 const EXAMPLE_TITLE = "e.g., Spacious 2BR near campus";
@@ -42,7 +42,8 @@ export function SubletForm() {
       description: "",
       tags: [],
       street_address: "",
-      validated_address: null,
+      latitude: 0,
+      longitude: 0,
       beds: 0,
       baths: 0,
       start_date: "",
@@ -96,39 +97,48 @@ export function SubletForm() {
         control={control}
         render={({ field: streetField }) => (
           <Controller
-            name="validated_address"
+            name="latitude"
             control={control}
-            render={({ field: validatedField }) => (
-              <FormField
-                label={"Street Address"}
-                error={errors.street_address?.message}
-                touched={touchedFields.street_address}
-                labelSupplement={
-                  <span className={"group relative inline-flex"}>
-                    <Info
-                      className={"text-muted-foreground h-4 w-4 shrink-0 cursor-help"}
-                      aria-label="address privacy info"
+            render={({ field: latField }) => (
+              <Controller
+                name="longitude"
+                control={control}
+                render={({ field: lonField }) => (
+                  <FormField
+                    label={"Street Address"}
+                    error={errors.street_address?.message}
+                    touched={touchedFields.street_address}
+                    labelSupplement={
+                      <span className={"group relative inline-flex"}>
+                        <Info
+                          className={"text-muted-foreground h-4 w-4 shrink-0 cursor-help"}
+                          aria-label="address privacy info"
+                        />
+                        <span
+                          className={
+                            "bg-popover text-popover-foreground pointer-events-none absolute top-full left-0 z-10 mt-1.5 w-56 rounded-md border px-3 py-2 text-xs opacity-0 shadow-md transition-opacity duration-150 group-hover:opacity-100"
+                          }
+                        >
+                          Your address will not be visible to the public. Only an approximate
+                          location will be shown on the map.
+                        </span>
+                      </span>
+                    }
+                  >
+                    <AddressAutocomplete
+                      value={streetField.value}
+                      onChange={streetField.onChange}
+                      onValidatedAddressChange={(addr) => {
+                        latField.onChange(addr ? parseFloat(addr.lat) : 0);
+                        lonField.onChange(addr ? parseFloat(addr.lon) : 0);
+                      }}
+                      disabled={isFormDisabled}
+                      error={!!errors.street_address}
+                      placeholder={"123 Main St 19104"}
                     />
-                    <span
-                      className={
-                        "bg-popover text-popover-foreground pointer-events-none absolute top-full left-0 z-10 mt-1.5 w-56 rounded-md border px-3 py-2 text-xs opacity-0 shadow-md transition-opacity duration-150 group-hover:opacity-100"
-                      }
-                    >
-                      Your address will not be visible to the public. Only an approximate location
-                      will be shown on the map.
-                    </span>
-                  </span>
-                }
-              >
-                <AddressAutocomplete
-                  value={streetField.value}
-                  onChange={streetField.onChange}
-                  onValidatedAddressChange={validatedField.onChange}
-                  disabled={isFormDisabled}
-                  error={!!errors.street_address}
-                  placeholder={"123 Main St, Philadelphia, PA 19104"}
-                />
-              </FormField>
+                  </FormField>
+                )}
+              />
             )}
           />
         )}