2 files changed, 113 insertions, 30 deletions

diff --git a/packages/anastasis-webui/src/hooks/async.ts b/packages/anastasis-webui/src/hooks/async.ts
new file mode 100644
index 000000000..ea3ff6acf
--- /dev/null
+++ b/packages/anastasis-webui/src/hooks/async.ts
@@ -0,0 +1,77 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { useState } from "preact/hooks";
+// import { cancelPendingRequest } from "./backend";
+
+export interface Options {
+  slowTolerance: number;
+}
+
+export interface AsyncOperationApi<T> {
+  request: (...a: any) => void;
+  cancel: () => void;
+  data: T | undefined;
+  isSlow: boolean;
+  isLoading: boolean;
+  error: string | undefined;
+}
+
+export function useAsync<T>(fn?: (...args: any) => Promise<T>, { slowTolerance: tooLong }: Options = { slowTolerance: 1000 }): AsyncOperationApi<T> {
+  const [data, setData] = useState<T | undefined>(undefined);
+  const [isLoading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<any>(undefined);
+  const [isSlow, setSlow] = useState(false)
+
+  const request = async (...args: any) => {
+    if (!fn) return;
+    setLoading(true);
+    const handler = setTimeout(() => {
+      setSlow(true)
+    }, tooLong)
+
+    try {
+      console.log("calling async", args)
+      const result = await fn(...args);
+      console.log("async back", result)
+      setData(result);
+    } catch (error) {
+      setError(error);
+    }
+    setLoading(false);
+    setSlow(false)
+    clearTimeout(handler)
+  };
+
+  function cancel() {
+    // cancelPendingRequest()
+    setLoading(false);
+    setSlow(false)
+  }
+
+  return {
+    request,
+    cancel,
+    data,
+    isSlow,
+    isLoading,
+    error
+  };
+}
diff --git a/packages/anastasis-webui/src/hooks/use-anastasis-reducer.ts b/packages/anastasis-webui/src/hooks/use-anastasis-reducer.ts
index 72594749d..1ef28a168 100644
--- a/packages/anastasis-webui/src/hooks/use-anastasis-reducer.ts
+++ b/packages/anastasis-webui/src/hooks/use-anastasis-reducer.ts
@@ -1,5 +1,12 @@
 import { TalerErrorCode } from "@gnu-taler/taler-util";
-import { BackupStates, getBackupStartState, getRecoveryStartState, RecoveryStates, reduceAction, ReducerState } from "anastasis-core";
+import {
+  BackupStates,
+  getBackupStartState,
+  getRecoveryStartState,
+  RecoveryStates,
+  reduceAction,
+  ReducerState,
+} from "anastasis-core";
 import { useState } from "preact/hooks";
 
 const reducerBaseUrl = "http://localhost:5000/";
@@ -98,13 +105,15 @@ export interface AnastasisReducerApi {
   startBackup: () => void;
   startRecover: () => void;
   reset: () => void;
-  back: () => void;
-  transition(action: string, args: any): void;
+  back: () => Promise<void>;
+  transition(action: string, args: any): Promise<void>;
   /**
    * Run multiple reducer steps in a transaction without
    * affecting the UI-visible transition state in-between.
    */
-  runTransaction(f: (h: ReducerTransactionHandle) => Promise<void>): void;
+  runTransaction(
+    f: (h: ReducerTransactionHandle) => Promise<void>,
+  ): Promise<void>;
 }
 
 function storageGet(key: string): string | null {
@@ -222,9 +231,9 @@ export function useAnastasisReducer(): AnastasisReducerApi {
       }
     },
     transition(action: string, args: any) {
-      doTransition(action, args);
+      return doTransition(action, args);
     },
-    back() {
+    async back() {
       const reducerState = anastasisState.reducerState;
       if (!reducerState) {
         return;
@@ -239,7 +248,7 @@ export function useAnastasisReducer(): AnastasisReducerApi {
           reducerState: undefined,
         });
       } else {
-        doTransition("back", {});
+        await doTransition("back", {});
       }
     },
     dismissError() {
@@ -252,30 +261,27 @@ export function useAnastasisReducer(): AnastasisReducerApi {
         reducerState: undefined,
       });
     },
-    runTransaction(f) {
-      async function run() {
-        const txHandle = new ReducerTxImpl(anastasisState.reducerState!);
-        try {
-          await f(txHandle);
-        } catch (e) {
-          console.log("exception during reducer transaction", e);
-        }
-        const s = txHandle.transactionState;
-        console.log("transaction finished, new state", s);
-        if (s.code !== undefined) {
-          setAnastasisState({
-            ...anastasisState,
-            currentError: txHandle.transactionState,
-          });
-        } else {
-          setAnastasisState({
-            ...anastasisState,
-            reducerState: txHandle.transactionState,
-            currentError: undefined,
-          });
-        }
+    async runTransaction(f) {
+      const txHandle = new ReducerTxImpl(anastasisState.reducerState!);
+      try {
+        await f(txHandle);
+      } catch (e) {
+        console.log("exception during reducer transaction", e);
+      }
+      const s = txHandle.transactionState;
+      console.log("transaction finished, new state", s);
+      if (s.code !== undefined) {
+        setAnastasisState({
+          ...anastasisState,
+          currentError: txHandle.transactionState,
+        });
+      } else {
+        setAnastasisState({
+          ...anastasisState,
+          reducerState: txHandle.transactionState,
+          currentError: undefined,
+        });
       }
-      run();
     },
   };
 }