fix: Portal frontend 40 (#78)

* fix: download file button

* fix: download csv file

* Merge branch 'main' into portal-frontend-40

Author: SKairinos

src/components/DownloadFileButton.tsx

@@ -0,0 +1,54 @@
+import { Button, type ButtonProps } from "@mui/material"
+import { type FC, useEffect } from "react"
+import { Download as DownloadIcon } from "@mui/icons-material"
+
+export type DownloadFileButtonProps = ButtonProps & {
+  file:
+    | Blob
+    | MediaSource
+    | {
+        text: string
+        mimeType: "plain" | "csv"
+        name: string
+        charset?: string
+        extension?: string
+      }
+}
+
+const DownloadFileButton: FC<DownloadFileButtonProps> = ({
+  children = "Download",
+  endIcon = <DownloadIcon />,
+  file,
+  ...otherButtonProps
+}) => {
+  let url: undefined | string = undefined
+  let anchorProps: undefined | { download?: string; href: string } = undefined
+  if ("mimeType" in file) {
+    let { text, mimeType, name, charset = "utf-8", extension } = file
+
+    if (!extension) extension = "." + { plain: "txt", csv: "csv" }[mimeType]
+
+    anchorProps = {
+      download: name + extension,
+      href: `data:text/${mimeType};charset=${charset},${encodeURIComponent(text)}`,
+    }
+  } else {
+    url = URL.createObjectURL(file)
+
+    anchorProps = { href: url }
+  }
+
+  useEffect(() => {
+    return () => {
+      if (url) URL.revokeObjectURL(url)
+    }
+  }, [url])
+
+  return (
+    <Button endIcon={endIcon} {...otherButtonProps} {...anchorProps}>
+      {children}
+    </Button>
+  )
+}
+
+export default DownloadFileButton

src/components/index.ts

@@ -6,6 +6,8 @@ export * from "./CopyIconButton"
 export { default as CopyIconButton } from "./CopyIconButton"
 export * from "./Countdown"
 export { default as Countdown } from "./Countdown"
+export * from "./DownloadFileButton"
+export { default as DownloadFileButton } from "./DownloadFileButton"
 export * from "./ElevatedAppBar"
 export { default as ElevatedAppBar } from "./ElevatedAppBar"
 export * from "./Image"