diff --git a/taxonomy-editor-frontend/src/pages/export/index.jsx b/taxonomy-editor-frontend/src/pages/export/index.tsx similarity index 71% rename from taxonomy-editor-frontend/src/pages/export/index.jsx rename to taxonomy-editor-frontend/src/pages/export/index.tsx index cf1f6dd9..e3683436 100644 --- a/taxonomy-editor-frontend/src/pages/export/index.jsx +++ b/taxonomy-editor-frontend/src/pages/export/index.tsx @@ -21,16 +21,25 @@ import GitHubIcon from "@mui/icons-material/GitHub"; import { createBaseURL } from "../editentry/createURL"; -const ExportTaxonomy = ({ addNavLinks }) => { +type Props = { + addNavLinks: ({ + branchName, + taxonomyName, + }: { + branchName: string; + taxonomyName: string; + }) => void; +}; + +const ExportTaxonomy = ({ addNavLinks }: Props) => { + const [isCreatingGithubPR, setIsCreatingGithubPR] = useState(false); + const [pullRequestURL, setPullRequestURL] = useState(""); + const [isDownloadingFile, setIsDownloadingFile] = useState(false); + const [errorMessage, setErrorMessage] = useState(""); + const { taxonomyName, branchName } = useParams(); const baseURL = createBaseURL(taxonomyName, branchName); - const [loadingForDownload, setLoadingForDownload] = useState(false); - const [loadingForGithub, setLoadingForGitHub] = useState(false); - const [openSuccessDialog, setOpenSuccessDialog] = useState(false); - const [pullRequestURL, setPullRequestURL] = useState(null); - const [errorMessage, setErrorMessage] = useState(null); - useEffect( function defineMainNavLinks() { if (!branchName || !taxonomyName) return; @@ -41,11 +50,16 @@ const ExportTaxonomy = ({ addNavLinks }) => { ); const handleDownload = () => { - setLoadingForDownload(true); - fetch(baseURL + "downloadexport", { + setIsDownloadingFile(true); + setErrorMessage(""); + + fetch(`${baseURL}downloadexport`, { method: "GET", }) .then((response) => { + if (!response.ok) { + throw new Error("Unable to download file"); + } return response.blob(); }) .then((blob) => { @@ -59,40 +73,43 @@ const ExportTaxonomy = ({ addNavLinks }) => { URL.revokeObjectURL(url); }) .catch(() => { - setErrorMessage("Download failed!"); + setErrorMessage("Unable to download file"); }) .finally(() => { - setLoadingForDownload(false); + setIsDownloadingFile(false); }); }; const handleGithub = () => { - setLoadingForGitHub(true); - fetch(baseURL + "githubexport", { + setIsCreatingGithubPR(true); + setErrorMessage(""); + setPullRequestURL(""); + + fetch(`${baseURL}githubexport`, { method: "GET", }) .then(async (response) => { const responseBody = await response.json(); - if (!response.ok && responseBody.detail) { - throw new Error(responseBody.detail); + if (!response.ok) { + throw new Error(responseBody?.detail ?? "Unable to export to Github"); } else { setPullRequestURL(responseBody); - setOpenSuccessDialog(true); } }) - .catch((detail) => { - setErrorMessage("Unable to export to Github!"); + .catch(() => { + setErrorMessage("Unable to export to Github"); }) .finally(() => { - setLoadingForGitHub(false); + setIsCreatingGithubPR(false); }); }; const handleCloseErrorSnackbar = () => { - setErrorMessage(null); + setErrorMessage(""); }; - const handleCloseSuccessDialog = () => { - setOpenSuccessDialog(false); + + const handleClosePullRequestDialog = () => { + setPullRequestURL(""); }; return ( @@ -117,12 +134,12 @@ const ExportTaxonomy = ({ addNavLinks }) => { { + {/* Snackbar to show errors */} 0} + autoHideDuration={6000} onClose={handleCloseErrorSnackbar} > { {errorMessage} + {/* Dialog box for acknowledgement the creation of a pull request */} - + 0}> Your pull request has been created! @@ -170,8 +189,8 @@ const ExportTaxonomy = ({ addNavLinks }) => { - - +