fix(dashboard): migrate to react-query for dedupe and cancellation

Author: d3v-active

frontend/src/components/dashboard/dashboard-view.tsx

@@ -16,9 +16,12 @@ import toast from "react-hot-toast";
  */
 
 import { Skeleton } from "@/components/ui/Skeleton";
+import { useQueryClient } from "@tanstack/react-query";
 import {
   getDashboardAnalytics,
   fetchDashboardData,
+  useDashboard,
+  dashboardQueryKey,
   type DashboardSnapshot,
   type Stream,
 } from "@/lib/dashboard";
@@ -440,13 +443,13 @@ function renderRecentActivity(snapshot: DashboardSnapshot | null, onCreateStream
 // ─── Main Component ───────────────────────────────────────────────────────────
 
 export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
+  const queryClient = useQueryClient();
   const [activeTab, setActiveTab] = React.useState("overview");
   const [showWizard, setShowWizard] = React.useState(false);
   const [modal, setModal] = React.useState<ModalState>(null);
 
-  const [snapshot, setSnapshot] = React.useState<DashboardSnapshot | null>(null);
-  const [isSnapshotLoading, setIsSnapshotLoading] = React.useState(true);
-  const [snapshotError, setSnapshotError] = React.useState<string | null>(null);
+  const { data: snapshot = null, isLoading: isSnapshotLoading, error: queryError, refetch } = useDashboard(session.publicKey);
+  const snapshotError = queryError ? (queryError as Error).message : null;
 
   const { events: streamEvents, connected, reconnecting, error } = useStreamEvents({
     userPublicKeys: [session.publicKey],
@@ -459,15 +462,11 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
       if (latestEvent) {
         const relevantTypes = ["created", "topped_up", "withdrawn", "cancelled", "completed", "paused", "resumed"];
         if (relevantTypes.includes(latestEvent.type)) {
-          fetchDashboardData(session.publicKey)
-            .then(setSnapshot)
-            .catch((err) => {
-              setSnapshotError(err instanceof Error ? err.message : "Failed to refresh dashboard");
-            });
+          queryClient.invalidateQueries({ queryKey: dashboardQueryKey(session.publicKey) });
         }
       }
     }
-  }, [streamEvents, session.publicKey]);
+  }, [streamEvents, session.publicKey, queryClient]);
 
   const [streamForm, setStreamForm] = React.useState<StreamFormValues>(EMPTY_STREAM_FORM);
   const [templates, setTemplates] = React.useState<StreamTemplate[]>([]);
@@ -524,42 +523,7 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
     persistTemplates(templates);
   }, [templates, templatesHydrated]);
 
-  // ── Load dashboard snapshot ───────────────────────────────────────────────
-
-  const loadSnapshot = React.useCallback(async () => {
-    setIsSnapshotLoading(true);
-    setSnapshotError(null);
-    try {
-      const next = await fetchDashboardData(session.publicKey);
-      setSnapshot(next);
-    } catch (err) {
-      setSnapshot(null);
-      setSnapshotError(err instanceof Error ? err.message : "Failed to fetch dashboard data.");
-    } finally {
-      setIsSnapshotLoading(false);
-    }
-  }, [session.publicKey, setIsSnapshotLoading, setSnapshotError, setSnapshot]);
-
-  React.useEffect(() => {
-    let cancelled = false;
-    const run = async () => {
-      setIsSnapshotLoading(true);
-      setSnapshotError(null);
-      try {
-        const next = await fetchDashboardData(session.publicKey);
-        if (!cancelled) setSnapshot(next);
-      } catch (err) {
-        if (!cancelled) {
-          setSnapshot(null);
-          setSnapshotError(err instanceof Error ? err.message : "Failed to fetch dashboard data.");
-        }
-      } finally {
-        if (!cancelled) setIsSnapshotLoading(false);
-      }
-    };
-    void run();
-    return () => { cancelled = true; };
-  }, [session.publicKey]);
+  const loadSnapshot = () => refetch();
 
   // ── Template handlers ─────────────────────────────────────────────────────
 
@@ -619,19 +583,19 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
   // ── Optimistic helpers ────────────────────────────────────────────────────
 
   const removeStreamLocally = (streamId: string) => {
-    setSnapshot((prev) => {
+    queryClient.setQueryData<DashboardSnapshot | undefined>(dashboardQueryKey(session.publicKey), (prev) => {
       if (!prev) return prev;
       return { ...prev, outgoingStreams: prev.outgoingStreams.map((s) => s.id === streamId ? { ...s, status: "Cancelled", isActive: false } : s), activeStreamsCount: Math.max(0, prev.activeStreamsCount - 1) };
     });
   };
 
   const topUpStreamLocally = (streamId: string, amount: number) => {
-    setSnapshot((prev) => { if (!prev) return prev; return { ...prev, outgoingStreams: prev.outgoingStreams.map((s) => s.id === streamId ? { ...s, deposited: s.deposited + amount } : s) }; });
+    queryClient.setQueryData<DashboardSnapshot | undefined>(dashboardQueryKey(session.publicKey), (prev) => { if (!prev) return prev; return { ...prev, outgoingStreams: prev.outgoingStreams.map((s) => s.id === streamId ? { ...s, deposited: s.deposited + amount } : s) }; });
   };
 
   const addStreamLocally = (data: StreamFormData) => {
     const newStream: Stream = { id: `stream-${Date.now()}`, date: new Date().toISOString().split("T")[0] ?? "", recipient: shortenPublicKey(data.recipient), amount: parseFloat(data.amount), token: data.token, status: "Active", deposited: parseFloat(data.amount), withdrawn: 0, ratePerSecond: 0, lastUpdateTime: Math.floor(Date.now() / 1000), isActive: true };
-    setSnapshot((prev) => { if (!prev) return prev; return { ...prev, outgoingStreams: [newStream, ...prev.outgoingStreams], activeStreamsCount: prev.activeStreamsCount + 1 }; });
+    queryClient.setQueryData<DashboardSnapshot | undefined>(dashboardQueryKey(session.publicKey), (prev) => { if (!prev) return prev; return { ...prev, outgoingStreams: [newStream, ...prev.outgoingStreams], activeStreamsCount: prev.activeStreamsCount + 1 }; });
   };
 
   // ── Contract handlers ─────────────────────────────────────────────────────
@@ -685,8 +649,7 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
     setWithdrawingIncomingStreamId(stream.id);
     try {
       await sorobanWithdraw(session, { streamId: BigInt(stream.id.replace(/\D/g, "") || "0") });
-      const refreshed = await fetchDashboardData(session.publicKey);
-      setSnapshot(refreshed);
+      await queryClient.invalidateQueries({ queryKey: dashboardQueryKey(session.publicKey) });
       toast.success("Withdrawal successful!", { id: toastId });
     } catch (err) {
       toast.error(toSorobanErrorMessage(err), { id: toastId });

frontend/src/lib/dashboard.ts

@@ -1,3 +1,4 @@
+import { useQuery } from "@tanstack/react-query";
 import type { BackendStream } from "./api-types";
 import { getStreamsEndpointCandidates, toTokenAmount } from "./api/_shared";
 import { TOKEN_ADDRESSES } from "./soroban";
@@ -78,13 +79,15 @@ function mapStreamStatus(s: BackendStream): Stream["status"] {
 async function fetchStreams(
   publicKey: string,
   role: "sender" | "recipient",
+  signal?: AbortSignal
 ): Promise<BackendStream[]> {
   const endpoints = getStreamsEndpointCandidates();
   const params = new URLSearchParams({ [role]: publicKey });
   let lastError: Error | null = null;
 
   for (const endpoint of endpoints) {
-    const response = await fetch(`${endpoint}?${params.toString()}`);
+    try {
+      const response = await fetch(`${endpoint}?${params.toString()}`, { signal });
     if (response.ok) {
       const payload = (await response.json()) as
         | BackendStream[]
@@ -100,6 +103,14 @@ async function fetchStreams(
     lastError = new Error(`Failed to fetch streams (${response.status}) from ${endpoint}`);
   }
 
+    } catch (err) {
+      if (err instanceof Error && err.name === "AbortError") {
+        throw err;
+      }
+      lastError = err instanceof Error ? err : new Error(String(err));
+    }
+  }
+
   throw lastError ?? new Error("Failed to fetch streams from backend.");
 }
 
@@ -129,11 +140,11 @@ export function mapBackendStreamToFrontend(s: BackendStream, counterparty: strin
 /**
  * Fetches dashboard data for a given public key by querying both outgoing and incoming streams.
  */
-export async function fetchDashboardData(publicKey: string): Promise<DashboardSnapshot> {
+export async function fetchDashboardData(publicKey: string, signal?: AbortSignal): Promise<DashboardSnapshot> {
   try {
     const [outgoing, incoming] = await Promise.all([
-      fetchStreams(publicKey, "sender"),
-      fetchStreams(publicKey, "recipient"),
+      fetchStreams(publicKey, "sender", signal),
+      fetchStreams(publicKey, "recipient", signal),
     ]);
 
     const outgoingStreams = outgoing.map((stream) =>
@@ -309,3 +320,15 @@ export function getDashboardAnalytics(
     },
   ];
 }
+
+export function dashboardQueryKey(publicKey: string) {
+  return ["dashboard", publicKey] as const;
+}
+
+export function useDashboard(publicKey: string) {
+  return useQuery({
+    queryKey: dashboardQueryKey(publicKey),
+    queryFn: ({ signal }) => fetchDashboardData(publicKey, signal),
+    enabled: Boolean(publicKey),
+  });
+}