form hook now takes the shape of the form (do not rely on initial value)

1 files changed, 9 insertions, 5 deletions

diff --git a/packages/aml-backoffice-ui/src/pages/Cases.tsx b/packages/aml-backoffice-ui/src/pages/Cases.tsx
index 2e92c111e..3860bcd98 100644
--- a/packages/aml-backoffice-ui/src/pages/Cases.tsx
+++ b/packages/aml-backoffice-ui/src/pages/Cases.tsx
@@ -24,7 +24,7 @@ import {
   ErrorLoading,
   InputChoiceHorizontal,
   Loading,
-  useTranslationContext
+  useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { useEffect, useState } from "preact/hooks";
@@ -34,6 +34,8 @@ import { privatePages } from "../Routing.js";
 import { FormErrors, RecursivePartial, useFormState } from "../hooks/form.js";
 import { undefinedIfEmpty } from "./CreateAccount.js";
 import { Officer } from "./Officer.js";
+import { UIHandlerId } from "../context/ui-forms.js";
+import { amlStateConverter } from "../utils/converter.js";
 
 type FormType = {
   state: TalerExchangeApi.AmlState;
@@ -55,6 +57,7 @@ export function CasesUI({
   const { i18n } = useTranslationContext();
 
   const [form, status] = useFormState<FormType>(
+    [".state"] as Array<UIHandlerId>,
     {
       state: filter,
     },
@@ -106,18 +109,19 @@ export function CasesUI({
             name="state"
             label={i18n.str`Filter`}
             handler={form.state}
+            converter={amlStateConverter}
             choices={[
               {
                 label: i18n.str`Pending`,
-                value: TalerExchangeApi.AmlState.pending,
+                value: "pending",
               },
               {
                 label: i18n.str`Frozen`,
-                value: TalerExchangeApi.AmlState.frozen,
+                value: "frozen",
               },
               {
                 label: i18n.str`Normal`,
-                value: TalerExchangeApi.AmlState.normal,
+                value: "normal",
               },
             ]}
           />
@@ -269,7 +273,7 @@ export function Cases() {
       onNext={list.isLastPage ? undefined : list.loadNext}
       filter={stateFilter}
       onChangeFilter={(d) => {
-        setStateFilter(d)
+        setStateFilter(d);
       }}
     />
   );