use exchange api type and start using ui_fields

1 files changed, 75 insertions, 50 deletions

diff --git a/packages/aml-backoffice-ui/src/pages/Cases.tsx b/packages/aml-backoffice-ui/src/pages/Cases.tsx
index 6b59b2736..2e92c111e 100644
--- a/packages/aml-backoffice-ui/src/pages/Cases.tsx
+++ b/packages/aml-backoffice-ui/src/pages/Cases.tsx
@@ -22,19 +22,23 @@ import {
 import {
   Attention,
   ErrorLoading,
+  InputChoiceHorizontal,
   Loading,
-  createNewForm,
-  useTranslationContext,
+  useTranslationContext
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { useCases } from "../hooks/useCases.js";
 
 import { privatePages } from "../Routing.js";
-import { amlStateConverter } from "../utils/converter.js";
-import { AmlExchangeBackend } from "../utils/types.js";
+import { FormErrors, RecursivePartial, useFormState } from "../hooks/form.js";
+import { undefinedIfEmpty } from "./CreateAccount.js";
 import { Officer } from "./Officer.js";
 
+type FormType = {
+  state: TalerExchangeApi.AmlState;
+};
+
 export function CasesUI({
   records,
   filter,
@@ -44,13 +48,45 @@ export function CasesUI({
 }: {
   onFirstPage?: () => void;
   onNext?: () => void;
-  filter: AmlExchangeBackend.AmlState;
-  onChangeFilter: (f: AmlExchangeBackend.AmlState) => void;
+  filter: TalerExchangeApi.AmlState;
+  onChangeFilter: (f: TalerExchangeApi.AmlState) => void;
   records: TalerExchangeApi.AmlRecord[];
 }): VNode {
   const { i18n } = useTranslationContext();
 
-  const form = createNewForm<{ state: AmlExchangeBackend.AmlState }>();
+  const [form, status] = useFormState<FormType>(
+    {
+      state: filter,
+    },
+    (state) => {
+      const errors = undefinedIfEmpty<FormErrors<FormType>>({
+        state: state.state === undefined ? i18n.str`required` : undefined,
+      });
+      if (errors === undefined) {
+        const result: FormType = {
+          state: state.state!,
+        };
+        return {
+          status: "ok",
+          result,
+          errors,
+        };
+      }
+      const result: RecursivePartial<FormType> = {
+        state: state.state,
+      };
+      return {
+        status: "fail",
+        result,
+        errors,
+      };
+    },
+  );
+  useEffect(() => {
+    if (status.status === "ok" && filter !== status.result.state) {
+      onChangeFilter(status.result.state);
+    }
+  }, [form?.state?.value]);
 
   return (
     <div>
@@ -66,33 +102,25 @@ export function CasesUI({
           </p>
         </div>
         <div class="px-2">
-          <form.Provider
-            initial={{ state: filter }}
-            onUpdate={(v) => {
-              onChangeFilter(v.state ?? filter);
-            }}
-            onSubmit={(_v) => {}}
-          >
-            <form.InputChoiceHorizontal
-              name="state"
-              label={i18n.str`Filter`}
-              converter={amlStateConverter}
-              choices={[
-                {
-                  label: i18n.str`Pending`,
-                  value: AmlExchangeBackend.AmlState.pending,
-                },
-                {
-                  label: i18n.str`Frozen`,
-                  value: AmlExchangeBackend.AmlState.frozen,
-                },
-                {
-                  label: i18n.str`Normal`,
-                  value: AmlExchangeBackend.AmlState.normal,
-                },
-              ]}
-            />
-          </form.Provider>
+          <InputChoiceHorizontal<FormType, "state">
+            name="state"
+            label={i18n.str`Filter`}
+            handler={form.state}
+            choices={[
+              {
+                label: i18n.str`Pending`,
+                value: TalerExchangeApi.AmlState.pending,
+              },
+              {
+                label: i18n.str`Frozen`,
+                value: TalerExchangeApi.AmlState.frozen,
+              },
+              {
+                label: i18n.str`Normal`,
+                value: TalerExchangeApi.AmlState.normal,
+              },
+            ]}
+          />
         </div>
       </div>
       <div class="mt-8 flow-root">
@@ -141,23 +169,23 @@ export function CasesUI({
                           </div>
                         </td>
                         <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
-                          {((state: AmlExchangeBackend.AmlState): VNode => {
+                          {((state: TalerExchangeApi.AmlState): VNode => {
                             switch (state) {
-                              case AmlExchangeBackend.AmlState.normal: {
+                              case TalerExchangeApi.AmlState.normal: {
                                 return (
                                   <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
                                     Normal
                                   </span>
                                 );
                               }
-                              case AmlExchangeBackend.AmlState.pending: {
+                              case TalerExchangeApi.AmlState.pending: {
                                 return (
                                   <span class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-green-600/20">
                                     Pending
                                   </span>
                                 );
                               }
-                              case AmlExchangeBackend.AmlState.frozen: {
+                              case TalerExchangeApi.AmlState.frozen: {
                                 return (
                                   <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-green-600/20">
                                     Frozen
@@ -186,7 +214,7 @@ export function CasesUI({
 
 export function Cases() {
   const [stateFilter, setStateFilter] = useState(
-    AmlExchangeBackend.AmlState.pending,
+    TalerExchangeApi.AmlState.pending,
   );
 
   const list = useCases(stateFilter);
@@ -204,12 +232,10 @@ export function Cases() {
       case HttpStatusCode.Forbidden: {
         return (
           <Fragment>
-            <Attention
-              type="danger"
-              title={i18n.str`Operation denied`}
-            >
+            <Attention type="danger" title={i18n.str`Operation denied`}>
               <i18n.Translate>
-                This account doesnt have access. Request account activation sending your public key.
+                This account doesnt have access. Request account activation
+                sending your public key.
               </i18n.Translate>
             </Attention>
             <Officer />
@@ -219,10 +245,7 @@ export function Cases() {
       case HttpStatusCode.Unauthorized: {
         return (
           <Fragment>
-            <Attention
-              type="danger"
-              title={i18n.str`Operation denied`}
-            >
+            <Attention type="danger" title={i18n.str`Operation denied`}>
               <i18n.Translate>
                 This account is not allowed to perform list the cases.
               </i18n.Translate>
@@ -245,7 +268,9 @@ export function Cases() {
       onFirstPage={list.isFirstPage ? undefined : list.loadFirst}
       onNext={list.isLastPage ? undefined : list.loadNext}
       filter={stateFilter}
-      onChangeFilter={setStateFilter}
+      onChangeFilter={(d) => {
+        setStateFilter(d)
+      }}
     />
   );
 }