cases, account details and new-form screen

1 files changed, 32 insertions, 11 deletions

diff --git a/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx b/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx
index 87c4c43fb..4ac90ad57 100644
--- a/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx
+++ b/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx
@@ -1,6 +1,16 @@
-import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util";
+import {
+  AbsoluteTime,
+  AmountJson,
+  TranslatedString,
+} from "@gnu-taler/taler-util";
 import { ComponentChildren, VNode, createContext, h } from "preact";
-import { MutableRef, StateUpdater, useEffect, useRef } from "preact/hooks";
+import {
+  MutableRef,
+  StateUpdater,
+  useEffect,
+  useRef,
+  useState,
+} from "preact/hooks";
 
 export interface FormType<T> {
   value: MutableRef<Partial<T>>;
@@ -15,6 +25,8 @@ export const FormContext = createContext<FormType<any>>({});
 export type FormState<T> = {
   [field in keyof T]?: T[field] extends AbsoluteTime
     ? Partial<InputFieldState>
+    : T[field] extends AmountJson
+    ? Partial<InputFieldState>
     : T[field] extends Array<infer P>
     ? Partial<InputArrayFieldState<P>>
     : T[field] extends object
@@ -40,22 +52,31 @@ export interface InputArrayFieldState<T> extends InputFieldState {
 export function FormProvider<T>({
   children,
   initialValue,
-  onUpdate,
+  onUpdate: notify,
   onSubmit,
   computeFormState,
 }: {
   initialValue?: Partial<T>;
   onUpdate?: (v: Partial<T>) => void;
-  onSubmit: (v: T) => void;
+  onSubmit?: (v: T) => void;
   computeFormState?: (v: T) => FormState<T>;
   children: ComponentChildren;
 }): VNode {
-  const value = useRef(initialValue ?? {});
-  useEffect(() => {
-    return function onUnload() {
-      value.current = initialValue ?? {};
-    };
-  });
+  // const value = useRef(initialValue ?? {});
+  // useEffect(() => {
+  //   return function onUnload() {
+  //     value.current = initialValue ?? {};
+  //   };
+  // });
+  // const onUpdate = notify
+  const [state, setState] = useState<Partial<T>>(initialValue ?? {});
+  const value = { current: state };
+  // console.log("RENDER", initialValue, value);
+  const onUpdate = (v: typeof state) => {
+    // console.log("updated");
+    setState(v);
+    if (notify) notify(v);
+  };
   return (
     <FormContext.Provider
       value={{ initialValue, value, onUpdate, computeFormState }}
@@ -64,7 +85,7 @@ export function FormProvider<T>({
         onSubmit={(e) => {
           e.preventDefault();
           //@ts-ignore
-          onSubmit(value.current);
+          if (onSubmit) onSubmit(value.current);
         }}
       >
         {children}