website refactor

apps/website/client-wrapper/LeagueAdminSchedulePageClient.tsx

@@ -7,8 +7,8 @@ import {
   unpublishScheduleAction,
   updateRaceAction
 } from '@/app/actions/leagueScheduleActions';
-import { PageWrapper } from '@/components/shared/state/PageWrapper';
-import { ConfirmDialog } from '@/ui/ConfirmDialog';
+import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
+import { SharedConfirmDialog, SharedStack, SharedCard, SharedBox, SharedText, SharedHeading } from '@/components/shared/UIComponents';
 import {
   useLeagueAdminSchedule,
   useLeagueAdminStatus,
@@ -17,11 +17,6 @@ import {
 import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
 import { RaceScheduleCommandModel } from '@/lib/command-models/leagues/RaceScheduleCommandModel';
 import { LeagueAdminScheduleTemplate } from '@/templates/LeagueAdminScheduleTemplate';
-import { Box } from '@/ui/Box';
-import { Card } from '@/ui/Card';
-import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 
@@ -177,74 +172,67 @@ export function LeagueAdminSchedulePageClient() {
   // Render admin access required if not admin
   if (!isLoading && !isAdmin) {
     return (
-      <Stack gap={6}>
-        <Card>
-          <Box p={6} textAlign="center">
+      <SharedStack gap={6}>
+        <SharedCard>
+          <SharedBox p={6} textAlign="center">
             <Heading level={3}>Admin Access Required</Heading>
-            <Box mt={2}>
-              <Text size="sm" color="text-gray-400">Only league admins can manage the schedule.</Text>
-            </Box>
-          </Box>
-        </Card>
-      </Stack>
+            <SharedBox mt={2}>
+              <SharedText size="sm" color="text-gray-400">Only league admins can manage the schedule.</SharedText>
+            </SharedBox>
+          </SharedBox>
+        </SharedCard>
+      </SharedStack>
     );
   }
 
-  // Template component that wraps the actual template with all props
-  const TemplateWrapper = ({ data }: { data: typeof templateData }) => {
-    if (!data) return null;
-    
-    return (
-      <>
-        <LeagueAdminScheduleTemplate
-          viewData={data}
-          onSeasonChange={handleSeasonChange}
-          onPublishToggle={handlePublishToggle}
-          onAddOrSave={handleAddOrSave}
-          onEdit={handleEdit}
-          onDelete={handleDelete}
-          onCancelEdit={handleCancelEdit}
-          track={form.track}
-          car={form.car}
-          scheduledAtIso={form.scheduledAtIso}
-          editingRaceId={editingRaceId}
-          isPublishing={isPublishing}
-          isSaving={isSaving}
-          isDeleting={deletingRaceId}
-          error={error}
-          setTrack={(val) => {
-            form.track = val;
-            setForm(new RaceScheduleCommandModel(form.toCommand()));
-          }}
-          setCar={(val) => {
-            form.car = val;
-            setForm(new RaceScheduleCommandModel(form.toCommand()));
-          }}
-          setScheduledAtIso={(val) => {
-            form.scheduledAtIso = val;
-            setForm(new RaceScheduleCommandModel(form.toCommand()));
-          }}
-        />
-        <ConfirmDialog
-          isOpen={!!raceToDelete}
-          onClose={() => setRaceToDelete(null)}
-          onConfirm={confirmDelete}
-          title="Delete Race"
-          description="Are you sure you want to delete this race? This will remove it from the schedule and cannot be undone."
-          confirmLabel="Delete Race"
-          variant="danger"
-          isLoading={!!deletingRaceId}
-        />
-      </>
-    );
-  };
-
   return (
-    <PageWrapper
+    <StatefulPageWrapper
       data={templateData}
       isLoading={isLoading}
       error={null}
-      Template={TemplateWrapper}
+      Template={({ data }) => (
+        <>
+          <LeagueAdminScheduleTemplate
+            viewData={data}
+            onSeasonChange={handleSeasonChange}
+            onPublishToggle={handlePublishToggle}
+            onAddOrSave={handleAddOrSave}
+            onEdit={handleEdit}
+            onDelete={handleDelete}
+            onCancelEdit={handleCancelEdit}
+            track={form.track}
+            car={form.car}
+            scheduledAtIso={form.scheduledAtIso}
+            editingRaceId={editingRaceId}
+            isPublishing={isPublishing}
+            isSaving={isSaving}
+            isDeleting={deletingRaceId}
+            error={error}
+            setTrack={(val) => {
+              form.track = val;
+              setForm(new RaceScheduleCommandModel(form.toCommand()));
+            }}
+            setCar={(val) => {
+              form.car = val;
+              setForm(new RaceScheduleCommandModel(form.toCommand()));
+            }}
+            setScheduledAtIso={(val) => {
+              form.scheduledAtIso = val;
+              setForm(new RaceScheduleCommandModel(form.toCommand()));
+            }}
+          />
+          <SharedConfirmDialog
+            isOpen={!!raceToDelete}
+            onClose={() => setRaceToDelete(null)}
+            onConfirm={confirmDelete}
+            title="Delete Race"
+            description="Are you sure you want to delete this race? This will remove it from the schedule and cannot be undone."
+            confirmLabel="Delete Race"
+            variant="danger"
+            isLoading={!!deletingRaceId}
+          />
+        </>
+      )}
       loading={{ variant: 'full-screen', message: 'Loading schedule admin...' }}
       empty={{
         title: 'No schedule data available',