taler-typescript-core

commit 9bc63cf1989df86fabc7dcf401ea8cde64a0c5e3
parent 62bf3543d72de0bdb52e6ff22519af4c8944960d
Author: Sebastian <sebasjm@gmail.com>
Date:   Mon, 28 Oct 2024 13:17:34 -0300

jump the swr cache when the withdrawal details change

Diffstat:
M
packages/bank-ui/src/hooks/account.ts
 | 
48
++++++++++++++++++++++++++++++++++--------------

1 file changed, 34 insertions(+), 14 deletions(-)
diff --git a/packages/bank-ui/src/hooks/account.ts b/packages/bank-ui/src/hooks/account.ts
@@ -76,7 +76,10 @@ export function useWithdrawalDetails(wid: string | undefined) {
   const {
     lib: { bank: api },
   } = useBankCoreApiContext();
-  const [latestStatus, setLatestStatus] = useState<WithdrawalOperationStatus>();
+  const [latestStatus, setLatestStatus] = useState<{
+    name: WithdrawalOperationStatus;
+    cacheBreaker: number;
+  }>();
 
   async function fetcher([wid, old_state]: [
     string,
@@ -91,24 +94,41 @@ export function useWithdrawalDetails(wid: string | undefined) {
   const { data, error } = useSWR<
     TalerCoreBankResultByMethod<"getWithdrawalById">,
     TalerHttpError
-  >(wid === undefined ? undefined : [wid, latestStatus, "getWithdrawalById"], fetcher, {
-    refreshInterval: 3000,
-    refreshWhenHidden: false,
-    revalidateOnFocus: false,
-    revalidateOnReconnect: false,
-    refreshWhenOffline: false,
-    errorRetryCount: 0,
-    errorRetryInterval: 1,
-    shouldRetryOnError: false,
-    keepPreviousData: true,
-  });
+  >(
+    wid === undefined
+      ? undefined
+      : [
+          wid,
+          latestStatus?.name,
+          latestStatus?.cacheBreaker,
+          "getWithdrawalById",
+        ],
+    fetcher,
+    {
+      refreshInterval: 3000,
+      refreshWhenHidden: false,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+      refreshWhenOffline: false,
+      errorRetryCount: 0,
+      errorRetryInterval: 1,
+      shouldRetryOnError: false,
+      revalidateIfStale: true,
+      keepPreviousData: true,
+    },
+  );
 
   const currentStatus =
     data !== undefined && data.type === "ok" ? data.body.status : undefined;
 
   useEffect(() => {
-    if (currentStatus !== undefined && currentStatus !== latestStatus) {
-      setLatestStatus(currentStatus);
+    if (currentStatus !== undefined && currentStatus !== latestStatus?.name) {
+      // withdrawal has a new state, save the current
+      // and make the query again
+      setLatestStatus({
+        name: currentStatus,
+        cacheBreaker: Date.now(),
+      });
     }
   }, [currentStatus]);