Refactor: Optimize user role fetching

src/hooks/useUserRole.ts

@@ -1,6 +1,7 @@
-import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { supabase } from '@/integrations/supabase/client';
 import { useAuth } from '@/hooks/useAuth';
+import { queryKeys } from '@/lib/queryKeys';
 
 export type UserRole = 'admin' | 'moderator' | 'user' | 'superuser';
 
@@ -15,53 +16,54 @@ export interface UserPermissions {
 
 export function useUserRole() {
   const { user } = useAuth();
-  const [roles, setRoles] = useState<UserRole[]>([]);
-  const [permissions, setPermissions] = useState<UserPermissions | null>(null);
-  const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
-    if (!user) {
-      setRoles([]);
-      setLoading(false);
-      return;
-    }
-
-    const fetchRoles = async () => {
-      try {
-        // Fetch user roles
-        const { data: rolesData, error: rolesError } = await supabase
-          .from('user_roles')
-          .select('role')
-          .eq('user_id', user.id);
-
-        if (rolesError) {
-          console.error('Error fetching user roles:', rolesError);
-          setRoles([]);
-        } else {
-          setRoles(rolesData?.map(r => r.role as UserRole) || []);
-        }
-
-        // Fetch user permissions using the new function
-        const { data: permissionsData, error: permissionsError } = await supabase
-          .rpc('get_user_management_permissions', { _user_id: user.id });
-
-        if (permissionsError) {
-          console.error('Error fetching user permissions:', permissionsError);
-          setPermissions(null);
-        } else {
-          setPermissions(permissionsData as unknown as UserPermissions);
-        }
-      } catch (error: unknown) {
+  // Fetch user roles with TanStack Query for automatic caching
+  const rolesQuery = useQuery({
+    queryKey: queryKeys.userRoles(user?.id),
+    queryFn: async () => {
+      if (!user) return [];
+      
+      const { data, error } = await supabase
+        .from('user_roles')
+        .select('role')
+        .eq('user_id', user.id);
+      
+      if (error) {
         console.error('Error fetching user roles:', error);
-        setRoles([]);
-        setPermissions(null);
-      } finally {
-        setLoading(false);
+        return [];
       }
-    };
+      
+      return data?.map(r => r.role as UserRole) || [];
+    },
+    enabled: !!user,
+    staleTime: 5 * 60 * 1000, // 5 minutes - roles don't change often
+    gcTime: 10 * 60 * 1000,    // 10 minutes garbage collection
+  });
 
-    fetchRoles();
-  }, [user]);
+  // Fetch user permissions with TanStack Query for automatic caching
+  const permissionsQuery = useQuery({
+    queryKey: queryKeys.userPermissions(user?.id),
+    queryFn: async () => {
+      if (!user) return null;
+      
+      const { data, error } = await supabase
+        .rpc('get_user_management_permissions', { _user_id: user.id });
+      
+      if (error) {
+        console.error('Error fetching user permissions:', error);
+        return null;
+      }
+      
+      return data as unknown as UserPermissions;
+    },
+    enabled: !!user,
+    staleTime: 5 * 60 * 1000, // 5 minutes - permissions don't change often
+    gcTime: 10 * 60 * 1000,    // 10 minutes garbage collection
+  });
+
+  const roles = rolesQuery.data || [];
+  const permissions = permissionsQuery.data || null;
+  const loading = rolesQuery.isLoading || permissionsQuery.isLoading;
 
   const hasRole = (role: UserRole) => roles.includes(role);
   const isModerator = () => hasRole('admin') || hasRole('moderator') || hasRole('superuser');