From 94b2530f2f9ea0e0efdf6e933f6160105265a2c6 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Sun, 21 Apr 2024 14:56:43 -0300
Subject: challenger preact api

---
 packages/web-util/src/components/Button.tsx | 176 +++++++++++++++++-----------
 1 file changed, 106 insertions(+), 70 deletions(-)

(limited to 'packages/web-util/src/components')

diff --git a/packages/web-util/src/components/Button.tsx b/packages/web-util/src/components/Button.tsx
index ea0ea2f38..18cecbdab 100644
--- a/packages/web-util/src/components/Button.tsx
+++ b/packages/web-util/src/components/Button.tsx
@@ -14,36 +14,56 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AbsoluteTime, OperationFail, OperationOk, OperationResult, TalerError, TranslatedString } from "@gnu-taler/taler-util";
+import {
+  AbsoluteTime,
+  OperationAlternative,
+  OperationFail,
+  OperationOk,
+  OperationResult,
+  TalerError,
+  TranslatedString,
+} from "@gnu-taler/taler-util";
 // import { NotificationMessage, notifyInfo } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
-import { HTMLAttributes, useEffect, useState, useTransition } from "preact/compat";
-import { NotificationMessage, buildUnifiedRequestErrorMessage, notifyInfo, useTranslationContext } from "../index.browser.js";
+import { HTMLAttributes, useState } from "preact/compat";
+import {
+  NotificationMessage,
+  buildUnifiedRequestErrorMessage,
+  notifyInfo,
+  useTranslationContext,
+} from "../index.browser.js";
 // import { useBankCoreApiContext } from "../context/config.js";
 
 // function errorMap<T extends OperationFail<unknown>>(resp: T, map: (d: T["case"]) => TranslatedString): void {
 
+export type OnOperationSuccesReturnType<T> = (
+  result: T extends OperationOk<any> ? T : never,
+) => TranslatedString | void;
+export type OnOperationFailReturnType<T> = (
+  (d: (T extends OperationFail<any> ? T : never) | (T extends OperationAlternative<any,any> ? T : never)) => TranslatedString)
+
 export interface ButtonHandler<T extends OperationResult<A, B>, A, B> {
-  onClick: () => Promise<T | undefined>,
+  onClick: () => Promise<T | undefined>;
   onNotification: (n: NotificationMessage) => void;
-  onOperationSuccess: ((result: T extends OperationOk<any> ? T : never) => void) | ((result: T extends OperationOk<any> ? T : never) => TranslatedString | undefined),
-  onOperationFail: (d: T extends OperationFail<any> ? T : never) => TranslatedString;
+  onOperationSuccess: OnOperationSuccesReturnType<T>;
+  onOperationFail: OnOperationFailReturnType<T>;
   onOperationComplete?: () => void;
 }
 
-interface Props<T extends OperationResult<A, B>, A, B> extends HTMLAttributes<HTMLButtonElement> {
-  handler: ButtonHandler<T, A, B> | undefined,
+interface Props<T extends OperationResult<A, B>, A, B>
+  extends HTMLAttributes<HTMLButtonElement> {
+  handler: ButtonHandler<T, A, B> | undefined;
 }
 
 /**
  * This button accept an async function and report a notification
  * on error or success.
- * 
+ *
  * When the async function is running the inner text will change into
  * a "loading" animation.
- * 
- * @param param0 
- * @returns 
+ *
+ * @param param0
+ * @returns
  */
 export function Button<T extends OperationResult<A, B>, A, B>({
   handler,
@@ -53,69 +73,84 @@ export function Button<T extends OperationResult<A, B>, A, B>({
   ...rest
 }: Props<T, A, B>): VNode {
   const { i18n } = useTranslationContext();
-  const [running, setRunning] = useState(false)
-  return <button {...rest} disabled={disabled || running} onClick={(e) => {
-    e.preventDefault();
-    if (!handler) { return; }
-    setRunning(true)
-    handler.onClick().then((resp) => {
-      if (resp) {
-        if (resp.type === "ok") {
-          const result: OperationOk<any> = resp
-          // @ts-expect-error this is an operationOk
-          const msg = handler.onOperationSuccess(result)
-          if (msg) {
-            notifyInfo(msg)
-          }
+  const [running, setRunning] = useState(false);
+  return (
+    <button
+      {...rest}
+      disabled={disabled || running}
+      onClick={(e) => {
+        e.preventDefault();
+        if (!handler) {
+          return;
         }
-        if (resp.type === "fail") {
-          // @ts-expect-error this is an operationFail
-          const error: OperationFail<any> = resp;
-          // @ts-expect-error this is an operationFail
-          const title = handler.onOperationFail(error)
-          handler.onNotification({
-            title,
-            type: "error",
-            description: error.detail.hint as TranslatedString,
-            debug: error.detail,
-            when: AbsoluteTime.now(),
+        setRunning(true);
+        handler
+          .onClick()
+          .then((resp) => {
+            if (resp) {
+              if (resp.type === "ok") {
+                const result: OperationOk<any> = resp;
+                // @ts-expect-error this is an operationOk
+                const msg = handler.onOperationSuccess(result);
+                if (msg) {
+                  notifyInfo(msg);
+                }
+              }
+              if (resp.type === "fail") {
+                const d = 'detail' in resp  ? resp.detail : undefined
+                
+                const title = handler.onOperationFail(resp as any);
+                handler.onNotification({
+                  title,
+                  type: "error",
+                  description: d && d.hint ? d.hint as TranslatedString : undefined,
+                  debug: d,
+                  when: AbsoluteTime.now(),
+                });
+              }
+            }
+            if (handler.onOperationComplete) {
+              handler.onOperationComplete();
+            }
+            setRunning(false);
           })
-        }
-      }
-      if (handler.onOperationComplete) {
-        handler.onOperationComplete()
-      }
-      setRunning(false)
-    }).catch(error => {
-      console.error(error)
+          .catch((error) => {
+            console.error(error);
 
-      if (error instanceof TalerError) {
-        handler.onNotification(buildUnifiedRequestErrorMessage(i18n, error))
-      } else {
-        const description = (error instanceof Error ?
-          error.message : String(error)) as TranslatedString
+            if (error instanceof TalerError) {
+              handler.onNotification(
+                buildUnifiedRequestErrorMessage(i18n, error),
+              );
+            } else {
+              const description = (
+                error instanceof Error ? error.message : String(error)
+              ) as TranslatedString;
 
-        handler.onNotification({
-          title: i18n.str`Operation failed`,
-          type: "error",
-          description,
-          when: AbsoluteTime.now(),
-        })
-      }
+              handler.onNotification({
+                title: i18n.str`Operation failed`,
+                type: "error",
+                description,
+                when: AbsoluteTime.now(),
+              });
+            }
 
-      if (handler.onOperationComplete) {
-        handler.onOperationComplete()
-      }
-      setRunning(false)
-    })
-  }} >
-    {running ? <Wait /> : children}
-  </button>
+            if (handler.onOperationComplete) {
+              handler.onOperationComplete();
+            }
+            setRunning(false);
+          });
+      }}
+    >
+      {running ? <Wait /> : children}
+    </button>
+  );
 }
 
 function Wait(): VNode {
-  return <Fragment>
-    <style>{`
+  return (
+    <Fragment>
+      <style>
+        {`
       #l1 {          width: 120px;
         height: 20px;
         -webkit-mask: radial-gradient(circle closest-side, currentColor 90%, #0000) left/20% 100%;
@@ -125,7 +160,8 @@ function Wait(): VNode {
       @keyframes l17 {
           100% {background-size:120% 100%}
 `}
-    </style>
-    <div id="l1" />
-  </Fragment>
+      </style>
+      <div id="l1" />
+    </Fragment>
+  );
 }
-- 
cgit v1.2.3