di usage in website

apps/website/components/leagues/JoinLeagueButton.tsx

@@ -3,7 +3,7 @@
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
 import { getMembership } from '@/lib/leagueMembership';
 import { useState } from 'react';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useLeagueMembershipMutation } from '@/hooks/league/useLeagueMembershipMutation';
 import Button from '../ui/Button';
 
 interface JoinLeagueButtonProps {
@@ -18,16 +18,16 @@ export default function JoinLeagueButton({
   onMembershipChange,
 }: JoinLeagueButtonProps) {
   const currentDriverId = useEffectiveDriverId();
-  const membership = getMembership(leagueId, currentDriverId);
-  const { leagueMembershipService } = useServices();
+  const membership = currentDriverId ? getMembership(leagueId, currentDriverId) : null;
+  const { joinLeague, leaveLeague } = useLeagueMembershipMutation();
 
-  const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
   const [dialogAction, setDialogAction] = useState<'join' | 'leave' | 'request'>('join');
 
   const handleJoin = async () => {
-    setLoading(true);
+    if (!currentDriverId) return;
+    
     setError(null);
     try {
       if (isInviteOnly) {
@@ -36,33 +36,30 @@ export default function JoinLeagueButton({
         );
       }
 
-      await leagueMembershipService.joinLeague(leagueId, currentDriverId);
+      await joinLeague.mutateAsync({ leagueId, driverId: currentDriverId });
 
       onMembershipChange?.();
       setShowConfirmDialog(false);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to join league');
-    } finally {
-      setLoading(false);
     }
   };
 
   const handleLeave = async () => {
-    setLoading(true);
+    if (!currentDriverId) return;
+    
     setError(null);
     try {
       if (membership?.role === 'owner') {
         throw new Error('League owner cannot leave the league');
       }
 
-      await leagueMembershipService.leaveLeague(leagueId, currentDriverId);
+      await leaveLeague.mutateAsync({ leagueId, driverId: currentDriverId });
 
       onMembershipChange?.();
       setShowConfirmDialog(false);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to leave league');
-    } finally {
-      setLoading(false);
     }
   };
 
@@ -93,7 +90,7 @@ export default function JoinLeagueButton({
     return 'danger';
   };
 
-  const isDisabled = membership?.role === 'owner' || loading;
+  const isDisabled = membership?.role === 'owner' || joinLeague.isPending || leaveLeague.isPending;
 
   return (
     <>
@@ -109,7 +106,7 @@ export default function JoinLeagueButton({
         disabled={isDisabled}
         className="w-full"
       >
-        {loading ? 'Processing...' : getButtonText()}
+        {(joinLeague.isPending || leaveLeague.isPending) ? 'Processing...' : getButtonText()}
       </Button>
 
       {error && (
@@ -142,15 +139,15 @@ export default function JoinLeagueButton({
               <Button
                 variant={dialogAction === 'leave' ? 'danger' : 'primary'}
                 onClick={dialogAction === 'leave' ? handleLeave : handleJoin}
-                disabled={loading}
+                disabled={joinLeague.isPending || leaveLeague.isPending}
                 className="flex-1"
               >
-                {loading ? 'Processing...' : 'Confirm'}
+                {(joinLeague.isPending || leaveLeague.isPending) ? 'Processing...' : 'Confirm'}
               </Button>
               <Button
                 variant="secondary"
                 onClick={closeDialog}
-                disabled={loading}
+                disabled={joinLeague.isPending || leaveLeague.isPending}
                 className="flex-1"
               >
                 Cancel