From eb16e04dc8370db0bb1cb017ab342c38bd9b855c Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Wed, 11 Sep 2024 15:38:25 +0200
Subject: [PATCH] feat(ui-commons): use DownloadButton in DownloadMatrixButton

---
 .../explore/Results/ResultDetails/index.tsx   |  2 +-
 .../common/DownloadMatrixButton.tsx           | 85 -------------------
 .../components/common/MatrixInput/index.tsx   |  2 +-
 .../common/buttons/DownloadMatrixButton.tsx   | 65 ++++++++++++++
 4 files changed, 67 insertions(+), 87 deletions(-)
 delete mode 100644 webapp/src/components/common/DownloadMatrixButton.tsx
 create mode 100644 webapp/src/components/common/buttons/DownloadMatrixButton.tsx

diff --git a/webapp/src/components/App/Singlestudy/explore/Results/ResultDetails/index.tsx b/webapp/src/components/App/Singlestudy/explore/Results/ResultDetails/index.tsx
index daa10520c2..a4c1c11442 100644
--- a/webapp/src/components/App/Singlestudy/explore/Results/ResultDetails/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Results/ResultDetails/index.tsx
@@ -46,7 +46,7 @@ import BooleanFE from "../../../../../common/fieldEditors/BooleanFE";
 import SelectFE from "../../../../../common/fieldEditors/SelectFE";
 import NumberFE from "../../../../../common/fieldEditors/NumberFE";
 import moment from "moment";
-import DownloadMatrixButton from "../../../../../common/DownloadMatrixButton.tsx";
+import DownloadMatrixButton from "../../../../../common/buttons/DownloadMatrixButton.tsx";
 
 function ResultDetails() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();
diff --git a/webapp/src/components/common/DownloadMatrixButton.tsx b/webapp/src/components/common/DownloadMatrixButton.tsx
deleted file mode 100644
index 49551eb0f7..0000000000
--- a/webapp/src/components/common/DownloadMatrixButton.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import FileUploadIcon from "@mui/icons-material/FileUpload";
-import SplitButton from "./buttons/SplitButton.tsx";
-import { downloadMatrix } from "../../services/api/studies/raw/index.ts";
-import { downloadFile } from "../../utils/fileUtils.ts";
-import { useState } from "react";
-import { StudyMetadata } from "../../common/types.ts";
-import useEnqueueErrorSnackbar from "../../hooks/useEnqueueErrorSnackbar.tsx";
-import { useTranslation } from "react-i18next";
-
-export interface DownloadMatrixButtonProps {
-  studyId: StudyMetadata["id"];
-  path?: string;
-  disabled?: boolean;
-  label?: string;
-}
-
-const EXPORT_OPTIONS = [
-  { label: "TSV", value: "tsv" },
-  { label: "Excel", value: "xlsx" },
-] as const;
-
-type ExportFormat = (typeof EXPORT_OPTIONS)[number]["value"];
-
-function DownloadMatrixButton(props: DownloadMatrixButtonProps) {
-  const { t } = useTranslation();
-  const { studyId, path, disabled, label = t("global.export") } = props;
-  const [isDownloading, setIsDownloading] = useState(false);
-  const enqueueErrorSnackbar = useEnqueueErrorSnackbar();
-
-  ////////////////////////////////////////////////////////////////
-  // Event Handlers
-  ////////////////////////////////////////////////////////////////
-
-  const handleDownload = async (format: ExportFormat) => {
-    if (!path) {
-      return;
-    }
-
-    setIsDownloading(true);
-
-    const isExcel = format === "xlsx";
-
-    try {
-      const res = await downloadMatrix({
-        studyId,
-        path,
-        format,
-        header: isExcel,
-        index: isExcel,
-      });
-
-      downloadFile(
-        res,
-        `matrix_${studyId}_${path.replace("/", "_")}.${format}`,
-      );
-    } catch (err) {
-      enqueueErrorSnackbar(t("global.download.error"), String(err));
-    }
-
-    setIsDownloading(false);
-  };
-
-  ////////////////////////////////////////////////////////////////
-  // JSX
-  ////////////////////////////////////////////////////////////////
-
-  return (
-    <SplitButton
-      variant="contained"
-      options={[...EXPORT_OPTIONS]}
-      onClick={handleDownload}
-      size="small"
-      disabled={!path || disabled}
-      ButtonProps={{
-        startIcon: <FileUploadIcon />,
-        loadingPosition: "start",
-        loading: isDownloading,
-      }}
-    >
-      {label}
-    </SplitButton>
-  );
-}
-
-export default DownloadMatrixButton;
diff --git a/webapp/src/components/common/MatrixInput/index.tsx b/webapp/src/components/common/MatrixInput/index.tsx
index a9c2971e9c..2cea0abb24 100644
--- a/webapp/src/components/common/MatrixInput/index.tsx
+++ b/webapp/src/components/common/MatrixInput/index.tsx
@@ -22,7 +22,7 @@ import ImportDialog from "../dialogs/ImportDialog";
 import MatrixAssignDialog from "./MatrixAssignDialog";
 import { fetchMatrixFn } from "../../App/Singlestudy/explore/Modelization/Areas/Hydro/utils";
 import SplitButton from "../buttons/SplitButton";
-import DownloadMatrixButton from "../DownloadMatrixButton.tsx";
+import DownloadMatrixButton from "../buttons/DownloadMatrixButton.tsx";
 
 interface Props {
   study: StudyMetadata | StudyMetadata["id"];
diff --git a/webapp/src/components/common/buttons/DownloadMatrixButton.tsx b/webapp/src/components/common/buttons/DownloadMatrixButton.tsx
new file mode 100644
index 0000000000..d92c99d499
--- /dev/null
+++ b/webapp/src/components/common/buttons/DownloadMatrixButton.tsx
@@ -0,0 +1,65 @@
+import { downloadMatrix } from "../../../services/api/studies/raw";
+import { downloadFile } from "../../../utils/fileUtils";
+import { StudyMetadata } from "../../../common/types";
+import { useTranslation } from "react-i18next";
+import DownloadButton from "./DownloadButton";
+
+export interface DownloadMatrixButtonProps {
+  studyId: StudyMetadata["id"];
+  path: string;
+  disabled?: boolean;
+  label?: string;
+}
+
+const EXPORT_OPTIONS = [
+  { label: "TSV", value: "tsv" },
+  { label: "Excel", value: "xlsx" },
+] as const;
+
+type ExportFormat = (typeof EXPORT_OPTIONS)[number]["value"];
+
+function DownloadMatrixButton(props: DownloadMatrixButtonProps) {
+  const { t } = useTranslation();
+  const { studyId, path, disabled, label = t("global.export") } = props;
+
+  ////////////////////////////////////////////////////////////////
+  // Event Handlers
+  ////////////////////////////////////////////////////////////////
+
+  const handleDownload = async (format: ExportFormat) => {
+    if (!path) {
+      return;
+    }
+
+    const isExcel = format === "xlsx";
+
+    const res = await downloadMatrix({
+      studyId,
+      path,
+      format,
+      header: isExcel,
+      index: isExcel,
+    });
+
+    return downloadFile(
+      res,
+      `matrix_${studyId}_${path.replace("/", "_")}.${format}`,
+    );
+  };
+
+  ////////////////////////////////////////////////////////////////
+  // JSX
+  ////////////////////////////////////////////////////////////////
+
+  return (
+    <DownloadButton
+      formatOptions={[...EXPORT_OPTIONS]}
+      onClick={handleDownload}
+      disabled={!path || disabled}
+    >
+      {label}
+    </DownloadButton>
+  );
+}
+
+export default DownloadMatrixButton;