di usage in website

apps/website/components/teams/JoinTeamButton.tsx

@@ -2,18 +2,8 @@
 
 import Button from '@/components/ui/Button';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { useEffect, useState } from 'react';
-import { useServices } from '@/lib/services/ServiceProvider';
-
-type TeamMembershipStatus = 'active' | 'pending' | 'inactive';
-
-interface TeamMembership {
-  teamId: string;
-  driverId: string;
-  role: 'owner' | 'manager' | 'driver';
-  status: TeamMembershipStatus;
-  joinedAt: Date | string;
-}
+import { useTeamMembership, useJoinTeam, useLeaveTeam } from '@/hooks/team';
+import { useState } from 'react';
 
 interface JoinTeamButtonProps {
   teamId: string;
@@ -26,76 +16,63 @@ export default function JoinTeamButton({
   requiresApproval = false,
   onUpdate,
 }: JoinTeamButtonProps) {
-  const [loading, setLoading] = useState(false);
   const currentDriverId = useEffectiveDriverId();
-  const [membership, setMembership] = useState<TeamMembership | null>(null);
-  const { teamService, teamJoinService } = useServices();
+  const [showConfirmation, setShowConfirmation] = useState(false);
 
-  useEffect(() => {
-    const load = async () => {
-      try {
-        const m = await teamService.getMembership(teamId, currentDriverId);
-        setMembership(m as TeamMembership | null);
-      } catch (error) {
-        console.error('Failed to load membership:', error);
-      }
-    };
-    void load();
-  }, [teamId, currentDriverId, teamService]);
+  // Use hooks for data fetching
+  const { data: membership, isLoading: loadingMembership } = useTeamMembership(teamId, currentDriverId || '');
 
-  const handleJoin = async () => {
-    setLoading(true);
-    try {
-      if (requiresApproval) {
-        const existing = await teamService.getMembership(teamId, currentDriverId);
-        if (existing) {
-          throw new Error('Already a member or have a pending request');
-        }
-
-        // Note: Team join request functionality would need to be added to teamService
-        // For now, we'll use a placeholder
-        console.log('Saving join request:', {
-          id: `team-request-${Date.now()}`,
-          teamId,
-          driverId: currentDriverId,
-          requestedAt: new Date(),
-        });
-        alert('Join request sent! Wait for team approval.');
-      } else {
-        // Note: Team join functionality would need to be added to teamService
-        // For now, we'll use a placeholder
-        console.log('Joining team:', { teamId, driverId: currentDriverId });
-        alert('Successfully joined team!');
-      }
+  // Use hooks for mutations
+  const joinTeamMutation = useJoinTeam({
+    onSuccess: () => {
       onUpdate?.();
-    } catch (error) {
-      alert(error instanceof Error ? error.message : 'Failed to join team');
-    } finally {
-      setLoading(false);
+    },
+  });
+
+  const leaveTeamMutation = useLeaveTeam({
+    onSuccess: () => {
+      onUpdate?.();
+      setShowConfirmation(false);
+    },
+  });
+
+  const handleJoin = () => {
+    if (!currentDriverId) {
+      alert('Please log in to join a team');
+      return;
     }
+    joinTeamMutation.mutate({
+      teamId,
+      driverId: currentDriverId,
+      requiresApproval,
+    });
   };
 
-  const handleLeave = async () => {
+  const handleLeave = () => {
+    if (!currentDriverId) {
+      alert('Please log in to leave a team');
+      return;
+    }
     if (!confirm('Are you sure you want to leave this team?')) {
       return;
     }
-
-    setLoading(true);
-    try {
-      // Note: Leave team functionality would need to be added to teamService
-      // For now, we'll use a placeholder
-      console.log('Leaving team:', { teamId, driverId: currentDriverId });
-      alert('Successfully left team');
-      onUpdate?.();
-    } catch (error) {
-      alert(error instanceof Error ? error.message : 'Failed to leave team');
-    } finally {
-      setLoading(false);
-    }
+    leaveTeamMutation.mutate({
+      teamId,
+      driverId: currentDriverId,
+    });
   };
 
+  // Loading state
+  if (loadingMembership) {
+    return (
+      <Button variant="primary" disabled>
+        Loading...
+      </Button>
+    );
+  }
+
   // Already a member
-  if (membership && membership.status === 'active') {
+  if (membership && membership.isActive) {
     if (membership.role === 'owner') {
       return (
         <Button variant="secondary" disabled>
@@ -108,9 +85,9 @@ export default function JoinTeamButton({
       <Button
         variant="danger"
         onClick={handleLeave}
-        disabled={loading}
+        disabled={leaveTeamMutation.isPending}
       >
-        {loading ? 'Leaving...' : 'Leave Team'}
+        {leaveTeamMutation.isPending ? 'Leaving...' : 'Leave Team'}
       </Button>
     );
   }
@@ -120,9 +97,9 @@ export default function JoinTeamButton({
     <Button
       variant="primary"
       onClick={handleJoin}
-      disabled={loading}
+      disabled={joinTeamMutation.isPending || !currentDriverId}
     >
-      {loading
+      {joinTeamMutation.isPending
         ? 'Processing...'
         : requiresApproval
         ? 'Request to Join'