Jackie/rentall-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixing bugs with item notification radius

Browse Source
This commit is contained in:
jackiettran
2025-11-20 15:01:15 -05:00
parent 413ac6b6e2
commit 83872fe039
11 changed files with 842 additions and 680 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@@ -27,11 +27,9 @@
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"start:dev": "dotenv -e .env.dev react-scripts start",
"start:qa": "dotenv -e .env.qa react-scripts start",
"start:prod": "dotenv -e .env.prod react-scripts start",
"build": "react-scripts build",
"build:dev": "dotenv -e .env.dev react-scripts build",
"build:qa": "dotenv -e .env.qa react-scripts build",
"build:prod": "dotenv -e .env.prod react-scripts build",

208
frontend/src/components/LocationForm.tsx
View File

@@ -6,6 +6,10 @@ import {
} from "../services/geocodingService";
import AddressAutocomplete from "./AddressAutocomplete";
import { PlaceDetails } from "../services/placesService";
import {
useAddressAutocomplete,
usStates,
} from "../hooks/useAddressAutocomplete";
interface LocationFormData {
address1: string;
@@ -29,123 +33,14 @@ interface LocationFormProps {
onAddressSelect: (addressId: string) => void;
formatAddressDisplay: (address: Address) => string;
onCoordinatesChange?: (latitude: number, longitude: number) => void;
onGeocodeRef?: (geocodeFunction: () => Promise<boolean>) => void;
onGeocodeRef?: (
geocodeFunction: () => Promise<{
latitude: number;
longitude: number;
} | null>
) => void;
}
// State constants - moved to top to avoid hoisting issues
const usStates = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illinois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Carolina",
"North Dakota",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming",
];
// State code to full name mapping for Google Places API integration
const stateCodeToName: { [key: string]: string } = {
AL: "Alabama",
AK: "Alaska",
AZ: "Arizona",
AR: "Arkansas",
CA: "California",
CO: "Colorado",
CT: "Connecticut",
DE: "Delaware",
FL: "Florida",
GA: "Georgia",
HI: "Hawaii",
ID: "Idaho",
IL: "Illinois",
IN: "Indiana",
IA: "Iowa",
KS: "Kansas",
KY: "Kentucky",
LA: "Louisiana",
ME: "Maine",
MD: "Maryland",
MA: "Massachusetts",
MI: "Michigan",
MN: "Minnesota",
MS: "Mississippi",
MO: "Missouri",
MT: "Montana",
NE: "Nebraska",
NV: "Nevada",
NH: "New Hampshire",
NJ: "New Jersey",
NM: "New Mexico",
NY: "New York",
NC: "North Carolina",
ND: "North Dakota",
OH: "Ohio",
OK: "Oklahoma",
OR: "Oregon",
PA: "Pennsylvania",
RI: "Rhode Island",
SC: "South Carolina",
SD: "South Dakota",
TN: "Tennessee",
TX: "Texas",
UT: "Utah",
VT: "Vermont",
VA: "Virginia",
WA: "Washington",
WV: "West Virginia",
WI: "Wisconsin",
WY: "Wyoming",
DC: "District of Columbia",
PR: "Puerto Rico",
VI: "Virgin Islands",
AS: "American Samoa",
GU: "Guam",
MP: "Northern Mariana Islands",
};
const LocationForm: React.FC<LocationFormProps> = ({
data,
userAddresses,
@@ -164,11 +59,13 @@ const LocationForm: React.FC<LocationFormProps> = ({
// Debounced geocoding function
const geocodeAddress = useCallback(
async (addressData: LocationFormData) => {
async (
addressData: LocationFormData
): Promise<{ latitude: number; longitude: number } | null> => {
if (
!geocodingService.isAddressComplete(addressData as AddressComponents)
) {
return;
return null;
}
setGeocoding(true);
@@ -182,6 +79,7 @@ const LocationForm: React.FC<LocationFormProps> = ({
if ("error" in result) {
setGeocodeError(result.details || result.error);
return null;
} else {
setGeocodeSuccess(true);
if (onCoordinatesChange) {
@@ -189,9 +87,13 @@ const LocationForm: React.FC<LocationFormProps> = ({
}
// Clear success message after 3 seconds
setTimeout(() => setGeocodeSuccess(false), 3000);
// Return the coordinates
return { latitude: result.latitude, longitude: result.longitude };
}
} catch (error) {
setGeocodeError("Failed to geocode address");
return null;
} finally {
setGeocoding(false);
}
@@ -202,10 +104,10 @@ const LocationForm: React.FC<LocationFormProps> = ({
// Expose geocoding function to parent components
const triggerGeocoding = useCallback(async () => {
if (data.address1 && data.city && data.state && data.zipCode) {
await geocodeAddress(data);
return true; // Successfully triggered
const coordinates = await geocodeAddress(data);
return coordinates; // Return coordinates directly from geocoding
}
return false; // Incomplete address
return null; // Incomplete address
}, [data, geocodeAddress]);
// Pass geocoding function to parent component
@@ -215,16 +117,19 @@ const LocationForm: React.FC<LocationFormProps> = ({
}
}, [onGeocodeRef, triggerGeocoding]);
// Use address autocomplete hook
const { parsePlace } = useAddressAutocomplete();
// Handle place selection from autocomplete
const handlePlaceSelect = useCallback(
(place: PlaceDetails) => {
try {
const addressComponents = place.addressComponents;
const parsedAddress = parsePlace(place);
// Build address1 from street number and route
const streetNumber = addressComponents.streetNumber || "";
const route = addressComponents.route || "";
const address1 = `${streetNumber} ${route}`.trim();
if (!parsedAddress) {
setPlacesApiError(true);
return;
}
// Create synthetic events to update form data
const createSyntheticEvent = (name: string, value: string) =>
@@ -237,52 +142,15 @@ const LocationForm: React.FC<LocationFormProps> = ({
} as React.ChangeEvent<HTMLInputElement>);
// Update all address fields
onChange(
createSyntheticEvent("address1", address1 || place.formattedAddress)
);
if (addressComponents.locality) {
onChange(createSyntheticEvent("city", addressComponents.locality));
}
if (addressComponents.administrativeAreaLevel1) {
// Convert state code to full name using mapping, with fallback to long name or original code
const stateCode = addressComponents.administrativeAreaLevel1;
const stateName =
stateCodeToName[stateCode] ||
addressComponents.administrativeAreaLevel1Long ||
stateCode;
// Only set the state if it exists in our dropdown options
if (usStates.includes(stateName)) {
onChange(createSyntheticEvent("state", stateName));
} else {
console.warn(
`State not found in dropdown options: ${stateName} (code: ${stateCode})`
);
}
}
if (addressComponents.postalCode) {
onChange(
createSyntheticEvent("zipCode", addressComponents.postalCode)
);
}
if (addressComponents.country) {
onChange(createSyntheticEvent("country", addressComponents.country));
}
onChange(createSyntheticEvent("address1", parsedAddress.address1));
onChange(createSyntheticEvent("city", parsedAddress.city));
onChange(createSyntheticEvent("state", parsedAddress.state));
onChange(createSyntheticEvent("zipCode", parsedAddress.zipCode));
onChange(createSyntheticEvent("country", parsedAddress.country));
// Set coordinates immediately
if (
onCoordinatesChange &&
place.geometry.latitude &&
place.geometry.longitude
) {
onCoordinatesChange(
place.geometry.latitude,
place.geometry.longitude
);
if (onCoordinatesChange) {
onCoordinatesChange(parsedAddress.latitude, parsedAddress.longitude);
}
// Clear any previous geocoding messages
@@ -295,7 +163,7 @@ const LocationForm: React.FC<LocationFormProps> = ({
setPlacesApiError(true);
}
},
[onChange, onCoordinatesChange]
[onChange, onCoordinatesChange, parsePlace]
);
// Handle Places API errors

24
frontend/src/components/Navbar.tsx
View File

@@ -89,8 +89,8 @@ const Navbar: React.FC = () => {
navigate("/");
};
const handleSearch = (e: React.FormEvent) => {
e.preventDefault();
const handleSearch = (e?: React.FormEvent | React.MouseEvent) => {
e?.preventDefault();
const params = new URLSearchParams();
if (searchFilters.search.trim()) {
@@ -142,7 +142,7 @@ const Navbar: React.FC = () => {
<div className="collapse navbar-collapse" id="navbarNav">
<div className="d-flex align-items-center w-100">
<div className="position-absolute start-50 translate-middle-x">
<form onSubmit={handleSearch}>
<div>
<div className="input-group" style={{ width: "520px" }}>
<input
type="text"
@@ -152,6 +152,11 @@ const Navbar: React.FC = () => {
onChange={(e) =>
handleSearchInputChange("search", e.target.value)
}
onKeyDown={(e) => {
if (e.key === "Enter") {
handleSearch(e);
}
}}
/>
<span
className="input-group-text text-muted"
@@ -171,12 +176,21 @@ const Navbar: React.FC = () => {
onChange={(e) =>
handleSearchInputChange("location", e.target.value)
}
onKeyDown={(e) => {
if (e.key === "Enter") {
handleSearch(e);
}
}}
/>
<button className="btn btn-outline-secondary" type="submit">
<button
className="btn btn-outline-secondary"
type="button"
onClick={handleSearch}
>
<i className="bi bi-search"></i>
</button>
</div>
</form>
</div>
</div>
<div className="ms-auto d-flex align-items-center">
<Link

93
frontend/src/hooks/useAddressAutocomplete.ts Normal file
View File

@@ -0,0 +1,93 @@
import { useCallback } from 'react';
import { PlaceDetails } from '../services/placesService';
// US States list
export const usStates = [
"Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado",
"Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho",
"Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana",
"Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana", "Nebraska", "Nevada",
"New Hampshire", "New Jersey", "New Mexico", "New York",
"North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon",
"Pennsylvania", "Rhode Island", "South Carolina", "South Dakota",
"Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington",
"West Virginia", "Wisconsin", "Wyoming",
];
// State code to full name mapping
const stateCodeToName: { [key: string]: string } = {
AL: "Alabama", AK: "Alaska", AZ: "Arizona", AR: "Arkansas",
CA: "California", CO: "Colorado", CT: "Connecticut", DE: "Delaware",
FL: "Florida", GA: "Georgia", HI: "Hawaii", ID: "Idaho",
IL: "Illinois", IN: "Indiana", IA: "Iowa", KS: "Kansas",
KY: "Kentucky", LA: "Louisiana", ME: "Maine", MD: "Maryland",
MA: "Massachusetts", MI: "Michigan", MN: "Minnesota", MS: "Mississippi",
MO: "Missouri", MT: "Montana", NE: "Nebraska", NV: "Nevada",
NH: "New Hampshire", NJ: "New Jersey", NM: "New Mexico", NY: "New York",
NC: "North Carolina", ND: "North Dakota", OH: "Ohio", OK: "Oklahoma",
OR: "Oregon", PA: "Pennsylvania", RI: "Rhode Island", SC: "South Carolina",
SD: "South Dakota", TN: "Tennessee", TX: "Texas", UT: "Utah",
VT: "Vermont", VA: "Virginia", WA: "Washington", WV: "West Virginia",
WI: "Wisconsin", WY: "Wyoming", DC: "District of Columbia",
PR: "Puerto Rico", VI: "Virgin Islands", AS: "American Samoa",
GU: "Guam", MP: "Northern Mariana Islands",
};
export interface ParsedAddress {
address1: string;
city: string;
state: string;
zipCode: string;
country: string;
latitude: number;
longitude: number;
}
/**
* Custom hook for handling Google Places autocomplete
* Parses place details and extracts address components
*/
export const useAddressAutocomplete = () => {
const parsePlace = useCallback((place: PlaceDetails): ParsedAddress | null => {
try {
const addressComponents = place.addressComponents;
// Build address1 from street number and route
const streetNumber = addressComponents.streetNumber || "";
const route = addressComponents.route || "";
const address1 = `${streetNumber} ${route}`.trim() || place.formattedAddress;
// Parse state - convert code to full name
const stateCode = addressComponents.administrativeAreaLevel1 || "";
const stateName =
stateCodeToName[stateCode] ||
addressComponents.administrativeAreaLevel1Long ||
stateCode;
// Only use the state if it's valid
const state = usStates.includes(stateName) ? stateName : "";
if (!state) {
console.warn(
`State not found in dropdown options: ${stateName} (code: ${stateCode})`
);
}
return {
address1,
city: addressComponents.locality || "",
state,
zipCode: addressComponents.postalCode || "",
country: addressComponents.country || "US",
latitude: place.geometry.latitude,
longitude: place.geometry.longitude,
};
} catch (error) {
console.error("Error parsing place details:", error);
return null;
}
}, []);
return { parsePlace };
};

42
frontend/src/pages/CreateForumPost.tsx
View File

@@ -1,15 +1,17 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import { useNavigate, Link } from "react-router-dom";
import { useAuth } from "../contexts/AuthContext";
import { forumAPI } from "../services/api";
import { forumAPI, addressAPI } from "../services/api";
import TagInput from "../components/TagInput";
import ForumImageUpload from "../components/ForumImageUpload";
import { Address } from "../types";
const CreateForumPost: React.FC = () => {
const { user } = useAuth();
const navigate = useNavigate();
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
const [userAddresses, setUserAddresses] = useState<Address[]>([]);
const [formData, setFormData] = useState({
title: "",
@@ -21,11 +23,26 @@ const CreateForumPost: React.FC = () => {
| "general_discussion",
tags: [] as string[],
zipCode: user?.zipCode || "",
latitude: undefined as number | undefined,
longitude: undefined as number | undefined,
});
const [imageFiles, setImageFiles] = useState<File[]>([]);
const [imagePreviews, setImagePreviews] = useState<string[]>([]);
useEffect(() => {
fetchUserAddresses();
}, []);
const fetchUserAddresses = async () => {
try {
const response = await addressAPI.getAddresses();
setUserAddresses(response.data);
} catch (error) {
console.error("Error fetching addresses:", error);
}
};
const categories = [
{
value: "item_request",
@@ -55,7 +72,21 @@ const CreateForumPost: React.FC = () => {
>
) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
// If category is being changed to item_request and user has addresses, autopopulate location data
if (name === "category" && value === "item_request" && userAddresses.length > 0) {
// Try to find primary address first, otherwise use first address
const primaryAddress = userAddresses.find(addr => addr.isPrimary) || userAddresses[0];
setFormData((prev) => ({
...prev,
[name]: value,
zipCode: primaryAddress.zipCode,
latitude: primaryAddress.latitude,
longitude: primaryAddress.longitude
}));
} else {
setFormData((prev) => ({ ...prev, [name]: value }));
}
};
const handleTagsChange = (tags: string[]) => {
@@ -134,6 +165,11 @@ const CreateForumPost: React.FC = () => {
// Add location data for item requests
if (formData.category === 'item_request' && formData.zipCode) {
submitData.append('zipCode', formData.zipCode);
// If we have coordinates from a saved address, send them to avoid re-geocoding
if (formData.latitude !== undefined && formData.longitude !== undefined) {
submitData.append('latitude', formData.latitude.toString());
submitData.append('longitude', formData.longitude.toString());
}
}
// Add images

22
frontend/src/pages/CreateItem.tsx
View File

@@ -83,7 +83,8 @@ const CreateItem: React.FC = () => {
const [selectedAddressId, setSelectedAddressId] = useState<string>("");
const [addressesLoading, setAddressesLoading] = useState(true);
const [selectedPricingUnit, setSelectedPricingUnit] = useState<string>("day");
const [showAdvancedPricing, setShowAdvancedPricing] = useState<boolean>(false);
const [showAdvancedPricing, setShowAdvancedPricing] =
useState<boolean>(false);
const [enabledPricingTiers, setEnabledPricingTiers] = useState({
hour: false,
day: false,
@@ -92,7 +93,9 @@ const CreateItem: React.FC = () => {
});
// Reference to LocationForm geocoding function
const geocodeLocationRef = useRef<(() => Promise<boolean>) | null>(null);
const geocodeLocationRef = useRef<
(() => Promise<{ latitude: number; longitude: number } | null>) | null
>(null);
useEffect(() => {
fetchUserAddresses();
@@ -161,11 +164,15 @@ const CreateItem: React.FC = () => {
setError("");
// Try to geocode the address before submitting
let geocodedCoordinates = null;
if (geocodeLocationRef.current) {
try {
await geocodeLocationRef.current();
geocodedCoordinates = await geocodeLocationRef.current();
} catch (error) {
console.warn('Geocoding failed, creating item without coordinates:', error);
console.warn(
"Geocoding failed, creating item without coordinates:",
error
);
}
}
@@ -188,6 +195,9 @@ const CreateItem: React.FC = () => {
const response = await api.post("/items", {
...formData,
// Use geocoded coordinates if available, otherwise fall back to formData
latitude: geocodedCoordinates?.latitude ?? formData.latitude,
longitude: geocodedCoordinates?.longitude ?? formData.longitude,
pricePerDay: formData.pricePerDay
? parseFloat(formData.pricePerDay.toString())
: undefined,
@@ -221,8 +231,8 @@ const CreateItem: React.FC = () => {
state: formData.state,
zipCode: formData.zipCode,
country: formData.country,
latitude: formData.latitude,
longitude: formData.longitude,
latitude: geocodedCoordinates?.latitude ?? formData.latitude,
longitude: geocodedCoordinates?.longitude ?? formData.longitude,
isPrimary: true,
});
} catch (addressError) {

26
frontend/src/pages/EditItem.tsx
View File

@@ -59,7 +59,8 @@ const EditItem: React.FC = () => {
const [selectedAddressId, setSelectedAddressId] = useState<string>("");
const [addressesLoading, setAddressesLoading] = useState(true);
const [selectedPricingUnit, setSelectedPricingUnit] = useState<string>("day");
const [showAdvancedPricing, setShowAdvancedPricing] = useState<boolean>(false);
const [showAdvancedPricing, setShowAdvancedPricing] =
useState<boolean>(false);
const [enabledPricingTiers, setEnabledPricingTiers] = useState({
hour: false,
day: false,
@@ -68,7 +69,9 @@ const EditItem: React.FC = () => {
});
// Reference to LocationForm geocoding function
const geocodeLocationRef = useRef<(() => Promise<boolean>) | null>(null);
const geocodeLocationRef = useRef<
(() => Promise<{ latitude: number; longitude: number } | null>) | null
>(null);
const [formData, setFormData] = useState<ItemFormData>({
name: "",
description: "",
@@ -255,20 +258,29 @@ const EditItem: React.FC = () => {
setError(null);
// Try to geocode the address before submitting
let geocodedCoordinates = null;
if (geocodeLocationRef.current) {
try {
await geocodeLocationRef.current();
geocodedCoordinates = await geocodeLocationRef.current();
} catch (error) {
console.warn('Geocoding failed, updating item without coordinates:', error);
console.warn(
"Geocoding failed, updating item without coordinates:",
error
);
}
} else {
console.warn("No geocoding function available");
}
try {
// Use existing image previews (which includes both old and new images)
const imageUrls = imagePreviews;
await itemAPI.updateItem(id!, {
const updatePayload = {
...formData,
// Use geocoded coordinates if available, otherwise fall back to formData
latitude: geocodedCoordinates?.latitude ?? formData.latitude,
longitude: geocodedCoordinates?.longitude ?? formData.longitude,
pricePerDay: formData.pricePerDay
? parseFloat(formData.pricePerDay.toString())
: undefined,
@@ -289,7 +301,9 @@ const EditItem: React.FC = () => {
specifyTimesPerDay: formData.specifyTimesPerDay,
weeklyTimes: formData.weeklyTimes,
images: imageUrls,
});
};
await itemAPI.updateItem(id!, updatePayload);
// Check if user has other items - only save to user profile if no other items
try {

433
frontend/src/pages/Profile.tsx
View File

@@ -12,6 +12,9 @@ import {
geocodingService,
AddressComponents,
} from "../services/geocodingService";
import AddressAutocomplete from "../components/AddressAutocomplete";
import { PlaceDetails } from "../services/placesService";
import { useAddressAutocomplete, usStates } from "../hooks/useAddressAutocomplete";
const Profile: React.FC = () => {
const { user, updateUser, logout } = useAuth();
@@ -398,6 +401,52 @@ const Profile: React.FC = () => {
}
};
const handleSaveNotificationPreferences = async (e: React.FormEvent) => {
e.preventDefault();
setError(null);
setSuccess(null);
try {
const response = await userAPI.updateProfile({
itemRequestNotificationRadius: formData.itemRequestNotificationRadius,
});
setProfileData(response.data);
updateUser(response.data);
setSuccess("Notification preferences saved successfully");
setTimeout(() => setSuccess(null), 3000);
} catch (err: any) {
console.error("Notification preferences update error:", err.response?.data);
const errorMessage =
err.response?.data?.error ||
err.response?.data?.message ||
"Failed to update notification preferences";
setError(errorMessage);
}
};
const handleNotificationRadiusChange = async (
e: React.ChangeEvent<HTMLSelectElement>
) => {
const { value } = e.target;
setFormData((prev) => ({ ...prev, itemRequestNotificationRadius: parseInt(value) }));
setError(null);
try {
const response = await userAPI.updateProfile({
itemRequestNotificationRadius: parseInt(value),
});
setProfileData(response.data);
updateUser(response.data);
} catch (err: any) {
console.error("Notification preferences update error:", err.response?.data);
const errorMessage =
err.response?.data?.error ||
err.response?.data?.message ||
"Failed to update notification radius";
setError(errorMessage);
}
};
const formatAddressDisplay = (address: Address) => {
return `${address.address1}, ${address.city}, ${address.state} ${address.zipCode}`;
};
@@ -455,7 +504,7 @@ const Profile: React.FC = () => {
if (
!geocodingService.isAddressComplete(addressData as AddressComponents)
) {
return;
return null;
}
setAddressGeocoding(true);
@@ -469,6 +518,7 @@ const Profile: React.FC = () => {
if ("error" in result) {
setAddressGeocodeError(result.details || result.error);
return null;
} else {
setAddressGeocodeSuccess(true);
setAddressFormData((prev) => ({
@@ -478,9 +528,11 @@ const Profile: React.FC = () => {
}));
// Clear success message after 3 seconds
setTimeout(() => setAddressGeocodeSuccess(false), 3000);
return { latitude: result.latitude, longitude: result.longitude };
}
} catch (error) {
setAddressGeocodeError("Failed to geocode address");
return null;
} finally {
setAddressGeocoding(false);
}
@@ -488,12 +540,13 @@ const Profile: React.FC = () => {
[]
);
const handleSaveAddress = async (e: React.FormEvent) => {
e.preventDefault();
const handleSaveAddress = async (e?: React.FormEvent | React.MouseEvent) => {
e?.preventDefault();
// Try to geocode the address before saving
let coordinates = null;
try {
await geocodeAddressForm(addressFormData);
coordinates = await geocodeAddressForm(addressFormData);
} catch (error) {
// Geocoding failed, but we'll continue with saving
console.warn(
@@ -502,12 +555,21 @@ const Profile: React.FC = () => {
);
}
// Prepare the data to save, including coordinates if geocoding succeeded
const dataToSave = {
...addressFormData,
...(coordinates && {
latitude: coordinates.latitude,
longitude: coordinates.longitude
})
};
try {
if (editingAddressId) {
// Update existing address
const response = await addressAPI.updateAddress(
editingAddressId,
addressFormData
dataToSave
);
setUserAddresses((prev) =>
prev.map((addr) =>
@@ -517,7 +579,7 @@ const Profile: React.FC = () => {
} else {
// Create new address
const response = await addressAPI.createAddress({
...addressFormData,
...dataToSave,
isPrimary: userAddresses.length === 0,
});
setUserAddresses((prev) => [...prev, response.data]);
@@ -548,58 +610,21 @@ const Profile: React.FC = () => {
setAddressGeocodeSuccess(false);
};
const usStates = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illinois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Carolina",
"North Dakota",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming",
];
// Use address autocomplete hook
const { parsePlace } = useAddressAutocomplete();
// Handle place selection from autocomplete
const handlePlaceSelect = useCallback((place: PlaceDetails) => {
const parsedAddress = parsePlace(place);
if (parsedAddress) {
setAddressFormData((prev) => ({
...prev,
...parsedAddress,
}));
setAddressGeocodeSuccess(true);
setTimeout(() => setAddressGeocodeSuccess(false), 3000);
}
}, [parsePlace]);
if (loading) {
return (
@@ -652,6 +677,15 @@ const Profile: React.FC = () => {
<i className="bi bi-gear me-2"></i>
Owner Settings
</button>
<button
className={`list-group-item list-group-item-action ${
activeSection === "notification-preferences" ? "active" : ""
}`}
onClick={() => setActiveSection("notification-preferences")}
>
<i className="bi bi-bell me-2"></i>
Notification Preferences
</button>
<button
className={`list-group-item list-group-item-action ${
activeSection === "rental-history" ? "active" : ""
@@ -682,112 +716,59 @@ const Profile: React.FC = () => {
{/* Profile Card */}
<div className="card mb-4">
<div className="card-body">
<form onSubmit={handleSubmit}>
<div className="text-center">
<div className="position-relative d-inline-block mb-3">
{imagePreview ? (
<img
src={imagePreview}
alt="Profile"
className="rounded-circle"
style={{
width: "120px",
height: "120px",
objectFit: "cover",
}}
/>
) : (
<div
className="rounded-circle bg-secondary d-flex align-items-center justify-content-center"
style={{ width: "120px", height: "120px" }}
>
<i
className="bi bi-person-fill text-white"
style={{ fontSize: "2.5rem" }}
></i>
</div>
)}
{editing && (
<label
htmlFor="profileImageOverview"
className="position-absolute bottom-0 end-0 btn btn-sm btn-primary rounded-circle"
style={{
width: "35px",
height: "35px",
padding: "0",
}}
>
<i className="bi bi-camera-fill"></i>
<input
type="file"
id="profileImageOverview"
accept="image/*"
onChange={handleImageChange}
className="d-none"
/>
</label>
)}
</div>
{editing ? (
<div>
<div className="row justify-content-center mb-3">
<div className="col-md-6">
<input
type="text"
className="form-control mb-2"
name="firstName"
value={formData.firstName}
onChange={handleChange}
placeholder="First Name"
required
/>
</div>
<div className="col-md-6">
<input
type="text"
className="form-control mb-2"
name="lastName"
value={formData.lastName}
onChange={handleChange}
placeholder="Last Name"
required
/>
</div>
</div>
<div className="d-flex gap-2 justify-content-center">
<button type="submit" className="btn btn-primary">
Save Changes
</button>
<button
type="button"
className="btn btn-secondary"
onClick={handleCancel}
>
Cancel
</button>
</div>
</div>
<div className="text-center">
<div className="position-relative d-inline-block mb-3">
{imagePreview ? (
<img
src={imagePreview}
alt="Profile"
className="rounded-circle"
style={{
width: "120px",
height: "120px",
objectFit: "cover",
}}
/>
) : (
<div>
<h5>
{profileData?.firstName} {profileData?.lastName}
</h5>
<p className="text-muted">@{profileData?.username}</p>
<div>
<button
type="button"
className="btn btn-outline-primary"
onClick={() => setEditing(true)}
>
<i className="bi bi-pencil me-2"></i>
Edit Profile
</button>
</div>
<div
className="rounded-circle bg-secondary d-flex align-items-center justify-content-center"
style={{ width: "120px", height: "120px" }}
>
<i
className="bi bi-person-fill text-white"
style={{ fontSize: "2.5rem" }}
></i>
</div>
)}
{editing && (
<label
htmlFor="profileImageOverview"
className="position-absolute bottom-0 end-0 btn btn-sm btn-primary rounded-circle"
style={{
width: "35px",
height: "35px",
padding: "0",
}}
>
<i className="bi bi-camera-fill"></i>
<input
type="file"
id="profileImageOverview"
accept="image/*"
onChange={handleImageChange}
className="d-none"
/>
</label>
)}
</div>
</form>
<div>
<h5>
{profileData?.firstName} {profileData?.lastName}
</h5>
<p className="text-muted">@{profileData?.username}</p>
</div>
</div>
</div>
</div>
@@ -807,6 +788,39 @@ const Profile: React.FC = () => {
</div>
{showPersonalInfo && (
<form onSubmit={handleSubmit}>
<div className="row mb-3">
<div className="col-md-6">
<label htmlFor="firstName" className="form-label">
First Name
</label>
<input
type="text"
className="form-control"
id="firstName"
name="firstName"
value={formData.firstName}
onChange={handleChange}
disabled={!editing}
required
/>
</div>
<div className="col-md-6">
<label htmlFor="lastName" className="form-label">
Last Name
</label>
<input
type="text"
className="form-control"
id="lastName"
name="lastName"
value={formData.lastName}
onChange={handleChange}
disabled={!editing}
required
/>
</div>
</div>
<div className="mb-3">
<label htmlFor="email" className="form-label">
Email
@@ -931,7 +945,7 @@ const Profile: React.FC = () => {
{/* Address Form */}
{showAddressForm && (
<form onSubmit={handleSaveAddress}>
<div>
<div className="row mb-3">
<div className="col-md-6">
<label
@@ -940,15 +954,26 @@ const Profile: React.FC = () => {
>
Address Line 1 *
</label>
<input
type="text"
className="form-control"
<AddressAutocomplete
id="addressFormAddress1"
name="address1"
value={addressFormData.address1}
onChange={handleAddressFormChange}
placeholder=""
onChange={(value) => {
const syntheticEvent = {
target: {
name: "address1",
value,
type: "text",
},
} as React.ChangeEvent<HTMLInputElement>;
handleAddressFormChange(syntheticEvent);
}}
onPlaceSelect={handlePlaceSelect}
placeholder="Start typing an address..."
className="form-control"
required
countryRestriction="us"
types={["address"]}
/>
</div>
<div className="col-md-6">
@@ -1025,6 +1050,11 @@ const Profile: React.FC = () => {
name="zipCode"
value={addressFormData.zipCode}
onChange={handleAddressFormChange}
onKeyDown={(e) => {
if (e.key === "Enter") {
handleSaveAddress(e);
}
}}
placeholder="12345"
required
/>
@@ -1032,7 +1062,11 @@ const Profile: React.FC = () => {
</div>
<div className="d-flex gap-2">
<button type="submit" className="btn btn-primary">
<button
type="button"
className="btn btn-primary"
onClick={handleSaveAddress}
>
{editingAddressId
? "Update Address"
: "Save Address"}
@@ -1045,7 +1079,7 @@ const Profile: React.FC = () => {
Cancel
</button>
</div>
</form>
</div>
)}
</>
)}
@@ -1053,36 +1087,6 @@ const Profile: React.FC = () => {
<hr className="my-4" />
{/* Notification Preferences Section */}
<div className="mb-3">
<label className="form-label">Notification Preferences</label>
<div className="mb-3">
<label htmlFor="itemRequestNotificationRadius" className="form-label">
Item Requests Notification Radius
</label>
<select
className="form-select"
id="itemRequestNotificationRadius"
name="itemRequestNotificationRadius"
value={formData.itemRequestNotificationRadius}
onChange={handleChange}
disabled={!editing}
>
<option value="5">5 miles</option>
<option value="10">10 miles</option>
<option value="25">25 miles</option>
<option value="50">50 miles</option>
<option value="100">100 miles</option>
</select>
<div className="form-text">
You'll receive notifications when someone posts an item request within this distance from your primary address
</div>
</div>
</div>
<hr className="my-4" />
{editing ? (
<div className="d-flex gap-2">
<button type="submit" className="btn btn-primary">
@@ -1447,6 +1451,39 @@ const Profile: React.FC = () => {
</div>
</div>
)}
{/* Notification Preferences Section */}
{activeSection === "notification-preferences" && (
<div>
<h4 className="mb-4">Notification Preferences</h4>
<div className="card">
<div className="card-body">
<div className="mb-3">
<label htmlFor="itemRequestNotificationRadius" className="form-label">
Item Requests Notification Radius
</label>
<select
className="form-select"
id="itemRequestNotificationRadius"
name="itemRequestNotificationRadius"
value={formData.itemRequestNotificationRadius}
onChange={handleNotificationRadiusChange}
>
<option value="5">5 miles</option>
<option value="10">10 miles</option>
<option value="25">25 miles</option>
<option value="50">50 miles</option>
<option value="100">100 miles</option>
</select>
<div className="form-text">
You'll receive notifications when someone posts an item request within this distance from your primary address
</div>
</div>
</div>
</div>
</div>
)}
</div>
</div>