updating package

packages/anastasis-webui/package.json

@@ -4,26 +4,12 @@
   "version": "0.0.2",
   "license": "MIT",
   "scripts": {
-    "build": "preact build --no-sw --no-esm --no-inline-css",
+    "compile": "tsc",
-    "serve": "sirv build --port ${PORT:=8080} --cors --single",
+    "dev": "./dev.mjs",
-    "dev": "preact watch --port ${PORT:=8080} --no-sw --no-esm",
+    "prepare": "pnpm compile",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "test": "echo no tests",
-    "build-storybook": "build-storybook",
+    "pretty": "prettier --write src"
-    "build-single": "preact build --no-sw --no-esm -c preact.single-config.js --dest single && sh remove-link-stylesheet.sh",
-    "serve-single": "sirv single --port ${PORT:=8080} --cors --single",
-    "pretty": "prettier --write src",
-    "storybook": "start-storybook -p 6006"
-  },
-  "eslintConfig": {
-    "parser": "@typescript-eslint/parser",
-    "extends": [
-      "preact",
-      "plugin:@typescript-eslint/recommended"
-    ],
-    "ignorePatterns": [
-      "build/"
-    ]
   },
   "dependencies": {
     "@gnu-taler/anastasis-core": "workspace:*",
@@ -41,27 +27,13 @@
   },
   "devDependencies": {
     "@creativebulma/bulma-tooltip": "^1.2.0",
-    "@storybook/addon-a11y": "^6.3.12",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/preact": "^6.3.12",
-    "@storybook/preset-scss": "^1.0.3",
-    "@types/enzyme": "^3.10.11",
-    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.3.0",
     "bulma": "^0.9.3",
     "bulma-checkbox": "^1.1.1",
     "bulma-radio": "^1.1.1",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-preact-pure": "^3.2.0",
-    "eslint": "^8.1.0",
-    "eslint-config-preact": "^1.2.0",
     "jssha": "^3.2.0",
     "preact-cli": "^3.3.1",
     "sass": "1.32.13",
     "sass-loader": "^10",
-    "sirv-cli": "^1.0.14",
     "typescript": "^4.5.4"
   }
 }

packages/anastasis-webui/src/components/picker/DurationPicker.tsx

@@ -21,7 +21,7 @@
 
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { useTranslator } from "../../i18n";
+import { useTranslator } from "../../i18n/index.js";
 import "../../scss/DurationPicker.scss";
 
 export interface Props {

packages/anastasis-webui/src/hooks/use-anastasis-reducer.ts

@@ -323,7 +323,7 @@ export function useAnastasisReducer(): AnastasisReducerApi {
         },
       });
     },
-    async discoverMore(): Promise<void> {},
+    async discoverMore(): Promise<void> { },
     async startRecover() {
       let s: ReducerState;
       if (remoteReducer) {
@@ -403,7 +403,7 @@ export function useAnastasisReducer(): AnastasisReducerApi {
 }
 
 class ReducerTxImpl implements ReducerTransactionHandle {
-  constructor(public transactionState: ReducerState) {}
+  constructor(public transactionState: ReducerState) { }
   async transition(action: string, args: any): Promise<ReducerState> {
     let s: ReducerState;
     if (remoteReducer) {

packages/anastasis-webui/src/pages/home/AddingProviderScreen.tsx

@@ -59,48 +59,13 @@ export function AddingProviderScreen({ providerType, onCancel }: Props): VNode {
     ? authMethods[providerType].label
     : undefined;
 
-  //FIXME: move this timeout logic into a hook
-  const timeout = useRef<number | undefined>(undefined);
-  useEffect(() => {
-    if (timeout) window.clearTimeout(timeout.current);
-    timeout.current = window.setTimeout(async () => {
-      const url = providerURL.endsWith("/") ? providerURL : providerURL + "/";
-      if (!providerURL || authProviders.includes(url)) return;
-      try {
-        setTesting(true);
-        await testProvider(url, providerType);
-        // this is use as tested but everything when ok
-        // undefined will mean that the field is not dirty
-        setError("");
-      } catch (e) {
-        console.log("tuvieja", e);
-        if (e instanceof Error) setError(e.message);
-      }
-      setTesting(false);
-    }, 200);
-  }, [providerURL, reducer]);
-
-  if (!reducer) {
-    return <div>no reducer in context</div>;
-  }
-
-  if (
-    !reducer.currentReducerState ||
-    !("authentication_providers" in reducer.currentReducerState)
-  ) {
-    return <div>invalid state</div>;
-  }
-
-  async function addProvider(provider_url: string): Promise<void> {
-    await reducer?.transition("add_provider", { provider_url });
-    onCancel();
-  }
-  function deleteProvider(provider_url: string): void {
-    reducer?.transition("delete_provider", { provider_url });
-  }
-
   const allAuthProviders =
-    reducer.currentReducerState.authentication_providers || {};
+    !reducer ||
+    !reducer.currentReducerState ||
+    reducer.currentReducerState.reducer_type === "error" ||
+    !reducer.currentReducerState.authentication_providers
+      ? {}
+      : reducer.currentReducerState.authentication_providers;
   const authProviders = Object.keys(allAuthProviders).filter((provUrl) => {
     const p = allAuthProviders[provUrl];
     if (!providerLabel) {
@@ -114,6 +79,43 @@ export function AddingProviderScreen({ providerType, onCancel }: Props): VNode {
     }
   });
 
+  //FIXME: move this timeout logic into a hook
+  const timeout = useRef<number | undefined>(undefined);
+  useEffect(() => {
+    if (timeout) window.clearTimeout(timeout.current);
+    timeout.current = window.setTimeout(async () => {
+      const url = providerURL.endsWith("/") ? providerURL : providerURL + "/";
+      if (!providerURL || authProviders.includes(url)) return;
+      try {
+        setTesting(true);
+        await testProvider(url, providerType);
+        setError("");
+      } catch (e) {
+        if (e instanceof Error) setError(e.message);
+      }
+      setTesting(false);
+    }, 200);
+  }, [providerURL, reducer]);
+
+  async function addProvider(provider_url: string): Promise<void> {
+    await reducer?.transition("add_provider", { provider_url });
+    onCancel();
+  }
+  function deleteProvider(provider_url: string): void {
+    reducer?.transition("delete_provider", { provider_url });
+  }
+
+  if (!reducer) {
+    return <div>no reducer in context</div>;
+  }
+
+  if (
+    !reducer.currentReducerState ||
+    !("authentication_providers" in reducer.currentReducerState)
+  ) {
+    return <div>invalid state</div>;
+  }
+
   let errors = !providerURL ? "Add provider URL" : undefined;
   let url: string | undefined;
   try {
@@ -190,7 +192,9 @@ export function AddingProviderScreen({ providerType, onCancel }: Props): VNode {
 
         {authProviders.map((k) => {
           const p = allAuthProviders[k] as AuthenticationProviderStatusOk;
-          return <TableRow url={k} info={p} onDelete={deleteProvider} />;
+          return (
+            <TableRow key={k} url={k} info={p} onDelete={deleteProvider} />
+          );
         })}
       </div>
     </AnastasisClientFrame>

packages/anastasis-webui/src/utils/index.tsx

@@ -1,6 +1,4 @@
-/* eslint-disable @typescript-eslint/camelcase */
 import {
-  AuthenticationProviderStatus,
   AuthenticationProviderStatusError,
   AuthenticationProviderStatusOk,
   BackupStates,
@@ -9,7 +7,11 @@ import {
   ReducerStateRecovery,
 } from "@gnu-taler/anastasis-core";
 import { FunctionalComponent, h, VNode } from "preact";
-import { AnastasisProvider } from "../context/anastasis";
+import { AnastasisProvider } from "../context/anastasis.js";
+
+const noop = async (): Promise<void> => {
+  return;
+};
 
 export function createExample<Props>(
   Component: FunctionalComponent<Props>,
@@ -21,39 +23,23 @@ export function createExample<Props>(
       <AnastasisProvider
         value={{
           currentReducerState,
-          discoverMore: async () => {},
+          discoverMore: noop,
-          discoverStart: async () => {},
+          discoverStart: noop,
           discoveryState: {
             state: "none",
           },
           currentError: undefined,
-          back: async () => {
+          back: noop,
-            null;
+          dismissError: noop,
-          },
+          reset: noop,
-          dismissError: async () => {
+          runTransaction: noop,
-            null;
+          startBackup: noop,
-          },
+          startRecover: noop,
-          reset: () => {
+          transition: noop,
-            null;
-          },
-          runTransaction: async () => {
-            null;
-          },
-          startBackup: () => {
-            null;
-          },
-          startRecover: () => {
-            null;
-          },
-          transition: async () => {
-            null;
-          },
           exportState: () => {
             return "{}";
           },
-          importState(s: string) {
+          importState: noop,
-            /* do nothing */
-          },
         }}
       >
         <Component {...args} />

packages/anastasis-webui/tsconfig.json

@@ -3,7 +3,10 @@
     /* Basic Options */
     "target": "ES6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */,
     "module": "ESNext" /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
-    // "lib": [],                             /* Specify library files to be included in the compilation:  */
+    "lib": [
+      "es2021",
+      "dom"
+    ], /* Specify library files to be included in the compilation:  */
     // "allowJs": true /* Allow javascript files to be compiled. */,
     // "checkJs": true,                       /* Report errors in .js files. */
     "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,