Fix React Hooks Order Violation

src/pages/AdminBlog.tsx

@@ -48,44 +48,7 @@ export default function AdminBlog() {
   const [featuredImageId, setFeaturedImageId] = useState('');
   const [featuredImageUrl, setFeaturedImageUrl] = useState('');
 
-  const { data: posts, isLoading } = useQuery({
-    queryKey: ['admin-blog-posts'],
-    queryFn: async () => {
-      const { data, error } = await supabase
-        .from('blog_posts')
-        .select('*')
-        .order('created_at', { ascending: false });
-      if (error) throw error;
-      return data as BlogPost[];
-    },
-  });
-
-  // Show loading state while checking permissions
-  if (loading) {
-    return (
-      <AdminLayout>
-        <div className="flex items-center justify-center min-h-[60vh]">
-          <div className="text-center">
-            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
-            <p className="text-muted-foreground">Loading...</p>
-          </div>
-        </div>
-      </AdminLayout>
-    );
-  }
-
-  // Redirect if not admin or superuser
-  useEffect(() => {
-    if (!loading && !isAdmin()) {
-      navigate('/');
-    }
-  }, [loading, isAdmin, navigate]);
-
-  // Don't render if not admin
-  if (!loading && !isAdmin()) {
-    return null;
-  }
-
+  // All mutations must be called before conditional returns
   const saveMutation = useMutation({
     mutationFn: async ({ isDraft }: { isDraft: boolean }) => {
       const postData = {
@@ -140,6 +103,44 @@ export default function AdminBlog() {
     },
   });
 
+  const { data: posts, isLoading } = useQuery({
+    queryKey: ['admin-blog-posts'],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from('blog_posts')
+        .select('*')
+        .order('created_at', { ascending: false });
+      if (error) throw error;
+      return data as BlogPost[];
+    },
+  });
+
+  // useEffect must be called before conditional returns
+  useEffect(() => {
+    if (!loading && !isAdmin()) {
+      navigate('/');
+    }
+  }, [loading, isAdmin, navigate]);
+
+  // Show loading state while checking permissions
+  if (loading) {
+    return (
+      <AdminLayout>
+        <div className="flex items-center justify-center min-h-[60vh]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Loading...</p>
+          </div>
+        </div>
+      </AdminLayout>
+    );
+  }
+
+  // Don't render if not admin
+  if (!loading && !isAdmin()) {
+    return null;
+  }
+
   const resetForm = () => {
     setTitle('');
     setSlug('');