welcome page with error diagnostics / react refactoring

1 files changed, 34 insertions, 53 deletions

diff --git a/src/webex/pages/payback.tsx b/src/webex/pages/payback.tsx
index f69a33493..934c28c0a 100644
--- a/src/webex/pages/payback.tsx
+++ b/src/webex/pages/payback.tsx
@@ -20,73 +20,54 @@
  * @author Florian Dold
  */
 
-
 /**
  * Imports.
  */
-import {
-  ReserveRecord,
-} from "../../dbTypes";
+import { ReserveRecord } from "../../dbTypes";
+import { renderAmount, registerMountPage } from "../renderHtml";
+import { getPaybackReserves, withdrawPaybackReserve } from "../wxApi";
+import * as React from "react";
+import { useState } from "react";
 
-import { ImplicitStateComponent, StateHolder } from "../components";
-import { renderAmount } from "../renderHtml";
-import {
-  getPaybackReserves,
-  withdrawPaybackReserve,
-} from "../wxApi";
+function Payback() {
+  const [reserves, setReserves] = useState<ReserveRecord[] | null>(null);
 
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+  useState(() => {
+    const update = async () => {
+      const r = await getPaybackReserves();
+      setReserves(r);
+    };
 
-class Payback extends ImplicitStateComponent<{}> {
-  private reserves: StateHolder<ReserveRecord[]|null> = this.makeState(null);
-  constructor(props: {}) {
-    super(props);
     const port = chrome.runtime.connect();
     port.onMessage.addListener((msg: any) => {
       if (msg.notify) {
         console.log("got notified");
-        this.update();
+        update();
       }
     });
-    this.update();
-  }
+  });
 
-  async update() {
-    const reserves = await getPaybackReserves();
-    this.reserves(reserves);
+  if (!reserves) {
+    return <span>loading ...</span>;
   }
-
-  withdrawPayback(pub: string) {
-    withdrawPaybackReserve(pub);
+  if (reserves.length === 0) {
+    return <span>No reserves with payback available.</span>;
   }
-
-  render(): JSX.Element {
-    const reserves = this.reserves();
-    if (!reserves) {
-      return <span>loading ...</span>;
-    }
-    if (reserves.length === 0) {
-      return <span>No reserves with payback available.</span>;
-    }
-    return (
-      <div>
-        {reserves.map((r) => (
-          <div>
-            <h2>Reserve for ${renderAmount(r.current_amount!)}</h2>
-            <ul>
-              <li>Exchange: ${r.exchange_base_url}</li>
-            </ul>
-            <button onClick={() => this.withdrawPayback(r.reserve_pub)}>Withdraw again</button>
-          </div>
-        ))}
-      </div>
-    );
-  }
-}
-
-function main() {
-  ReactDOM.render(<Payback />, document.getElementById("container")!);
+  return (
+    <div>
+      {reserves.map(r => (
+        <div>
+          <h2>Reserve for ${renderAmount(r.current_amount!)}</h2>
+          <ul>
+            <li>Exchange: ${r.exchange_base_url}</li>
+          </ul>
+          <button onClick={() => withdrawPaybackReserve(r.reserve_pub)}>
+            Withdraw again
+          </button>
+        </div>
+      ))}
+    </div>
+  );
 }
 
-document.addEventListener("DOMContentLoaded", main);
+registerMountPage(() => <Payback />);