diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 74e2a26202..3471c9ef49 100644 --- a/public/locales/en/translation.json +++ b/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:", diff --git a/src/components/ProjectExport/DownloadButton.tsx b/src/components/ProjectExport/DownloadButton.tsx index ce844d3a90..44eda6c56e 100644 --- a/src/components/ProjectExport/DownloadButton.tsx +++ b/src/components/ProjectExport/DownloadButton.tsx @@ -42,10 +42,12 @@ export default function DownloadButton( const dispatch = useAppDispatch(); const [fileName, setFileName] = useState(); const [fileUrl, setFileUrl] = useState(); + const [projectName, setProjectName] = useState(""); const { t } = useTranslation(); const downloadLink = createRef(); const reset = useCallback(async (): Promise => { + 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 ( - + <> {exportState.status !== ExportStatus.Default && ( - + )} - + ); } diff --git a/src/components/ProjectExport/Redux/ExportProjectActions.ts b/src/components/ProjectExport/Redux/ExportProjectActions.ts index 8bd8488ff1..de4fe4728a 100644 --- a/src/components/ProjectExport/Redux/ExportProjectActions.ts +++ b/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(); }; } diff --git a/src/components/ProjectExport/Redux/ExportProjectReducer.ts b/src/components/ProjectExport/Redux/ExportProjectReducer.ts index d830a50508..035f8fa996 100644 --- a/src/components/ProjectExport/Redux/ExportProjectReducer.ts +++ b/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;