website refactor

apps/website/app/leagues/[id]/schedule/admin/LeagueAdminSchedulePageClient.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { useParams } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import { PageWrapper } from '@/components/shared/state/PageWrapper';
 import { LeagueAdminScheduleTemplate } from '@/templates/LeagueAdminScheduleTemplate';
 import {
@@ -10,9 +10,13 @@ import {
   useLeagueAdminSchedule
 } from "@/hooks/league/useLeagueScheduleAdminPageData";
 import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useInject } from '@/lib/di/hooks/useInject';
-import { LEAGUE_SERVICE_TOKEN } from '@/lib/di/tokens';
+import {
+  publishScheduleAction,
+  unpublishScheduleAction,
+  createRaceAction,
+  updateRaceAction,
+  deleteRaceAction
+} from './actions';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
@@ -23,10 +27,8 @@ export function LeagueAdminSchedulePageClient() {
   const params = useParams();
   const leagueId = params.id as string;
   const currentDriverId = useEffectiveDriverId() || '';
-  const queryClient = useQueryClient();
+  const router = useRouter();
   
-  const leagueService = useInject(LEAGUE_SERVICE_TOKEN);
-
   // Form state
   const [seasonId, setSeasonId] = useState<string>('');
   const [track, setTrack] = useState('');
@@ -34,6 +36,11 @@ export function LeagueAdminSchedulePageClient() {
   const [scheduledAtIso, setScheduledAtIso] = useState('');
   const [editingRaceId, setEditingRaceId] = useState<string | null>(null);
 
+  // Action state
+  const [isPublishing, setIsPublishing] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [deletingRaceId, setDeletingRaceId] = useState<string | null>(null);
+
   // Check admin status using domain hook
   const { data: isAdmin, isLoading: isAdminLoading } = useLeagueAdminStatus(leagueId, currentDriverId);
 
@@ -48,62 +55,6 @@ export function LeagueAdminSchedulePageClient() {
   // Load schedule using domain hook
   const { data: schedule, isLoading: scheduleLoading } = useLeagueAdminSchedule(leagueId, selectedSeasonId, !!isAdmin);
 
-  // Mutations
-  const publishMutation = useMutation({
-    mutationFn: async () => {
-      if (!schedule || !selectedSeasonId) return null;
-      return schedule.published
-        ? await leagueService.unpublishAdminSchedule(leagueId, selectedSeasonId)
-        : await leagueService.publishAdminSchedule(leagueId, selectedSeasonId);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['adminSchedule', leagueId, selectedSeasonId] });
-    },
-  });
-
-  const saveMutation = useMutation({
-    mutationFn: async () => {
-      if (!selectedSeasonId || !scheduledAtIso) return null;
-      
-      if (!editingRaceId) {
-        return await leagueService.createAdminScheduleRace(leagueId, selectedSeasonId, {
-          track,
-          car,
-          scheduledAtIso,
-        });
-      } else {
-        return await leagueService.updateAdminScheduleRace(leagueId, selectedSeasonId, editingRaceId, {
-          ...(track ? { track } : {}),
-          ...(car ? { car } : {}),
-          ...(scheduledAtIso ? { scheduledAtIso } : {}),
-        });
-      }
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['adminSchedule', leagueId, selectedSeasonId] });
-      // Reset form
-      setTrack('');
-      setCar('');
-      setScheduledAtIso('');
-      setEditingRaceId(null);
-    },
-  });
-
-  const deleteMutation = useMutation({
-    mutationFn: async (raceId: string) => {
-      return await leagueService.deleteAdminScheduleRace(leagueId, selectedSeasonId, raceId);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['adminSchedule', leagueId, selectedSeasonId] });
-    },
-  });
-
-  // Derived states
-  const isLoading = isAdminLoading || seasonsLoading || scheduleLoading;
-  const isPublishing = publishMutation.isPending;
-  const isSaving = saveMutation.isPending;
-  const isDeleting = deleteMutation.variables || null;
-
   // Handlers
   const handleSeasonChange = (newSeasonId: string) => {
     setSeasonId(newSeasonId);
@@ -113,13 +64,51 @@ export function LeagueAdminSchedulePageClient() {
     setScheduledAtIso('');
   };
 
-  const handlePublishToggle = () => {
-    publishMutation.mutate();
+  const handlePublishToggle = async () => {
+    if (!schedule || !selectedSeasonId) return;
+    
+    setIsPublishing(true);
+    try {
+      const result = schedule.published
+        ? await unpublishScheduleAction(leagueId, selectedSeasonId)
+        : await publishScheduleAction(leagueId, selectedSeasonId);
+        
+      if (result.isOk()) {
+        router.refresh();
+      } else {
+        alert(result.getError());
+      }
+    } finally {
+      setIsPublishing(false);
+    }
   };
 
-  const handleAddOrSave = () => {
-    if (!scheduledAtIso) return;
-    saveMutation.mutate();
+  const handleAddOrSave = async () => {
+    if (!selectedSeasonId || !scheduledAtIso) return;
+    
+    setIsSaving(true);
+    try {
+      const result = !editingRaceId
+        ? await createRaceAction(leagueId, selectedSeasonId, { track, car, scheduledAtIso })
+        : await updateRaceAction(leagueId, selectedSeasonId, editingRaceId, {
+            ...(track ? { track } : {}),
+            ...(car ? { car } : {}),
+            ...(scheduledAtIso ? { scheduledAtIso } : {}),
+          });
+          
+      if (result.isOk()) {
+        // Reset form
+        setTrack('');
+        setCar('');
+        setScheduledAtIso('');
+        setEditingRaceId(null);
+        router.refresh();
+      } else {
+        alert(result.getError());
+      }
+    } finally {
+      setIsSaving(false);
+    }
   };
 
   const handleEdit = (raceId: string) => {
@@ -128,15 +117,27 @@ export function LeagueAdminSchedulePageClient() {
     if (!race) return;
 
     setEditingRaceId(raceId);
-    setTrack('');
-    setCar('');
+    setTrack(race.track || '');
+    setCar(race.car || '');
     setScheduledAtIso(race.scheduledAt.toISOString());
   };
 
-  const handleDelete = (raceId: string) => {
+  const handleDelete = async (raceId: string) => {
+    if (!selectedSeasonId) return;
     const confirmed = window.confirm('Delete this race?');
     if (!confirmed) return;
-    deleteMutation.mutate(raceId);
+    
+    setDeletingRaceId(raceId);
+    try {
+      const result = await deleteRaceAction(leagueId, selectedSeasonId, raceId);
+      if (result.isOk()) {
+        router.refresh();
+      } else {
+        alert(result.getError());
+      }
+    } finally {
+      setDeletingRaceId(null);
+    }
   };
 
   const handleCancelEdit = () => {
@@ -146,6 +147,9 @@ export function LeagueAdminSchedulePageClient() {
     setScheduledAtIso('');
   };
 
+  // Derived states
+  const isLoading = isAdminLoading || seasonsLoading || scheduleLoading;
+
   // Prepare template data
   const templateData = schedule && seasonsData && selectedSeasonId
     ? {
@@ -200,7 +204,7 @@ export function LeagueAdminSchedulePageClient() {
         editingRaceId={editingRaceId}
         isPublishing={isPublishing}
         isSaving={isSaving}
-        isDeleting={isDeleting}
+        isDeleting={deletingRaceId}
         setTrack={setTrack}
         setCar={setCar}
         setScheduledAtIso={setScheduledAtIso}
@@ -221,4 +225,4 @@ export function LeagueAdminSchedulePageClient() {
       }}
     />
   );
-}
+}