paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fix date parsing errors in EventsListPage

Browse Source 
- Add null checks for all date fields before parsing
- Handle cases where created_at, event_date, or expires_at might be null/undefined
- Prevent "Invalid time value" errors when viewing events list
- Sort function now handles null dates gracefully

This fixes the RangeError that occurred when navigating to the events page
after creating an event.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
This commit is contained in:
paul
2025-07-07 13:58:33 +02:00
co-authored by Claude
parent 193cadef27
commit 35681d5346
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/admin/EventsListPage.tsx
+9 -5
View File
@@ -75,7 +75,7 @@ export const EventsListPage: React.FC = () => {
} else if (isExpiringFilter) { } else if (isExpiringFilter) {
events = events.filter(e => { events = events.filter(e => {
if (!e.is_active || e.is_archived) return false; if (!e.is_active || e.is_archived) return false;
const days = differenceInDays(parseISO(e.expires_at), new Date()); const days = e.expires_at ? differenceInDays(parseISO(e.expires_at), new Date()) : 0;
return days <= 7 && days > 0; return days <= 7 && days > 0;
}); });
} else if (statusFilter === 'archived') { } else if (statusFilter === 'archived') {
@@ -93,7 +93,11 @@ export const EventsListPage: React.FC = () => {
} }
// Sort by creation date (newest first) // Sort by creation date (newest first)
events.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()); events.sort((a, b) => {
const dateA = a.created_at ? new Date(a.created_at).getTime() : 0;
const dateB = b.created_at ? new Date(b.created_at).getTime() : 0;
return dateB - dateA;
});
return events; return events;
}, [data?.events, statusFilter, searchTerm]); }, [data?.events, statusFilter, searchTerm]);
@@ -118,7 +122,7 @@ export const EventsListPage: React.FC = () => {
if (event.is_archived) return { label: 'Archived', color: 'text-neutral-500 bg-neutral-100' }; if (event.is_archived) return { label: 'Archived', color: 'text-neutral-500 bg-neutral-100' };
if (!event.is_active) return { label: 'Inactive', color: 'text-red-600 bg-red-100' }; if (!event.is_active) return { label: 'Inactive', color: 'text-red-600 bg-red-100' };
const days = differenceInDays(parseISO(event.expires_at), new Date()); const days = event.expires_at ? differenceInDays(parseISO(event.expires_at), new Date()) : 0;
if (days <= 0) return { label: 'Expired', color: 'text-red-600 bg-red-100' }; if (days <= 0) return { label: 'Expired', color: 'text-red-600 bg-red-100' };
if (days <= 7) return { label: `${days}d left`, color: 'text-orange-600 bg-orange-100' }; if (days <= 7) return { label: `${days}d left`, color: 'text-orange-600 bg-orange-100' };
@@ -310,7 +314,7 @@ export const EventsListPage: React.FC = () => {
{event.event_type} {event.event_type}
</td> </td>
<td className="px-6 py-4 text-sm text-neutral-700"> <td className="px-6 py-4 text-sm text-neutral-700">
{format(parseISO(event.event_date), 'MMM d, yyyy')} {event.event_date ? format(parseISO(event.event_date), 'MMM d, yyyy') : 'N/A'}
</td> </td>
<td className="px-6 py-4"> <td className="px-6 py-4">
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${status.color}`}> <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${status.color}`}>
@@ -318,7 +322,7 @@ export const EventsListPage: React.FC = () => {
</span> </span>
</td> </td>
<td className="px-6 py-4 text-sm text-neutral-700"> <td className="px-6 py-4 text-sm text-neutral-700">
{format(parseISO(event.expires_at), 'MMM d, yyyy')} {event.expires_at ? format(parseISO(event.expires_at), 'MMM d, yyyy') : 'N/A'}
</td> </td>
<td className="px-6 py-4 text-right"> <td className="px-6 py-4 text-right">
<div className="relative inline-block text-left"> <div className="relative inline-block text-left">