Google maps integration

frontend/src/pages/Profile.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useAuth } from "../contexts/AuthContext";
 import { userAPI, itemAPI, rentalAPI, addressAPI } from "../services/api";
 import { User, Item, Rental, Address } from "../types";
@@ -6,8 +6,11 @@ import { getImageUrl } from "../utils/imageUrl";
 import AvailabilitySettings from "../components/AvailabilitySettings";
 import ReviewItemModal from "../components/ReviewModal";
 import ReviewRenterModal from "../components/ReviewRenterModal";
-import StarRating from "../components/StarRating";
 import ReviewDetailsModal from "../components/ReviewDetailsModal";
+import {
+  geocodingService,
+  AddressComponents,
+} from "../services/geocodingService";
 
 const Profile: React.FC = () => {
   const { user, updateUser, logout } = useAuth();
@@ -62,7 +65,14 @@ const Profile: React.FC = () => {
     state: "",
     zipCode: "",
     country: "US",
+    latitude: undefined as number | undefined,
+    longitude: undefined as number | undefined,
   });
+  const [addressGeocoding, setAddressGeocoding] = useState(false);
+  const [addressGeocodeError, setAddressGeocodeError] = useState<string | null>(
+    null
+  );
+  const [addressGeocodeSuccess, setAddressGeocodeSuccess] = useState(false);
 
   // Rental history state
   const [pastRenterRentals, setPastRenterRentals] = useState<Rental[]>([]);
@@ -404,6 +414,8 @@ const Profile: React.FC = () => {
       state: "",
       zipCode: "",
       country: "US",
+      latitude: undefined,
+      longitude: undefined,
     });
     setEditingAddressId(null);
     setShowAddressForm(true);
@@ -417,6 +429,8 @@ const Profile: React.FC = () => {
       state: address.state,
       zipCode: address.zipCode,
       country: address.country,
+      latitude: address.latitude,
+      longitude: address.longitude,
     });
     setEditingAddressId(address.id);
     setShowAddressForm(true);
@@ -429,8 +443,59 @@ const Profile: React.FC = () => {
     setAddressFormData((prev) => ({ ...prev, [name]: value }));
   };
 
+  // Geocoding function for address form
+  const geocodeAddressForm = useCallback(
+    async (addressData: typeof addressFormData) => {
+      if (
+        !geocodingService.isAddressComplete(addressData as AddressComponents)
+      ) {
+        return;
+      }
+
+      setAddressGeocoding(true);
+      setAddressGeocodeError(null);
+      setAddressGeocodeSuccess(false);
+
+      try {
+        const result = await geocodingService.geocodeAddress(
+          addressData as AddressComponents
+        );
+
+        if ("error" in result) {
+          setAddressGeocodeError(result.details || result.error);
+        } else {
+          setAddressGeocodeSuccess(true);
+          setAddressFormData((prev) => ({
+            ...prev,
+            latitude: result.latitude,
+            longitude: result.longitude,
+          }));
+          // Clear success message after 3 seconds
+          setTimeout(() => setAddressGeocodeSuccess(false), 3000);
+        }
+      } catch (error) {
+        setAddressGeocodeError("Failed to geocode address");
+      } finally {
+        setAddressGeocoding(false);
+      }
+    },
+    []
+  );
+
   const handleSaveAddress = async (e: React.FormEvent) => {
     e.preventDefault();
+
+    // Try to geocode the address before saving
+    try {
+      await geocodeAddressForm(addressFormData);
+    } catch (error) {
+      // Geocoding failed, but we'll continue with saving
+      console.warn(
+        "Geocoding failed, saving address without coordinates:",
+        error
+      );
+    }
+
     try {
       if (editingAddressId) {
         // Update existing address
@@ -469,7 +534,12 @@ const Profile: React.FC = () => {
       state: "",
       zipCode: "",
       country: "US",
+      latitude: undefined,
+      longitude: undefined,
     });
+    setAddressGeocoding(false);
+    setAddressGeocodeError(null);
+    setAddressGeocodeSuccess(false);
   };
 
   const usStates = [