Load the list of API tokens

matrixgw_frontend/src/routes/APITokensRoute.tsx

@@ -1,23 +1,33 @@
 import AddIcon from "@mui/icons-material/Add";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import { Alert, AlertTitle, IconButton, Tooltip } from "@mui/material";
-import { MatrixGWRouteContainer } from "../widgets/MatrixGWRouteContainer";
-import React from "react";
-import { CreateTokenDialog } from "../dialogs/CreateTokenDialog";
-import { type TokenWithSecret } from "../api/TokensApi";
-import { APIClient } from "../api/ApiClient";
 import { QRCodeCanvas } from "qrcode.react";
+import React from "react";
+import { APIClient } from "../api/ApiClient";
+import { TokensApi, type Token, type TokenWithSecret } from "../api/TokensApi";
+import { CreateTokenDialog } from "../dialogs/CreateTokenDialog";
+import { AsyncWidget } from "../widgets/AsyncWidget";
 import { CopyTextChip } from "../widgets/CopyTextChip";
+import { MatrixGWRouteContainer } from "../widgets/MatrixGWRouteContainer";
 
 export function APITokensRoute(): React.ReactElement {
+  const count = React.useRef(0);
+
   const [openCreateTokenDialog, setOpenCreateTokenDialog] =
     React.useState(false);
 
   const [createdToken, setCreatedToken] =
     React.useState<TokenWithSecret | null>(null);
 
+  const [list, setList] = React.useState<Token[] | undefined>();
+
+  const load = async () => {
+    setList(await TokensApi.GetList());
+  };
+
   const handleRefreshTokensList = () => {
-    //throw new Error("todo");
+    count.current += 1;
+    setList(undefined);
   };
 
   const handleOpenCreateTokenDialog = () => setOpenCreateTokenDialog(true);
@@ -49,13 +59,24 @@ export function APITokensRoute(): React.ReactElement {
         </span>
       }
     >
+      {/* Create token dialog anchor */}
       <CreateTokenDialog
         open={openCreateTokenDialog}
         onCreated={handleCreatedToken}
         onClose={handleCancelCreateToken}
       />
+
+      {/* Info about created token */}
       {createdToken && <CreatedToken token={createdToken!} />}
-      <p>TODO list</p>
+
+      {/* Tokens list */}
+      <AsyncWidget
+        loadKey={count.current}
+        ready={list !== undefined}
+        load={load}
+        errMsg="Failed to load the list of tokens!"
+        build={() => <>{list?.length} tokens</>}
+      />
     </MatrixGWRouteContainer>
   );
 }