feat: Implement complete API optimization plan

src/components/privacy/BlockedUsers.tsx

@@ -1,153 +1,18 @@
-import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
 import { UserX, Trash2 } from 'lucide-react';
-import { supabase } from '@/integrations/supabase/client';
 import { useAuth } from '@/hooks/useAuth';
-import { handleError, handleSuccess } from '@/lib/errorHandler';
-import { logger } from '@/lib/logger';
-import type { UserBlock } from '@/types/privacy';
+import { useBlockedUsers } from '@/hooks/privacy/useBlockedUsers';
+import { useBlockUserMutation } from '@/hooks/privacy/useBlockUserMutation';
 
 export function BlockedUsers() {
   const { user } = useAuth();
-  const [blockedUsers, setBlockedUsers] = useState<UserBlock[]>([]);
-  const [loading, setLoading] = useState(true);
+  const { data: blockedUsers = [], isLoading: loading } = useBlockedUsers(user?.id);
+  const { unblockUser, isUnblocking } = useBlockUserMutation();
 
-  useEffect(() => {
-    if (user) {
-      fetchBlockedUsers();
-    }
-  }, [user]);
-
-  const fetchBlockedUsers = async () => {
-    if (!user) return;
-
-    try {
-      // First get the blocked user IDs
-      const { data: blocks, error: blocksError } = await supabase
-        .from('user_blocks')
-        .select('id, blocked_id, reason, created_at')
-        .eq('blocker_id', user.id)
-        .order('created_at', { ascending: false });
-
-      if (blocksError) {
-        logger.error('Failed to fetch user blocks', {
-          userId: user.id,
-          action: 'fetch_blocked_users',
-          error: blocksError.message,
-          errorCode: blocksError.code
-        });
-        throw blocksError;
-      }
-
-      if (!blocks || blocks.length === 0) {
-        setBlockedUsers([]);
-        return;
-      }
-
-      // Then get the profile information for blocked users
-      const blockedIds = blocks.map(b => b.blocked_id);
-      const { data: profiles, error: profilesError } = await supabase
-        .from('profiles')
-        .select('user_id, username, display_name, avatar_url')
-        .in('user_id', blockedIds);
-
-      if (profilesError) {
-        logger.error('Failed to fetch blocked user profiles', {
-          userId: user.id,
-          action: 'fetch_blocked_user_profiles',
-          error: profilesError.message,
-          errorCode: profilesError.code
-        });
-        throw profilesError;
-      }
-
-      // Combine the data
-      const blockedUsersWithProfiles = blocks.map(block => ({
-        ...block,
-        blocker_id: user.id,
-        blocked_profile: profiles?.find(p => p.user_id === block.blocked_id)
-      }));
-
-      setBlockedUsers(blockedUsersWithProfiles);
-      
-      logger.info('Blocked users fetched successfully', {
-        userId: user.id,
-        action: 'fetch_blocked_users',
-        count: blockedUsersWithProfiles.length
-      });
-    } catch (error: unknown) {
-      logger.error('Error fetching blocked users', {
-        userId: user.id,
-        action: 'fetch_blocked_users',
-        error: error instanceof Error ? error.message : String(error)
-      });
-      
-      handleError(error, {
-        action: 'Load blocked users',
-        userId: user.id
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleUnblock = async (blockId: string, blockedUserId: string, username: string) => {
-    if (!user) return;
-    
-    try {
-      const { error } = await supabase
-        .from('user_blocks')
-        .delete()
-        .eq('id', blockId);
-
-      if (error) {
-        logger.error('Failed to unblock user', {
-          userId: user.id,
-          action: 'unblock_user',
-          targetUserId: blockedUserId,
-          error: error.message,
-          errorCode: error.code
-        });
-        throw error;
-      }
-
-      // Log to audit trail
-      await supabase.from('profile_audit_log').insert([{
-        user_id: user.id,
-        changed_by: user.id,
-        action: 'user_unblocked',
-        changes: JSON.parse(JSON.stringify({
-          blocked_user_id: blockedUserId,
-          username,
-          timestamp: new Date().toISOString()
-        }))
-      }]);
-
-      setBlockedUsers(prev => prev.filter(block => block.id !== blockId));
-      
-      logger.info('User unblocked successfully', {
-        userId: user.id,
-        action: 'unblock_user',
-        targetUserId: blockedUserId
-      });
-      
-      handleSuccess('User unblocked', `You have unblocked @${username}`);
-    } catch (error: unknown) {
-      logger.error('Error unblocking user', {
-        userId: user.id,
-        action: 'unblock_user',
-        targetUserId: blockedUserId,
-        error: error instanceof Error ? error.message : String(error)
-      });
-      
-      handleError(error, {
-        action: 'Unblock user',
-        userId: user.id,
-        metadata: { targetUsername: username }
-      });
-    }
+  const handleUnblock = (blockId: string, blockedUserId: string, username: string) => {
+    unblockUser.mutate({ blockId, blockedUserId, username });
   };
 
   if (loading) {
@@ -211,7 +76,7 @@ export function BlockedUsers() {
 
           <AlertDialog>
             <AlertDialogTrigger asChild>
-              <Button variant="outline" size="sm">
+              <Button variant="outline" size="sm" disabled={isUnblocking}>
                 <Trash2 className="w-4 h-4 mr-1" />
                 Unblock
               </Button>