Refactor: Complete API and cache improvements

src/components/settings/SecurityTab.tsx

@@ -6,6 +6,7 @@ import { Separator } from '@/components/ui/separator';
 import { Badge } from '@/components/ui/badge';
 import { handleError, handleSuccess } from '@/lib/errorHandler';
 import { useAuth } from '@/hooks/useAuth';
+import { useSecurityMutations } from '@/hooks/security/useSecurityMutations';
 import { Shield, Key, Smartphone, Globe, Loader2, Monitor, Tablet, Trash2 } from 'lucide-react';
 import { format } from 'date-fns';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -29,6 +30,7 @@ import { SessionRevokeConfirmDialog } from './SessionRevokeConfirmDialog';
 export function SecurityTab() {
   const { user } = useAuth();
   const navigate = useNavigate();
+  const { revokeSession, isRevoking } = useSecurityMutations();
   const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
   const [identities, setIdentities] = useState<UserIdentity[]>([]);
   const [loadingIdentities, setLoadingIdentities] = useState(true);
@@ -182,33 +184,23 @@ export function SecurityTab() {
     setSessionToRevoke({ id: sessionId, isCurrent: !!isCurrentSession });
   };
 
-  const confirmRevokeSession = async () => {
+  const confirmRevokeSession = () => {
     if (!sessionToRevoke) return;
     
-    const { error } = await supabase.rpc('revoke_my_session', { session_id: sessionToRevoke.id });
-    
-    if (error) {
-      logger.error('Failed to revoke session', {
-        userId: user?.id,
-        action: 'revoke_session',
-        sessionId: sessionToRevoke.id,
-        error: error.message
-      });
-      handleError(error, { action: 'Revoke session', userId: user?.id });
-    } else {
-      handleSuccess('Success', 'Session revoked successfully');
-      
-      if (sessionToRevoke.isCurrent) {
-        // Redirect to login after revoking current session
-        setTimeout(() => {
-          window.location.href = '/auth';
-        }, 1000);
-      } else {
-        fetchSessions();
+    revokeSession.mutate(
+      { sessionId: sessionToRevoke.id, isCurrent: sessionToRevoke.isCurrent },
+      {
+        onSuccess: () => {
+          if (!sessionToRevoke.isCurrent) {
+            fetchSessions();
+          }
+          setSessionToRevoke(null);
+        },
+        onError: () => {
+          setSessionToRevoke(null);
+        }
       }
-    }
-    
-    setSessionToRevoke(null);
+    );
   };
 
   const getDeviceIcon = (userAgent: string | null) => {