[ProjectExport] Improve feedback

public/locales/en/translation.json

@@ -130,9 +130,9 @@
   },
   "projectExport": {
     "cannotExportEmpty": "Project is empty. You cannot export a project with no words.",
-    "downloadInProgress": "Download in progress",
-    "exportFailed": "Export failed",
-    "exportInProgress": "Export in progress"
+    "downloadInProgress": "Downloading project: {{ val }}",
+    "exportFailed": "Failed to export project {{ val }}. Click to clear this message.",
+    "exportInProgress": "Exporting project: {{ val }}"
   },
   "projectSettings": {
     "project": "Project:",

src/components/ProjectExport/DownloadButton.tsx

@@ -42,10 +42,12 @@ export default function DownloadButton(
   const dispatch = useAppDispatch();
   const [fileName, setFileName] = useState<string | undefined>();
   const [fileUrl, setFileUrl] = useState<string | undefined>();
+  const [projectName, setProjectName] = useState("");
   const { t } = useTranslation();
   const downloadLink = createRef<HTMLAnchorElement>();
 
   const reset = useCallback(async (): Promise<void> => {
+    setFileName(undefined);
     await dispatch(asyncResetExport());
   }, [dispatch]);
 
@@ -67,25 +69,31 @@ export default function DownloadButton(
         }
       });
     }
-  }, [dispatch, exportState.projectId, fileName, reset, setFileUrl]);
+  }, [dispatch, exportState.projectId, fileName, reset]);
 
   useEffect(() => {
-    if (exportState.status === ExportStatus.Success) {
-      getProjectName(exportState.projectId).then((projectName) => {
-        setFileName(makeExportName(projectName));
-      });
+    if (exportState.projectId) {
+      getProjectName(exportState.projectId).then(setProjectName);
+    } else {
+      setProjectName("");
+    }
+  }, [exportState.projectId]);
+
+  useEffect(() => {
+    if (exportState.status === ExportStatus.Success && projectName) {
+      setFileName(makeExportName(projectName));
     }
-  }, [exportState, setFileName]);
+  }, [exportState.status, projectName]);
 
-  function textId(): string {
+  function tooltipText(): string {
     switch (exportState.status) {
       case ExportStatus.Exporting:
-        return "projectExport.exportInProgress";
+        return t("projectExport.exportInProgress", { val: projectName });
       case ExportStatus.Success:
       case ExportStatus.Downloading:
-        return "projectExport.downloadInProgress";
+        return t("projectExport.downloadInProgress", { val: projectName });
       case ExportStatus.Failure:
-        return "projectExport.exportFailed";
+        return t("projectExport.exportFailed", { val: projectName });
       default:
         throw new Error("Not implemented");
     }
@@ -122,9 +130,9 @@ export default function DownloadButton(
   }
 
   return (
-    <Fragment>
+    <>
       {exportState.status !== ExportStatus.Default && (
-        <Tooltip title={t(textId())} placement="bottom">
+        <Tooltip title={tooltipText()} placement="bottom">
           <IconButton
             tabIndex={-1}
             onClick={iconFunction()}
@@ -145,6 +153,6 @@ export default function DownloadButton(
           (This link should not be visible)
         </a>
       )}
-    </Fragment>
+    </>
   );
 }

src/components/ProjectExport/Redux/ExportProjectActions.ts

@@ -5,7 +5,7 @@ import {
   downloadingAction,
   exportingAction,
   failureAction,
-  resetAction,
+  resetExportAction,
   successAction,
 } from "components/ProjectExport/Redux//ExportProjectReducer";
 import { StoreStateDispatch } from "types/Redux/actions";
@@ -24,8 +24,8 @@ export function failure(projectId: string): PayloadAction {
   return failureAction(projectId);
 }
 
-export function reset(): Action {
-  return resetAction();
+export function resetExport(): Action {
+  return resetExportAction();
 }
 
 export function success(projectId: string): PayloadAction {
@@ -52,7 +52,7 @@ export function asyncDownloadExport(projectId: string) {
 
 export function asyncResetExport() {
   return async (dispatch: StoreStateDispatch) => {
-    dispatch(reset());
+    dispatch(resetExport());
     await deleteLift();
   };
 }

src/components/ProjectExport/Redux/ExportProjectReducer.ts

@@ -22,7 +22,7 @@ const exportProjectSlice = createSlice({
       state.projectId = action.payload;
       state.status = ExportStatus.Failure;
     },
-    resetAction: () => defaultState,
+    resetExportAction: () => defaultState,
     successAction: (state, action) => {
       state.projectId = action.payload;
       state.status = ExportStatus.Success;
@@ -36,7 +36,7 @@ export const {
   downloadingAction,
   exportingAction,
   failureAction,
-  resetAction,
+  resetExportAction,
   successAction,
 } = exportProjectSlice.actions;