Ready to implement file dialog

moneymgr_web/src/dialogs/FileViewerDialog.tsx

@@ -0,0 +1,21 @@
+import { Button, Dialog, DialogActions, DialogTitle } from "@mui/material";
+import { UploadedFile } from "../api/FileApi";
+import { filesize } from "filesize";
+
+export function FileViewerDialog(p: {
+  open: boolean;
+  onClose: () => void;
+  file: UploadedFile;
+}): React.ReactElement {
+  return (
+    <Dialog open={p.open} onClose={p.onClose}>
+      <DialogTitle>
+        {p.file.file_name} ({filesize(p.file.file_size)})
+      </DialogTitle>
+      TODO
+      <DialogActions>
+        <Button onClick={p.onClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

moneymgr_web/src/widgets/UploadedFileWidget.tsx

@@ -5,6 +5,7 @@ import { filesize } from "filesize";
 import React from "react";
 import { FileApi, UploadedFile } from "../api/FileApi";
 import { AsyncWidget } from "./AsyncWidget";
+import { FileViewerDialog } from "../dialogs/FileViewerDialog";
 
 export function UploadedFileWidget(p: { file_id: number }): React.ReactElement {
   const [file, setFile] = React.useState<UploadedFile | null>(null);
@@ -26,17 +27,26 @@ export function UploadedFileWidget(p: { file_id: number }): React.ReactElement {
 function UploadedFileWidgetInner(p: {
   file: UploadedFile;
 }): React.ReactElement {
+  const [open, setOpen] = React.useState(false);
   return (
-    <Button
-      startIcon={
-        p.file.mime_type === "application/pdf" ? (
-          <PictureAsPdfIcon />
-        ) : (
-          <ImageIcon />
-        )
-      }
-    >
-      {p.file.file_name} ({filesize(p.file.file_size)})
-    </Button>
+    <>
+      <FileViewerDialog
+        open={open}
+        file={p.file}
+        onClose={() => setOpen(false)}
+      />
+      <Button
+        startIcon={
+          p.file.mime_type === "application/pdf" ? (
+            <PictureAsPdfIcon />
+          ) : (
+            <ImageIcon />
+          )
+        }
+        onClick={() => setOpen(true)}
+      >
+        {p.file.file_name} ({filesize(p.file.file_size)})
+      </Button>
+    </>
   );
 }