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 }) => {
}
- disabled={loadingForDownload}
+ disabled={isDownloadingFile}
variant="contained"
onClick={handleDownload}
sx={{ mt: 4, width: "150px" }}
>
- {loadingForDownload ? : "Download"}
+ {isDownloadingFile ? : "Download"}
{
}
- disabled={loadingForGithub}
+ disabled={isCreatingGithubPR}
variant="contained"
onClick={handleGithub}
sx={{ mt: 4, width: "230px" }}
>
- {loadingForGithub ? (
+ {isCreatingGithubPR ? (
) : (
"Create Pull Request"
)}
+
{/* Snackbar to show errors */}
0}
+ autoHideDuration={6000}
onClose={handleCloseErrorSnackbar}
>
{
{errorMessage}
+
{/* Dialog box for acknowledgement the creation of a pull request */}
-