refactor: migrate DisclosuresPage to TanStack Query

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/hooks/useDisclosures.ts

@@ -0,0 +1,21 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { getDisclosureRequests, reviewDisclosure } from '@/services/disclosureService'
+
+export function useDisclosures(status: string = 'pending') {
+  return useQuery({
+    queryKey: ['disclosures', status],
+    queryFn: () => getDisclosureRequests(status),
+  })
+}
+
+export function useReviewDisclosure() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, status }: { id: number; status: 'approved' | 'rejected' }) =>
+      reviewDisclosure(id, status),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['disclosures'] })
+      queryClient.invalidateQueries({ queryKey: ['notifications'] })
+    },
+  })
+}

frontend/src/pages/DisclosuresPage.tsx

@@ -1,41 +1,23 @@
-import { useState, useEffect } from 'react'
 import { Check, X } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
-import type { DisclosureRequest } from '@/types'
-import { getDisclosureRequests, reviewDisclosure } from '@/services/disclosureService'
+import { useDisclosures, useReviewDisclosure } from '@/hooks/useDisclosures'
 
 export function DisclosuresPage() {
-  const [requests, setRequests] = useState<DisclosureRequest[]>([])
-  const [loading, setLoading] = useState(true)
+  const { data: requests = [], isLoading } = useDisclosures('pending')
+  const reviewMutation = useReviewDisclosure()
 
-  const load = () => {
-    setLoading(true)
-    getDisclosureRequests('pending')
-      .then(setRequests)
-      .catch(() => setRequests([]))
-      .finally(() => setLoading(false))
-  }
-
-  useEffect(() => { load() }, [])
-
-  const handleReview = async (id: number, status: 'approved' | 'rejected') => {
-    try {
-      await reviewDisclosure(id, status)
-      load()
-    } catch {
-      // Silently reload on error
-      load()
-    }
+  const handleReview = (id: number, status: 'approved' | 'rejected') => {
+    reviewMutation.mutate({ id, status })
   }
 
   return (
     <div className="p-6 space-y-4">
       <h1 className="text-2xl font-bold">Freigabe-Anfragen</h1>
 
-      {loading ? (
+      {isLoading ? (
         <div className="space-y-2">
           {[1, 2, 3].map((i) => (
             <Skeleton key={i} className="h-24 w-full" />
@@ -70,6 +52,7 @@ export function DisclosuresPage() {
                 <div className="flex gap-2 pt-1">
                   <Button
                     size="sm"
+                    disabled={reviewMutation.isPending}
                     onClick={() => handleReview(dr.id, 'approved')}
                   >
                     <Check className="size-4 mr-1" />
@@ -78,6 +61,7 @@ export function DisclosuresPage() {
                   <Button
                     size="sm"
                     variant="destructive"
+                    disabled={reviewMutation.isPending}
                     onClick={() => handleReview(dr.id, 'rejected')}
                   >
                     <X className="size-4 mr-1" />