Implement API improvements Phases 1-4

src/components/settings/SecurityTab.tsx

@@ -14,6 +14,7 @@ import { TOTPSetup } from '@/components/auth/TOTPSetup';
 import { GoogleIcon } from '@/components/icons/GoogleIcon';
 import { DiscordIcon } from '@/components/icons/DiscordIcon';
 import { PasswordUpdateDialog } from './PasswordUpdateDialog';
+import { useSessions } from '@/hooks/security/useSessions';
 import {
   getUserIdentities,
   checkDisconnectSafety,
@@ -37,14 +38,14 @@ export function SecurityTab() {
   const [disconnectingProvider, setDisconnectingProvider] = useState<OAuthProvider | null>(null);
   const [hasPassword, setHasPassword] = useState(false);
   const [addingPassword, setAddingPassword] = useState(false);
-  const [sessions, setSessions] = useState<AuthSession[]>([]);
-  const [loadingSessions, setLoadingSessions] = useState(true);
   const [sessionToRevoke, setSessionToRevoke] = useState<{ id: string; isCurrent: boolean } | null>(null);
+  
+  // Fetch sessions using hook
+  const { data: sessions = [], isLoading: loadingSessions, refetch: refetchSessions } = useSessions(user?.id);
 
   // Load user identities on mount
   useEffect(() => {
     loadIdentities();
-    fetchSessions();
   }, []);
 
   const loadIdentities = async () => {
@@ -145,35 +146,6 @@ export function SecurityTab() {
     setAddingPassword(false);
   };
 
-  const fetchSessions = async () => {
-    if (!user) return;
-    
-    setLoadingSessions(true);
-    
-    try {
-      const { data, error } = await supabase.rpc('get_my_sessions');
-      
-      if (error) {
-        throw error;
-      }
-      
-      setSessions((data as AuthSession[]) || []);
-    } catch (error: unknown) {
-      logger.error('Failed to fetch sessions', {
-        userId: user.id,
-        action: 'fetch_sessions',
-        error: error instanceof Error ? error.message : String(error)
-      });
-      handleError(error, {
-        action: 'Load active sessions',
-        userId: user.id
-      });
-      setSessions([]);
-    } finally {
-      setLoadingSessions(false);
-    }
-  };
-
   const initiateSessionRevoke = async (sessionId: string) => {
     // Get current session to check if revoking self
     const { data: { session: currentSession } } = await supabase.auth.getSession();
@@ -192,7 +164,7 @@ export function SecurityTab() {
       {
         onSuccess: () => {
           if (!sessionToRevoke.isCurrent) {
-            fetchSessions();
+            refetchSessions();
           }
           setSessionToRevoke(null);
         },