Improve error handling and display for searches and uploads

Enhance user feedback by displaying search errors, refine photo submission fetching, add rate limiting cleanup logic, improve image upload cleanup, and strengthen moderator permission checks.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2741d09b-80fb-4f0a-bfd6-ababb2ac4bfc
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
This commit is contained in:
pac7
2025-10-08 19:55:55 +00:00
parent 7101632977
commit 13a4d8f64c
6 changed files with 90 additions and 33 deletions

View File

@@ -44,6 +44,7 @@ export function LocationSearch({ onLocationSelect, initialLocationId, className
const [searchQuery, setSearchQuery] = useState('');
const [results, setResults] = useState<LocationResult[]>([]);
const [isSearching, setIsSearching] = useState(false);
const [searchError, setSearchError] = useState<string | null>(null);
const [selectedLocation, setSelectedLocation] = useState<SelectedLocation | null>(null);
const [showResults, setShowResults] = useState(false);
@@ -81,10 +82,12 @@ export function LocationSearch({ onLocationSelect, initialLocationId, className
const searchLocations = useCallback(async (query: string) => {
if (!query || query.length < 3) {
setResults([]);
setSearchError(null);
return;
}
setIsSearching(true);
setSearchError(null);
try {
const response = await fetch(
`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&addressdetails=1&limit=5`,
@@ -97,7 +100,9 @@ export function LocationSearch({ onLocationSelect, initialLocationId, className
// Check if response is OK and content-type is JSON
if (!response.ok) {
const errorMsg = `Location search failed (${response.status}). Please try again.`;
console.error('OpenStreetMap API error:', response.status);
setSearchError(errorMsg);
setResults([]);
setShowResults(false);
return;
@@ -105,7 +110,9 @@ export function LocationSearch({ onLocationSelect, initialLocationId, className
const contentType = response.headers.get('content-type');
if (!contentType || !contentType.includes('application/json')) {
const errorMsg = 'Invalid response from location service. Please try again.';
console.error('Invalid response format from OpenStreetMap');
setSearchError(errorMsg);
setResults([]);
setShowResults(false);
return;
@@ -114,8 +121,11 @@ export function LocationSearch({ onLocationSelect, initialLocationId, className
const data = await response.json();
setResults(data);
setShowResults(true);
setSearchError(null);
} catch (error) {
const errorMsg = error instanceof Error ? error.message : 'Failed to search locations. Please check your connection.';
console.error('Error searching locations:', error);
setSearchError(errorMsg);
setResults([]);
setShowResults(false);
} finally {
@@ -186,6 +196,12 @@ export function LocationSearch({ onLocationSelect, initialLocationId, className
)}
</div>
{searchError && (
<div className="text-sm text-destructive mt-1">
{searchError}
</div>
)}
{showResults && results.length > 0 && (
<Card className="absolute z-50 w-full max-h-64 overflow-y-auto">
<div className="divide-y">
@@ -210,6 +226,12 @@ export function LocationSearch({ onLocationSelect, initialLocationId, className
</div>
</Card>
)}
{showResults && results.length === 0 && !isSearching && !searchError && (
<div className="text-sm text-muted-foreground mt-1">
No locations found. Try a different search term.
</div>
)}
</div>
) : (
<div className="space-y-4">