Load the list of movements on webui

moneymgr_web/src/routes/AccountRoute.tsx

@@ -6,15 +6,29 @@ import { AccountWidget } from "../widgets/AccountWidget";
 import { AmountWidget } from "../widgets/AmountWidget";
 import { Typography } from "@mui/material";
 import { NewMovementWidget } from "../widgets/NewMovementWidget";
+import { Movement, MovementApi } from "../api/MovementsApi";
+import React from "react";
+import { AsyncWidget } from "../widgets/AsyncWidget";
 
 export function AccountRoute(): React.ReactElement {
   const { accountId } = useParams();
 
+  const loadKey = React.useRef(0);
+
   const accounts = useAccounts();
   const account = accounts.get(Number(accountId));
 
+  const [movements, setMovements] = React.useState<Movement[] | undefined>();
+
+  const load = async () => {
+    setMovements(undefined);
+    setMovements(await MovementApi.GetAccountMovements(account!.id));
+  };
+
   const reload = async () => {
     accounts.reloadBalances();
+    setMovements(undefined);
+    loadKey.current += 1;
   };
 
   if (account === null) return <NotFoundRoute />;
@@ -34,7 +48,13 @@ export function AccountRoute(): React.ReactElement {
         </span>
       }
     >
-      TODO : table
+      <AsyncWidget
+        loadKey={`${account.id}-${loadKey.current}`}
+        load={load}
+        ready={movements !== null}
+        errMsg="Failed to load the list of movements!"
+        build={() => <>TODO : table count={movements?.length}</>}
+      />
       <NewMovementWidget account={account} onCreated={reload} />
     </MoneyMgrWebRouteContainer>
   );