Compare commits

...

2 Commits

Author SHA1 Message Date
jackiettran
83872fe039 fixing bugs with item notification radius 2025-11-20 15:01:15 -05:00
jackiettran
413ac6b6e2 Item request notifications 2025-11-18 22:28:47 -05:00
17 changed files with 1389 additions and 576 deletions

View File

@@ -57,6 +57,18 @@ const ForumPost = sequelize.define('ForumPost', {
allowNull: true,
defaultValue: []
},
zipCode: {
type: DataTypes.STRING,
allowNull: true
},
latitude: {
type: DataTypes.DECIMAL(10, 8),
allowNull: true
},
longitude: {
type: DataTypes.DECIMAL(11, 8),
allowNull: true
},
isDeleted: {
type: DataTypes.BOOLEAN,
defaultValue: false

View File

@@ -142,6 +142,15 @@ const User = sequelize.define(
defaultValue: "user",
allowNull: false,
},
itemRequestNotificationRadius: {
type: DataTypes.INTEGER,
defaultValue: 10,
allowNull: true,
validate: {
min: 1,
max: 100,
},
},
},
{
hooks: {

View File

@@ -5,6 +5,8 @@ const { authenticateToken, requireAdmin, optionalAuth } = require('../middleware
const { uploadForumPostImages, uploadForumCommentImages } = require('../middleware/upload');
const logger = require('../utils/logger');
const emailServices = require('../services/email');
const googleMapsService = require('../services/googleMapsService');
const locationService = require('../services/locationService');
const router = express.Router();
// Helper function to build nested comment tree
@@ -238,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 } = 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') {
@@ -252,12 +254,69 @@ router.post('/posts', authenticateToken, uploadForumPostImages, async (req, res)
// Extract image filenames if uploaded
const images = req.files ? req.files.map(file => file.filename) : [];
// Initialize location fields
let latitude = null;
let longitude = null;
// 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;
const reqLogger = logger.withRequestId(req.id);
reqLogger.info("Geocoded zip code for item request", {
zipCode,
latitude,
longitude,
source: 'geocoded'
});
}
} catch (error) {
const reqLogger = logger.withRequestId(req.id);
reqLogger.error("Geocoding failed for item request", {
error: error.message,
zipCode
});
// Continue without coordinates - post will still be created
}
}
}
const post = await ForumPost.create({
title,
content,
category,
authorId: req.user.id,
images
images,
zipCode: zipCode || null,
latitude,
longitude
});
// Create tags if provided
@@ -295,6 +354,111 @@ router.post('/posts', authenticateToken, uploadForumPostImages, async (req, res)
});
res.status(201).json(postWithDetails);
// Send location-based notifications for item requests (asynchronously)
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,
longitude,
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
if (user.id !== req.user.id) {
usersChecked++;
// Get user's notification preference
const userProfile = await User.findByPk(user.id, {
attributes: ['itemRequestNotificationRadius']
});
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 {
await emailServices.forum.sendItemRequestNotification(
user,
postAuthor,
post,
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,
recipientId: user.id,
postId: post.id
});
}
} else {
usersSkipped++;
}
}
}
logger.info("Item request notifications complete", {
postId: post.id,
totalNearbyUsers: nearbyUsers.length,
usersChecked,
usersSkipped,
notificationsSent
});
} catch (error) {
logger.error("Failed to process item request notifications", {
error: error.message,
stack: error.stack,
postId: post.id
});
}
})();
} 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);
reqLogger.error("Forum post creation failed", {

View File

@@ -211,19 +211,20 @@ router.get('/:id', async (req, res) => {
router.put('/profile', authenticateToken, async (req, res) => {
try {
const {
firstName,
lastName,
email,
phone,
const {
firstName,
lastName,
email,
phone,
address1,
address2,
city,
state,
zipCode,
country
country,
itemRequestNotificationRadius
} = req.body;
// Build update object, excluding empty email
const updateData = {
firstName,
@@ -234,7 +235,8 @@ router.put('/profile', authenticateToken, async (req, res) => {
city,
state,
zipCode,
country
country,
itemRequestNotificationRadius
};
// Only include email if it's not empty

View File

@@ -63,6 +63,7 @@ class TemplateManager {
"forumAnswerAcceptedToCommentAuthor.html",
"forumThreadActivityToParticipant.html",
"forumPostClosed.html",
"forumItemRequestNotification.html",
];
for (const templateFile of templateFiles) {

View File

@@ -8,6 +8,7 @@ const TemplateManager = require("../core/TemplateManager");
* - Sending reply notifications to comment authors
* - Sending answer accepted notifications
* - Sending thread activity notifications to participants
* - Sending location-based item request notifications to nearby users
*/
class ForumEmailService {
constructor() {
@@ -384,6 +385,66 @@ class ForumEmailService {
return { success: false, error: error.message };
}
}
/**
* Send notification to nearby users about an item request
* @param {Object} recipient - Recipient user object
* @param {string} recipient.firstName - Recipient's first name
* @param {string} recipient.email - Recipient's email
* @param {Object} requester - User who posted the item request
* @param {string} requester.firstName - Requester's first name
* @param {string} requester.lastName - Requester's last name
* @param {Object} post - Forum post object (item request)
* @param {number} post.id - Post ID
* @param {string} post.title - Item being requested
* @param {string} post.content - Request description
* @param {string|number} distance - Distance from recipient to request location (in miles)
* @returns {Promise<{success: boolean, messageId?: string, error?: string}>}
*/
async sendItemRequestNotification(recipient, requester, post, distance) {
if (!this.initialized) {
await this.initialize();
}
try {
const frontendUrl = process.env.FRONTEND_URL || "http://localhost:3000";
const postUrl = `${frontendUrl}/forum/posts/${post.id}`;
const variables = {
recipientName: recipient.firstName || "there",
requesterName:
`${requester.firstName} ${requester.lastName}`.trim() || "Someone",
itemRequested: post.title,
requestDescription: post.content,
postUrl: postUrl,
distance: distance,
};
const htmlContent = await this.templateManager.renderTemplate(
"forumItemRequestNotification",
variables
);
const subject = `Someone nearby is looking for: ${post.title}`;
const result = await this.emailClient.sendEmail(
recipient.email,
subject,
htmlContent
);
if (result.success) {
console.log(
`Item request notification email sent to ${recipient.email}`
);
}
return result;
} catch (error) {
console.error("Failed to send item request notification email:", error);
return { success: false, error: error.message };
}
}
}
module.exports = ForumEmailService;

View File

@@ -0,0 +1,127 @@
const { sequelize } = require('../models');
const { QueryTypes } = require('sequelize');
class LocationService {
/**
* Find users within a specified radius of coordinates
* Uses the Haversine formula to calculate great-circle distance between two points
*
* @param {number} latitude - Center point latitude
* @param {number} longitude - Center point longitude
* @param {number} radiusMiles - Search radius in miles (default: 10)
* @returns {Promise<Array>} Array of users with their distance from the center point
*/
async findUsersInRadius(latitude, longitude, radiusMiles = 10) {
if (!latitude || !longitude) {
throw new Error('Latitude and longitude are required');
}
if (radiusMiles <= 0 || radiusMiles > 100) {
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))
// * cos(radians(lng2) - radians(lng1))
// + sin(radians(lat1)) * sin(radians(lat2)))
// Note: 3959 is Earth's radius in miles
const query = `
SELECT * FROM (
SELECT
u.id,
u.email,
u."firstName",
u."lastName",
ua.latitude,
ua.longitude,
(3959 * acos(
LEAST(1.0,
cos(radians(:lat)) * cos(radians(ua.latitude))
* cos(radians(ua.longitude) - radians(:lng))
+ sin(radians(:lat)) * sin(radians(ua.latitude))
)
)) AS distance
FROM "Users" u
INNER JOIN "UserAddresses" ua ON u.id = ua."userId"
WHERE ua."isPrimary" = true
AND ua.latitude IS NOT NULL
AND ua.longitude IS NOT NULL
) AS user_distances
WHERE distance < :radiusMiles
ORDER BY distance ASC
`;
const users = await sequelize.query(query, {
replacements: {
lat: parseFloat(latitude),
lng: parseFloat(longitude),
radiusMiles: parseFloat(radiusMiles)
},
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,
firstName: user.firstName,
lastName: user.lastName,
latitude: parseFloat(user.latitude),
longitude: parseFloat(user.longitude),
distance: parseFloat(user.distance).toFixed(2) // Round to 2 decimal places
}));
} catch (error) {
console.error('Error finding users in radius:', error);
throw new Error(`Failed to find users in radius: ${error.message}`);
}
}
/**
* Calculate distance between two points using Haversine formula
*
* @param {number} lat1 - First point latitude
* @param {number} lon1 - First point longitude
* @param {number} lat2 - Second point latitude
* @param {number} lon2 - Second point longitude
* @returns {number} Distance in miles
*/
calculateDistance(lat1, lon1, lat2, lon2) {
const R = 3959; // Earth's radius in miles
const dLat = this.toRadians(lat2 - lat1);
const dLon = this.toRadians(lon2 - lon1);
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(this.toRadians(lat1)) * Math.cos(this.toRadians(lat2)) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance = R * c;
return distance;
}
/**
* Convert degrees to radians
* @param {number} degrees
* @returns {number} Radians
*/
toRadians(degrees) {
return degrees * (Math.PI / 180);
}
}
module.exports = new LocationService();

View File

@@ -0,0 +1,295 @@
<!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" />
<title>Item Request Near You</title>
<style>
/* Reset styles */
body,
table,
td,
p,
a,
li,
blockquote {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
/* Base styles */
body {
margin: 0;
padding: 0;
width: 100% !important;
min-width: 100%;
height: 100%;
background-color: #f8f9fa;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: #212529;
}
/* Container */
.email-container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Header */
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 40px 30px;
text-align: center;
}
.logo {
font-size: 32px;
font-weight: 700;
color: #ffffff;
text-decoration: none;
letter-spacing: -1px;
}
.tagline {
color: #e0d4f7;
font-size: 14px;
margin-top: 8px;
}
/* Content */
.content {
padding: 40px 30px;
}
.content h1 {
font-size: 24px;
font-weight: 600;
margin: 0 0 20px 0;
color: #212529;
}
.content h2 {
font-size: 20px;
font-weight: 600;
margin: 30px 0 15px 0;
color: #495057;
}
.content p {
margin: 0 0 16px 0;
color: #6c757d;
line-height: 1.6;
}
.content strong {
color: #495057;
}
/* Button */
.button {
display: inline-block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff !important;
text-decoration: none;
padding: 16px 32px;
border-radius: 6px;
font-weight: 600;
margin: 20px 0;
text-align: center;
transition: all 0.3s ease;
}
.button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
/* Info box */
.info-box {
background-color: #fff3cd;
border-left: 4px solid #ffc107;
padding: 20px;
margin: 20px 0;
border-radius: 0 6px 6px 0;
}
.info-box p {
margin: 0;
color: #856404;
}
/* Item request box */
.request-box {
background-color: #f8f9fa;
border-left: 4px solid #667eea;
padding: 20px;
margin: 20px 0;
border-radius: 0 6px 6px 0;
}
.request-box .title {
font-size: 18px;
font-weight: 600;
color: #495057;
margin: 0 0 15px 0;
}
.request-box .description {
color: #212529;
line-height: 1.6;
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
.request-box .requester {
font-size: 14px;
color: #6c757d;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #dee2e6;
}
/* Help section */
.help-section {
background-color: #d4edda;
border: 1px solid #c3e6cb;
padding: 20px;
margin: 20px 0;
border-radius: 6px;
text-align: center;
}
.help-section p {
margin: 0;
color: #155724;
font-weight: 500;
}
/* Footer */
.footer {
background-color: #f8f9fa;
padding: 30px;
text-align: center;
border-top: 1px solid #e9ecef;
}
.footer p {
margin: 0 0 10px 0;
font-size: 14px;
color: #6c757d;
}
.footer a {
color: #667eea;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
/* Responsive */
@media only screen and (max-width: 600px) {
.email-container {
margin: 0;
border-radius: 0;
}
.header,
.content,
.footer {
padding: 20px;
}
.logo {
font-size: 28px;
}
.content h1 {
font-size: 22px;
}
.button {
display: block;
width: 100%;
box-sizing: border-box;
}
.request-box {
padding: 15px;
}
}
</style>
</head>
<body>
<div class="email-container">
<div class="header">
<div class="logo">RentAll</div>
<div class="tagline">Item Request Near You</div>
</div>
<div class="content">
<p>Hi {{recipientName}},</p>
<h1>Someone nearby is looking for an item!</h1>
<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>
<div class="description">{{requestDescription}}</div>
<div class="requester">Posted by {{requesterName}}</div>
</div>
<div class="help-section">
<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>
<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>
</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>If you have any questions, please contact our support team.</p>
<p>&copy; 2024 RentAll. All rights reserved.</p>
</div>
</div>
</body>
</html>

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",

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

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

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

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: "",
@@ -20,11 +22,27 @@ const CreateForumPost: React.FC = () => {
| "community_resources"
| "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",
@@ -54,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[]) => {
@@ -111,6 +143,11 @@ const CreateForumPost: React.FC = () => {
return;
}
if (formData.category === "item_request" && !formData.zipCode.trim()) {
setError("Zip code is required for item requests");
return;
}
try {
setIsSubmitting(true);
@@ -125,6 +162,16 @@ const CreateForumPost: React.FC = () => {
submitData.append('tags', JSON.stringify(formData.tags));
}
// 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
imageFiles.forEach((file) => {
submitData.append('images', file);
@@ -247,6 +294,31 @@ const CreateForumPost: React.FC = () => {
</div>
</div>
{/* Location fields for item requests */}
{formData.category === "item_request" && (
<div className="mb-3">
<label htmlFor="zipCode" className="form-label">
Zip Code <span className="text-danger">*</span>
</label>
<input
type="text"
className="form-control"
id="zipCode"
name="zipCode"
value={formData.zipCode}
onChange={handleInputChange}
placeholder="Enter your zip code..."
maxLength={10}
disabled={isSubmitting}
required
/>
<div className="form-text">
Your zip code helps notify nearby users who might have
the item you're looking for
</div>
</div>
)}
{/* Content */}
<div className="mb-3">
<label htmlFor="content" className="form-label">

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) {

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 {

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();
@@ -34,6 +37,7 @@ const Profile: React.FC = () => {
zipCode: "",
country: "",
profileImage: "",
itemRequestNotificationRadius: 10,
});
const [imageFile, setImageFile] = useState<File | null>(null);
const [imagePreview, setImagePreview] = useState<string | null>(null);
@@ -137,6 +141,7 @@ const Profile: React.FC = () => {
zipCode: response.data.zipCode || "",
country: response.data.country || "",
profileImage: response.data.profileImage || "",
itemRequestNotificationRadius: response.data.itemRequestNotificationRadius || 10,
});
if (response.data.profileImage) {
setImagePreview(getImageUrl(response.data.profileImage));
@@ -259,7 +264,7 @@ const Profile: React.FC = () => {
};
const handleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
@@ -356,6 +361,7 @@ const Profile: React.FC = () => {
zipCode: profileData.zipCode || "",
country: profileData.country || "",
profileImage: profileData.profileImage || "",
itemRequestNotificationRadius: profileData.itemRequestNotificationRadius || 10,
});
setImagePreview(
profileData.profileImage ? getImageUrl(profileData.profileImage) : null
@@ -395,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}`;
};
@@ -452,7 +504,7 @@ const Profile: React.FC = () => {
if (
!geocodingService.isAddressComplete(addressData as AddressComponents)
) {
return;
return null;
}
setAddressGeocoding(true);
@@ -466,6 +518,7 @@ const Profile: React.FC = () => {
if ("error" in result) {
setAddressGeocodeError(result.details || result.error);
return null;
} else {
setAddressGeocodeSuccess(true);
setAddressFormData((prev) => ({
@@ -475,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);
}
@@ -485,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(
@@ -499,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) =>
@@ -514,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]);
@@ -545,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 (
@@ -649,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" : ""
@@ -679,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>
@@ -804,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
@@ -835,6 +852,241 @@ const Profile: React.FC = () => {
/>
</div>
<hr className="my-4" />
{/* Saved Addresses Section */}
<div className="mb-3">
<label className="form-label">Saved Addresses</label>
{addressesLoading ? (
<div className="text-center py-3">
<div
className="spinner-border spinner-border-sm"
role="status"
>
<span className="visually-hidden">
Loading addresses...
</span>
</div>
</div>
) : (
<>
{userAddresses.length === 0 && !showAddressForm ? (
<div className="text-center py-3">
<p className="text-muted mb-2">No saved addresses yet</p>
<small className="text-muted">
Add an address or create your first listing to save
one automatically
</small>
</div>
) : (
<>
{userAddresses.length > 0 && !showAddressForm && (
<>
<div className="list-group list-group-flush mb-3">
{userAddresses.map((address) => (
<div
key={address.id}
className="list-group-item d-flex justify-content-between align-items-start"
>
<div className="flex-grow-1">
<div className="fw-medium">
{formatAddressDisplay(address)}
</div>
{address.address2 && (
<small className="text-muted">
{address.address2}
</small>
)}
</div>
<div className="btn-group">
<button
className="btn btn-outline-secondary btn-sm"
onClick={() =>
handleEditAddress(address)
}
>
<i className="bi bi-pencil"></i>
</button>
<button
className="btn btn-outline-danger btn-sm"
onClick={() =>
handleDeleteAddress(address.id)
}
>
<i className="bi bi-trash"></i>
</button>
</div>
</div>
))}
</div>
<button
className="btn btn-outline-primary"
onClick={handleAddAddress}
>
Add New Address
</button>
</>
)}
</>
)}
{/* Show Add New Address button even when no addresses exist */}
{userAddresses.length === 0 && !showAddressForm && (
<div className="text-center">
<button
className="btn btn-outline-primary"
onClick={handleAddAddress}
>
Add New Address
</button>
</div>
)}
{/* Address Form */}
{showAddressForm && (
<div>
<div className="row mb-3">
<div className="col-md-6">
<label
htmlFor="addressFormAddress1"
className="form-label"
>
Address Line 1 *
</label>
<AddressAutocomplete
id="addressFormAddress1"
name="address1"
value={addressFormData.address1}
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">
<label
htmlFor="addressFormAddress2"
className="form-label"
>
Address Line 2
</label>
<input
type="text"
className="form-control"
id="addressFormAddress2"
name="address2"
value={addressFormData.address2}
onChange={handleAddressFormChange}
placeholder="Apt, Suite, Unit, etc."
/>
</div>
</div>
<div className="row mb-3">
<div className="col-md-6">
<label
htmlFor="addressFormCity"
className="form-label"
>
City *
</label>
<input
type="text"
className="form-control"
id="addressFormCity"
name="city"
value={addressFormData.city}
onChange={handleAddressFormChange}
required
/>
</div>
<div className="col-md-3">
<label
htmlFor="addressFormState"
className="form-label"
>
State *
</label>
<select
className="form-select"
id="addressFormState"
name="state"
value={addressFormData.state}
onChange={handleAddressFormChange}
required
>
<option value="">Select State</option>
{usStates.map((state) => (
<option key={state} value={state}>
{state}
</option>
))}
</select>
</div>
<div className="col-md-3">
<label
htmlFor="addressFormZipCode"
className="form-label"
>
ZIP Code *
</label>
<input
type="text"
className="form-control"
id="addressFormZipCode"
name="zipCode"
value={addressFormData.zipCode}
onChange={handleAddressFormChange}
onKeyDown={(e) => {
if (e.key === "Enter") {
handleSaveAddress(e);
}
}}
placeholder="12345"
required
/>
</div>
</div>
<div className="d-flex gap-2">
<button
type="button"
className="btn btn-primary"
onClick={handleSaveAddress}
>
{editingAddressId
? "Update Address"
: "Save Address"}
</button>
<button
type="button"
className="btn btn-secondary"
onClick={handleCancelAddressForm}
>
Cancel
</button>
</div>
</div>
)}
</>
)}
</div>
<hr className="my-4" />
{editing ? (
<div className="d-flex gap-2">
<button type="submit" className="btn btn-primary">
@@ -1180,219 +1432,6 @@ const Profile: React.FC = () => {
<div>
<h4 className="mb-4">Owner Settings</h4>
{/* Addresses Card */}
<div className="card mb-4">
<div className="card-body">
<h5 className="card-title">Saved Addresses</h5>
{addressesLoading ? (
<div className="text-center py-3">
<div
className="spinner-border spinner-border-sm"
role="status"
>
<span className="visually-hidden">
Loading addresses...
</span>
</div>
</div>
) : (
<>
{userAddresses.length === 0 && !showAddressForm ? (
<div className="text-center py-3">
<p className="text-muted">No saved addresses yet</p>
<small className="text-muted">
Add an address or create your first listing to save
one automatically
</small>
</div>
) : (
<>
{userAddresses.length > 0 && !showAddressForm && (
<>
<div className="list-group list-group-flush mb-3">
{userAddresses.map((address) => (
<div
key={address.id}
className="list-group-item d-flex justify-content-between align-items-start"
>
<div className="flex-grow-1">
<div className="fw-medium">
{formatAddressDisplay(address)}
</div>
{address.address2 && (
<small className="text-muted">
{address.address2}
</small>
)}
</div>
<div className="btn-group">
<button
className="btn btn-outline-secondary btn-sm"
onClick={() =>
handleEditAddress(address)
}
>
<i className="bi bi-pencil"></i>
</button>
<button
className="btn btn-outline-danger btn-sm"
onClick={() =>
handleDeleteAddress(address.id)
}
>
<i className="bi bi-trash"></i>
</button>
</div>
</div>
))}
</div>
<button
className="btn btn-outline-primary"
onClick={handleAddAddress}
>
Add New Address
</button>
</>
)}
</>
)}
{/* Show Add New Address button even when no addresses exist */}
{userAddresses.length === 0 && !showAddressForm && (
<div className="text-center">
<button
className="btn btn-outline-primary"
onClick={handleAddAddress}
>
Add New Address
</button>
</div>
)}
{/* Address Form */}
{showAddressForm && (
<form onSubmit={handleSaveAddress}>
<div className="row mb-3">
<div className="col-md-6">
<label
htmlFor="addressFormAddress1"
className="form-label"
>
Address Line 1 *
</label>
<input
type="text"
className="form-control"
id="addressFormAddress1"
name="address1"
value={addressFormData.address1}
onChange={handleAddressFormChange}
placeholder=""
required
/>
</div>
<div className="col-md-6">
<label
htmlFor="addressFormAddress2"
className="form-label"
>
Address Line 2
</label>
<input
type="text"
className="form-control"
id="addressFormAddress2"
name="address2"
value={addressFormData.address2}
onChange={handleAddressFormChange}
placeholder="Apt, Suite, Unit, etc."
/>
</div>
</div>
<div className="row mb-3">
<div className="col-md-6">
<label
htmlFor="addressFormCity"
className="form-label"
>
City *
</label>
<input
type="text"
className="form-control"
id="addressFormCity"
name="city"
value={addressFormData.city}
onChange={handleAddressFormChange}
required
/>
</div>
<div className="col-md-3">
<label
htmlFor="addressFormState"
className="form-label"
>
State *
</label>
<select
className="form-select"
id="addressFormState"
name="state"
value={addressFormData.state}
onChange={handleAddressFormChange}
required
>
<option value="">Select State</option>
{usStates.map((state) => (
<option key={state} value={state}>
{state}
</option>
))}
</select>
</div>
<div className="col-md-3">
<label
htmlFor="addressFormZipCode"
className="form-label"
>
ZIP Code *
</label>
<input
type="text"
className="form-control"
id="addressFormZipCode"
name="zipCode"
value={addressFormData.zipCode}
onChange={handleAddressFormChange}
placeholder="12345"
required
/>
</div>
</div>
<div className="d-flex gap-2">
<button type="submit" className="btn btn-primary">
{editingAddressId
? "Update Address"
: "Save Address"}
</button>
<button
type="button"
className="btn btn-secondary"
onClick={handleCancelAddressForm}
>
Cancel
</button>
</div>
</form>
)}
</>
)}
</div>
</div>
{/* Availability Card */}
<div className="card">
<div className="card-body">
@@ -1412,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>

View File

@@ -32,6 +32,7 @@ export interface User {
role?: "user" | "admin";
stripeConnectedAccountId?: string;
addresses?: Address[];
itemRequestNotificationRadius?: number;
}
export interface Message {