Ready to implement file 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>
+    </>
   );
 }