feat: integrate React Query for data fetching and state management across dashboard components

apps/web/app/dashboard/transactions/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { Button, Chip, Modal, Pagination, Spinner, Table } from "@heroui/react";
 import { TrashBin } from "@gravity-ui/icons";
 import { api, type PaginatedTransactions } from "@/lib/api";
@@ -21,30 +22,21 @@ function formatDuration(start: string, stop: string | null): string {
 export default function TransactionsPage() {
   const { data: sessionData } = useSession();
   const isAdmin = sessionData?.user?.role === "admin";
-  const [data, setData] = useState<PaginatedTransactions | null>(null);
   const [page, setPage] = useState(1);
   const [status, setStatus] = useState<"all" | "active" | "completed">("all");
-  const [loading, setLoading] = useState(true);
   const [stoppingId, setStoppingId] = useState<number | null>(null);
   const [deletingId, setDeletingId] = useState<number | null>(null);
 
-  const load = useCallback(async (p: number, s: typeof status) => {
-    setLoading(true);
-    try {
-      const res = await api.transactions.list({
-        page: p,
+  const { data, isPending: loading, refetch } = useQuery({
+    queryKey: ["transactions", page, status],
+    queryFn: () =>
+      api.transactions.list({
+        page,
         limit: LIMIT,
-        status: s === "all" ? undefined : s,
-      });
-      setData(res);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    load(page, status);
-  }, [page, status, load]);
+        status: status === "all" ? undefined : status,
+      }),
+    refetchInterval: 3_000,
+  });
 
   const handleStatusChange = (s: typeof status) => {
     setStatus(s);
@@ -55,7 +47,7 @@ export default function TransactionsPage() {
     setStoppingId(id);
     try {
       await api.transactions.stop(id);
-      await load(page, status);
+      await refetch();
     } finally {
       setStoppingId(null);
     }
@@ -65,7 +57,7 @@ export default function TransactionsPage() {
     setDeletingId(id);
     try {
       await api.transactions.delete(id);
-      await load(page, status);
+      await refetch();
     } finally {
       setDeletingId(null);
     }