5869c741d7
Some checks failed
app-ci-deploy / test-build-deploy (push) Has been cancelled
Bare /timetable routed to TimetablePage which called useParams<{timetableId}>() and
immediately hit !currentTimetable → "Error Loading Timetable". New TimetableListPage
uses fetchMyTimetables() from timetableStore. AppRoutes now: /timetable →
TimetableListPage, /timetable/:timetableId → TimetablePage.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
91 lines
3.3 KiB
TypeScript
91 lines
3.3 KiB
TypeScript
import React, { useEffect } from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import { CalendarToday, KeyboardArrowRight } from '@mui/icons-material';
|
||
import useTimetableStore from '../../stores/timetableStore';
|
||
import { format, parseISO } from 'date-fns';
|
||
|
||
const TimetableListPage: React.FC = () => {
|
||
const { timetables, timetablesLoading, timetablesError, fetchMyTimetables } = useTimetableStore();
|
||
|
||
useEffect(() => {
|
||
fetchMyTimetables();
|
||
}, [fetchMyTimetables]);
|
||
|
||
if (timetablesLoading) {
|
||
return (
|
||
<div className="flex justify-center items-center h-64">
|
||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (timetablesError) {
|
||
return (
|
||
<div className="container mx-auto px-4 py-6">
|
||
<div className="bg-red-50 border border-red-200 rounded-xl p-6">
|
||
<h2 className="text-lg font-semibold text-red-800 mb-2">Error Loading Timetables</h2>
|
||
<p className="text-red-600">{timetablesError}</p>
|
||
<button
|
||
onClick={() => fetchMyTimetables()}
|
||
className="mt-4 text-sm font-medium text-blue-600 hover:underline"
|
||
>
|
||
Retry
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="container mx-auto px-4 py-6 max-w-4xl">
|
||
<div className="flex items-center justify-between mb-6">
|
||
<div>
|
||
<h1 className="text-3xl font-bold text-gray-900">Timetables</h1>
|
||
<p className="mt-1 text-gray-500">Your scheduled timetables</p>
|
||
</div>
|
||
</div>
|
||
|
||
{timetables.length === 0 ? (
|
||
<div className="text-center py-16">
|
||
<CalendarToday sx={{ fontSize: 48 }} className="mx-auto mb-4 text-gray-300" />
|
||
<h3 className="text-lg font-medium text-gray-900">No timetables yet</h3>
|
||
<p className="mt-2 text-gray-500">
|
||
Timetables are created from a class. Go to{' '}
|
||
<Link to="/classes" className="text-blue-600 hover:underline">Classes</Link>{' '}
|
||
to get started.
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-3">
|
||
{timetables.map((timetable) => (
|
||
<Link
|
||
key={timetable.id}
|
||
to={`/timetable/${timetable.id}`}
|
||
className="flex items-center gap-4 p-4 bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition-shadow"
|
||
>
|
||
<CalendarToday className="text-blue-500 flex-shrink-0" />
|
||
<div className="flex-1 min-w-0">
|
||
<h3 className="font-semibold text-gray-900 truncate">{timetable.name}</h3>
|
||
<p className="text-sm text-gray-500">
|
||
{format(parseISO(timetable.start_date), 'MMM d, yyyy')}
|
||
{timetable.end_date
|
||
? ` – ${format(parseISO(timetable.end_date), 'MMM d, yyyy')}`
|
||
: ' (ongoing)'}
|
||
</p>
|
||
</div>
|
||
{timetable.recurrence_rule && (
|
||
<span className="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full flex-shrink-0">
|
||
Recurring
|
||
</span>
|
||
)}
|
||
<KeyboardArrowRight className="text-gray-400 flex-shrink-0" />
|
||
</Link>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default TimetableListPage;
|