Improve location autocomplete to search business names

[unforced]

Overview

Improves the Google Maps autocomplete to search for and prioritize business names, not just addresses.

The Problem

• Autocomplete was only searching for addresses (geocode type)
• Couldn't find businesses like "Boulder Theater" or "Rayback Collective"
• Made it hard to add events at well-known venues

The Solution

• Removed the types restriction to allow all location types
• Now searches both businesses (establishments) and addresses
• Smart formatting that prioritizes business names

How It Works

1. For businesses: Shows the business name prominently

   • Well-known places: Just shows "Boulder Theater"
   • Specific locations: Shows "Business Name, Full Address"

2. For addresses: Shows the full formatted address

3. Detection: Automatically detects establishment types including:

   • Restaurants, cafes, bars
   • Museums, parks, libraries
   • Universities, schools
   • Theaters, art galleries
   • And many more venue types

Testing

Try searching for:

• "Boulder Theater"
• "Rayback"
• "Pearl Street"
• "Chautauqua"
• "1234 Main Street" (regular addresses still work)

This makes event location entry much more intuitive!

[claude]

Claude finished @unforced's task —— View job

---

PR Review Complete ✅

I've analyzed the LocationAutocomplete improvements and here's my comprehensive review:

Review Checklist

• Read and analyze the modified LocationAutocomplete.tsx file
• Evaluate code quality and best practices
• Check for potential bugs and edge cases
• Assess performance considerations
• Review security implications
• Examine test coverage and suggestions
• Provide comprehensive feedback

🏆 Overall Assessment

Strong implementation with thoughtful UX improvements. The changes successfully expand autocomplete functionality to include businesses while maintaining good code practices.

✅ Strengths

Code Quality & Best Practices

• Clean TypeScript: Proper typing with interfaces and strict mode compliance
• React Best Practices: Proper use of hooks (useCallback, useRef, useEffect) with correct dependencies
• Error Handling: Comprehensive error handling for script loading failures
• Accessibility: Proper labeling and semantic HTML structure
• Code Organization: Logical separation of concerns and readable structure

Smart UX Design

• Intelligent Formatting: Business names are prioritized over full addresses for well-known venues
• Context-Aware Display: Shows full address only when it adds value (street addresses)
• Broad Coverage: Excellent list of establishment types (40+ venue types)
• Geographic Bias: Sensible Boulder/Denver metro area bounds with fallback capability

Performance Considerations

• Script Loading: Efficient Google Maps API loading with duplicate prevention
• Memory Management: Proper cleanup with refs and effect dependencies
• Network Efficiency: Minimal API calls with smart caching via bounds/bias

🔍 Areas for Improvement

TypeScript & Type Safety

// Line 14-19: Global window extension
interface Window {
  google: any; // ⚠️ Consider more specific typing
}

Recommendation: Define proper Google Maps types or use @types/googlemaps

Error Handling Enhancements

// Lines 174-176: Generic error catching
} catch (error) {
  console.error("Error initializing Google Places Autocomplete:", error);
  // ⚠️ Consider user notification for initialization failures
}

Recommendation: Add toast notification for initialization failures

Edge Case Handling

// Line 147: Street address detection
const hasStreetAddress = place.formatted_address && /\d/.test(place.formatted_address);

Recommendation: This regex might miss addresses like "One Main Street". Consider more robust detection.

🛡️ Security Review

• ✅ API Key Handling: Properly using environment variables
• ✅ XSS Prevention: No innerHTML usage or user content injection
• ✅ Script Loading: Safe script injection with error handling
• ✅ Input Validation: Google Places API handles input sanitization

🧪 Test Coverage Recommendations

Missing test coverage - No test files found. Consider adding:

// LocationAutocomplete.test.tsx
describe('LocationAutocomplete', () => {
  it('should format business names correctly')
  it('should handle API loading failures gracefully')
  it('should distinguish between businesses and addresses')
  it('should apply geographic bias to Boulder area')
})

🚀 Performance & Production Readiness

• ✅ Lazy Loading: Google Maps API loads on-demand
• ✅ Duplicate Prevention: Checks for existing scripts
• ✅ Error Boundaries: Graceful fallback for API failures
• ✅ Bundle Impact: Minimal addition to bundle size

📝 Minor Suggestions

1. Type Definitions (src/components/LocationAutocomplete.tsx:16):

   // Instead of 'any', consider:
   google: typeof google;

2. Establishment Detection (src/components/LocationAutocomplete.tsx:117):
   Consider extracting the establishment types array to a constant for reusability.

3. Loading State (src/components/LocationAutocomplete.tsx:205):
   Could add a spinner icon for better visual feedback.

🎯 Conclusion

This is a well-crafted improvement that successfully addresses the stated problem. The code follows React and TypeScript best practices, handles errors gracefully, and provides a significantly better UX for finding businesses.

Ready to merge with minor suggestions above as optional future improvements.

Impact: Users can now easily find venues like "Boulder Theater" and "Rayback Collective" - exactly what was needed! 🎭🍺

---