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

75
backend/routes/forum.js
View File

@@ -240,7 +240,7 @@ router.get('/posts/:id', optionalAuth, async (req, res) => {
// POST /api/forum/posts - Create new post
router.post('/posts', authenticateToken, uploadForumPostImages, async (req, res) => {
try {
let { title, content, category, tags, zipCode } = req.body;
let { title, content, category, tags, zipCode, latitude: providedLat, longitude: providedLng } = req.body;
// Parse tags if they come as JSON string (from FormData)
if (typeof tags === 'string') {
@@ -258,10 +258,34 @@ router.post('/posts', authenticateToken, uploadForumPostImages, async (req, res)
let latitude = null;
let longitude = null;
// Geocode zip code for item requests
// Use provided coordinates if available, otherwise geocode zip code
if (category === 'item_request' && zipCode) {
// If coordinates were provided from a saved address, use them directly
if (providedLat && providedLng) {
latitude = parseFloat(providedLat);
longitude = parseFloat(providedLng);
const reqLogger = logger.withRequestId(req.id);
reqLogger.info("Using provided coordinates for item request", {
zipCode,
latitude,
longitude,
source: 'saved_address'
});
} else {
// Otherwise, geocode the zip code
try {
const geocodeResult = await googleMapsService.geocodeAddress(zipCode);
// Check if geocoding was successful
if (geocodeResult.error) {
const reqLogger = logger.withRequestId(req.id);
reqLogger.error("Geocoding failed for item request", {
error: geocodeResult.error,
status: geocodeResult.status,
zipCode
});
} else if (geocodeResult.latitude && geocodeResult.longitude) {
latitude = geocodeResult.latitude;
longitude = geocodeResult.longitude;
@@ -269,8 +293,10 @@ router.post('/posts', authenticateToken, uploadForumPostImages, async (req, res)
reqLogger.info("Geocoded zip code for item request", {
zipCode,
latitude,
longitude
longitude,
source: 'geocoded'
});
}
} catch (error) {
const reqLogger = logger.withRequestId(req.id);
reqLogger.error("Geocoding failed for item request", {
@@ -280,6 +306,7 @@ router.post('/posts', authenticateToken, uploadForumPostImages, async (req, res)
// Continue without coordinates - post will still be created
}
}
}
const post = await ForumPost.create({
title,
@@ -332,6 +359,13 @@ router.post('/posts', authenticateToken, uploadForumPostImages, async (req, res)
if (category === 'item_request' && latitude && longitude) {
(async () => {
try {
logger.info("Starting item request notifications", {
postId: post.id,
latitude,
longitude,
zipCode
});
// Find all users within maximum radius (100 miles)
const nearbyUsers = await locationService.findUsersInRadius(
latitude,
@@ -339,10 +373,17 @@ router.post('/posts', authenticateToken, uploadForumPostImages, async (req, res)
100
);
logger.info("Found nearby users", {
postId: post.id,
count: nearbyUsers.length,
users: nearbyUsers.map(u => ({ id: u.id, distance: u.distance }))
});
const postAuthor = await User.findByPk(req.user.id);
let notificationsSent = 0;
let usersChecked = 0;
let usersSkipped = 0;
for (const user of nearbyUsers) {
// Don't notify the requester
@@ -356,6 +397,17 @@ router.post('/posts', authenticateToken, uploadForumPostImages, async (req, res)
const userPreferredRadius = userProfile?.itemRequestNotificationRadius || 10;
logger.info("Checking user notification eligibility", {
postId: post.id,
userId: user.id,
userEmail: user.email,
userCoordinates: { lat: user.latitude, lng: user.longitude },
postCoordinates: { lat: latitude, lng: longitude },
userDistance: user.distance,
userPreferredRadius,
willNotify: parseFloat(user.distance) <= userPreferredRadius
});
// Only notify if within user's preferred radius
if (parseFloat(user.distance) <= userPreferredRadius) {
try {
@@ -366,6 +418,11 @@ router.post('/posts', authenticateToken, uploadForumPostImages, async (req, res)
user.distance
);
notificationsSent++;
logger.info("Sent notification to user", {
postId: post.id,
userId: user.id,
distance: user.distance
});
} catch (emailError) {
logger.error("Failed to send item request notification", {
error: emailError.message,
@@ -373,14 +430,17 @@ router.post('/posts', authenticateToken, uploadForumPostImages, async (req, res)
postId: post.id
});
}
} else {
usersSkipped++;
}
}
}
logger.info("Item request notifications sent", {
logger.info("Item request notifications complete", {
postId: post.id,
totalNearbyUsers: nearbyUsers.length,
usersChecked,
usersSkipped,
notificationsSent
});
} catch (error) {
@@ -391,6 +451,13 @@ router.post('/posts', authenticateToken, uploadForumPostImages, async (req, res)
});
}
})();
} else if (category === 'item_request') {
logger.warn("Item request created without location", {
postId: post.id,
zipCode,
hasLatitude: !!latitude,
hasLongitude: !!longitude
});
}
} catch (error) {
const reqLogger = logger.withRequestId(req.id);

17
backend/services/locationService.js
View File

@@ -20,6 +20,12 @@ class LocationService {
throw new Error('Radius must be between 1 and 100 miles');
}
console.log('Finding users in radius:', {
centerLatitude: latitude,
centerLongitude: longitude,
radiusMiles
});
try {
// Haversine formula:
// distance = 3959 * acos(cos(radians(lat1)) * cos(radians(lat2))
@@ -27,6 +33,7 @@ class LocationService {
// + sin(radians(lat1)) * sin(radians(lat2)))
// Note: 3959 is Earth's radius in miles
const query = `
SELECT * FROM (
SELECT
u.id,
u.email,
@@ -46,7 +53,8 @@ class LocationService {
WHERE ua."isPrimary" = true
AND ua.latitude IS NOT NULL
AND ua.longitude IS NOT NULL
HAVING distance < :radiusMiles
) AS user_distances
WHERE distance < :radiusMiles
ORDER BY distance ASC
`;
@@ -59,6 +67,13 @@ class LocationService {
type: QueryTypes.SELECT
});
console.log('Users found in radius:', users.map(u => ({
id: u.id,
userLat: u.latitude,
userLng: u.longitude,
distance: parseFloat(u.distance).toFixed(2)
})));
return users.map(user => ({
id: user.id,
email: user.email,

70
backend/templates/emails/forumItemRequestNotification.html
View File

@@ -1,17 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Item Request Near You</title>
<style>
/* Reset styles */
body, table, td, p, a, li, blockquote {
body,
table,
td,
p,
a,
li,
blockquote {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table, td {
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
@@ -27,7 +34,8 @@
min-width: 100%;
height: 100%;
background-color: #f8f9fa;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: #212529;
}
@@ -111,18 +119,6 @@
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
/* Distance badge */
.distance-badge {
display: inline-block;
background-color: #e7f3ff;
color: #0066cc;
padding: 6px 12px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
margin: 10px 0;
}
/* Info box */
.info-box {
background-color: #fff3cd;
@@ -215,7 +211,9 @@
border-radius: 0;
}
.header, .content, .footer {
.header,
.content,
.footer {
padding: 20px;
}
@@ -238,8 +236,8 @@
}
}
</style>
</head>
<body>
</head>
<body>
<div class="email-container">
<div class="header">
<div class="logo">RentAll</div>
@@ -251,9 +249,10 @@
<h1>Someone nearby is looking for an item!</h1>
<div class="distance-badge">📍 About {{distance}} miles away</div>
<p><strong>{{requesterName}}</strong> posted an item request in your area. You might be able to help!</p>
<p>
<strong>{{requesterName}}</strong> posted an item request in your
area. You might be able to help!
</p>
<div class="request-box">
<div class="title">{{itemRequested}}</div>
@@ -262,24 +261,35 @@
</div>
<div class="help-section">
<p>💡 Have this item? You can help a neighbor and potentially earn money!</p>
<p>💡 Have this item? You can help a neighbor!</p>
</div>
<a href="{{postUrl}}" class="button">View Request & Respond</a>
<p>Click the button above to see the full details and offer your help if you have the item they're looking for.</p>
<p>
Click the button above to see the full details and offer your help if
you have the item they're looking for.
</p>
<div class="info-box">
<p><strong>Why did I get this?</strong> You're receiving this notification because you're located within the requested area for this item. Help build your local community by responding to nearby requests!</p>
<p>
<strong>Why did I get this?</strong> You're receiving this
notification because you're located within the requested area for
this item. Help build your local community by responding to nearby
requests!
</p>
</div>
</div>
<div class="footer">
<p><strong>RentAll</strong></p>
<p>You received this email because someone near you posted an item request.</p>
<p>
You received this email because someone near you posted an item
request.
</p>
<p>If you have any questions, please contact our support team.</p>
<p>&copy; 2024 RentAll. All rights reserved.</p>
</div>
</div>
</body>
</body>
</html>

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 };
};

40
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;
// 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 {

335
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,7 +716,6 @@ 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 ? (
@@ -729,65 +762,13 @@ const Profile: React.FC = () => {
)}
</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>
<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>
)}
</div>
</form>
</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>