diff options
Diffstat (limited to 'src/webex/pages/payback.tsx')
-rw-r--r-- | src/webex/pages/payback.tsx | 87 |
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 />); |