From ad4e6afd31c4343030d90cb7feb954c61aceaf12 Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Wed, 16 Dec 2020 12:06:30 -0500
Subject: [PATCH 1/3] Add to DownloadButton status for active download.

---
 .../ProjectExport/DownloadButton.tsx          | 83 +++++++++++--------
 src/resources/translations.json               |  5 ++
 2 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/src/components/ProjectExport/DownloadButton.tsx b/src/components/ProjectExport/DownloadButton.tsx
index 63bb48fb82..27c06a2ec3 100644
--- a/src/components/ProjectExport/DownloadButton.tsx
+++ b/src/components/ProjectExport/DownloadButton.tsx
@@ -19,19 +19,21 @@ export default function DownloadButton() {
     (state: StoreState) => state.exportProjectState
   );
   const dispatch = useDispatch();
-  const [fileName, setFileName] = useState<null | string>(null);
-  const [fileUrl, setFileUrl] = useState<null | string>(null);
+  const [fileName, setFileName] = useState<string | undefined>();
+  const [fileUrl, setFileUrl] = useState<string | undefined>();
+  const [isDownloading, setIsDownloading] = useState<boolean>(false);
   let downloadLink = createRef<HTMLAnchorElement>();
 
   useEffect(() => {
-    if (downloadLink.current && fileUrl !== null) {
+    if (downloadLink.current && fileUrl) {
       downloadLink.current.click();
       URL.revokeObjectURL(fileUrl);
-      setFileUrl(null);
+      setFileUrl(undefined);
     }
   }, [downloadLink, fileUrl]);
 
   async function download() {
+    setIsDownloading(true);
     const projectName = await getProjectName(exportState.projectId);
     setFileName(`${projectName}_${getNowDateTimeString()}.zip`);
     asyncDownloadExport(exportState.projectId)(dispatch)
@@ -41,44 +43,57 @@ export default function DownloadButton() {
           reset();
         }
       })
-      .catch((err) => console.error(err));
+      .catch((err) => {
+        console.error(err);
+        setIsDownloading(false);
+      });
   }
 
   function reset() {
     resetExport(exportState.projectId)(dispatch);
+    setIsDownloading(false);
+  }
+
+  function icon() {
+    if (exportState.status === ExportStatus.Success && !isDownloading) {
+      return (
+        <IconButton tabIndex={-1} onClick={download}>
+          <GetApp />
+        </IconButton>
+      );
+    }
+    if (exportState.status === ExportStatus.Failure) {
+      return (
+        <IconButton tabIndex={-1} onClick={reset}>
+          <Error />
+        </IconButton>
+      );
+    }
+    return (
+      <IconButton tabIndex={-1}>
+        <Cached />
+      </IconButton>
+    );
+  }
+
+  function textId() {
+    switch (exportState.status) {
+      case ExportStatus.Success:
+        return `projectExport.download${
+          isDownloading ? "InProgress" : "Ready"
+        }`;
+      case ExportStatus.Failure:
+        return "projectExport.exportFailed";
+      case ExportStatus.InProgress:
+        return "projectExport.exportInProgress";
+    }
   }
 
   return (
     <React.Fragment>
-      {/* Nothing shows if exportState.status === ExportStatus.Default. */}
-      {exportState.status === ExportStatus.Success && (
-        <Tooltip
-          title={<Translate id="projectExport.downloadReady" />}
-          placement="bottom"
-        >
-          <IconButton tabIndex={-1} onClick={download}>
-            <GetApp />
-          </IconButton>
-        </Tooltip>
-      )}
-      {exportState.status === ExportStatus.InProgress && (
-        <Tooltip
-          title={<Translate id="projectExport.exportInProgress" />}
-          placement="bottom"
-        >
-          <IconButton tabIndex={-1}>
-            <Cached />
-          </IconButton>
-        </Tooltip>
-      )}
-      {exportState.status === ExportStatus.Failure && (
-        <Tooltip
-          title={<Translate id="projectExport.exportFailed" />}
-          placement="bottom"
-        >
-          <IconButton tabIndex={-1} onClick={reset}>
-            <Error />
-          </IconButton>
+      {exportState.status !== ExportStatus.Default && (
+        <Tooltip title={<Translate id={textId()} />} placement="bottom">
+          {icon()}
         </Tooltip>
       )}
       {fileUrl && (
diff --git a/src/resources/translations.json b/src/resources/translations.json
index 13ead33812..f438df69a6 100644
--- a/src/resources/translations.json
+++ b/src/resources/translations.json
@@ -265,6 +265,11 @@
     }
   },
   "projectExport": {
+    "downloadInProgress": [
+      "Download in progress",
+      "Download in progress",
+      "Download in progress"
+    ],
     "downloadReady": ["Download ready", "Download ready", "Download ready"],
     "exportFailed": ["Export failed", "Export failed", "Export failed"],
     "exportInProgress": [

From 90d2fcbab117e03ebca16b952cfec50649efca23 Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Mon, 21 Dec 2020 16:24:42 -0500
Subject: [PATCH 2/3] Remove downloading state.

---
 .../ProjectExport/DownloadButton.tsx          | 49 ++++++++-----------
 src/resources/translations.json               |  5 --
 2 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/src/components/ProjectExport/DownloadButton.tsx b/src/components/ProjectExport/DownloadButton.tsx
index 27c06a2ec3..c954bf5e60 100644
--- a/src/components/ProjectExport/DownloadButton.tsx
+++ b/src/components/ProjectExport/DownloadButton.tsx
@@ -21,7 +21,6 @@ export default function DownloadButton() {
   const dispatch = useDispatch();
   const [fileName, setFileName] = useState<string | undefined>();
   const [fileUrl, setFileUrl] = useState<string | undefined>();
-  const [isDownloading, setIsDownloading] = useState<boolean>(false);
   let downloadLink = createRef<HTMLAnchorElement>();
 
   useEffect(() => {
@@ -33,7 +32,6 @@ export default function DownloadButton() {
   }, [downloadLink, fileUrl]);
 
   async function download() {
-    setIsDownloading(true);
     const projectName = await getProjectName(exportState.projectId);
     setFileName(`${projectName}_${getNowDateTimeString()}.zip`);
     asyncDownloadExport(exportState.projectId)(dispatch)
@@ -43,45 +41,40 @@ export default function DownloadButton() {
           reset();
         }
       })
-      .catch((err) => {
-        console.error(err);
-        setIsDownloading(false);
-      });
+      .catch((err) => console.error(err));
   }
 
   function reset() {
     resetExport(exportState.projectId)(dispatch);
-    setIsDownloading(false);
   }
 
   function icon() {
-    if (exportState.status === ExportStatus.Success && !isDownloading) {
-      return (
-        <IconButton tabIndex={-1} onClick={download}>
-          <GetApp />
-        </IconButton>
-      );
-    }
-    if (exportState.status === ExportStatus.Failure) {
-      return (
-        <IconButton tabIndex={-1} onClick={reset}>
-          <Error />
-        </IconButton>
-      );
+    switch (exportState.status) {
+      case ExportStatus.Success:
+        return (
+          <IconButton tabIndex={-1} onClick={download}>
+            <GetApp />
+          </IconButton>
+        );
+      case ExportStatus.Failure:
+        return (
+          <IconButton tabIndex={-1} onClick={reset}>
+            <Error />
+          </IconButton>
+        );
+      default:
+        return (
+          <IconButton tabIndex={-1}>
+            <Cached />
+          </IconButton>
+        );
     }
-    return (
-      <IconButton tabIndex={-1}>
-        <Cached />
-      </IconButton>
-    );
   }
 
   function textId() {
     switch (exportState.status) {
       case ExportStatus.Success:
-        return `projectExport.download${
-          isDownloading ? "InProgress" : "Ready"
-        }`;
+        return "projectExport.downloadInProgress";
       case ExportStatus.Failure:
         return "projectExport.exportFailed";
       case ExportStatus.InProgress:
diff --git a/src/resources/translations.json b/src/resources/translations.json
index f438df69a6..13ead33812 100644
--- a/src/resources/translations.json
+++ b/src/resources/translations.json
@@ -265,11 +265,6 @@
     }
   },
   "projectExport": {
-    "downloadInProgress": [
-      "Download in progress",
-      "Download in progress",
-      "Download in progress"
-    ],
     "downloadReady": ["Download ready", "Download ready", "Download ready"],
     "exportFailed": ["Export failed", "Export failed", "Export failed"],
     "exportInProgress": [

From e210a05efef2ce0da4f15676cf2c79a506c62ab6 Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Mon, 21 Dec 2020 16:31:27 -0500
Subject: [PATCH 3/3] Split iconFunction from icon.

---
 .../ProjectExport/DownloadButton.tsx          | 43 +++++++++----------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/components/ProjectExport/DownloadButton.tsx b/src/components/ProjectExport/DownloadButton.tsx
index c954bf5e60..d74b8c9f2f 100644
--- a/src/components/ProjectExport/DownloadButton.tsx
+++ b/src/components/ProjectExport/DownloadButton.tsx
@@ -48,37 +48,34 @@ export default function DownloadButton() {
     resetExport(exportState.projectId)(dispatch);
   }
 
+  function textId() {
+    switch (exportState.status) {
+      case ExportStatus.InProgress:
+        return "projectExport.exportInProgress";
+      case ExportStatus.Success:
+        return "projectExport.downloadInProgress";
+      case ExportStatus.Failure:
+        return "projectExport.exportFailed";
+    }
+  }
+
   function icon() {
     switch (exportState.status) {
+      case ExportStatus.InProgress:
+        return <Cached />;
       case ExportStatus.Success:
-        return (
-          <IconButton tabIndex={-1} onClick={download}>
-            <GetApp />
-          </IconButton>
-        );
+        return <GetApp />;
       case ExportStatus.Failure:
-        return (
-          <IconButton tabIndex={-1} onClick={reset}>
-            <Error />
-          </IconButton>
-        );
-      default:
-        return (
-          <IconButton tabIndex={-1}>
-            <Cached />
-          </IconButton>
-        );
+        return <Error />;
     }
   }
 
-  function textId() {
+  function iconFunction() {
     switch (exportState.status) {
       case ExportStatus.Success:
-        return "projectExport.downloadInProgress";
+        return download;
       case ExportStatus.Failure:
-        return "projectExport.exportFailed";
-      case ExportStatus.InProgress:
-        return "projectExport.exportInProgress";
+        return reset;
     }
   }
 
@@ -86,7 +83,9 @@ export default function DownloadButton() {
     <React.Fragment>
       {exportState.status !== ExportStatus.Default && (
         <Tooltip title={<Translate id={textId()} />} placement="bottom">
-          {icon()}
+          <IconButton tabIndex={-1} onClick={iconFunction()}>
+            {icon()}
+          </IconButton>
         </Tooltip>
       )}
       {fileUrl && (