Skip to content

Commit 4876434

Browse files
KonstimanKonstiman
committed
implemented the export error message
1 parent 6e6640c commit 4876434

6 files changed

Lines changed: 172 additions & 85 deletions

File tree

‎vis/js/default-config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,8 @@ var config = {
179179
show_cite_button: false,
180180
// show citation button for each paper
181181
cite_papers: false,
182+
// show export button for each paper
183+
export_papers: false,
182184
// show twitter sharing button
183185
show_twitter_button: false,
184186
// show email sharing button

‎vis/js/templates/modals/ExportPaperModal.jsx‎

Lines changed: 33 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,45 @@
11
import React from "react";
22
import { connect } from "react-redux";
33

4-
import { Button, Modal } from "react-bootstrap";
4+
import { Modal } from "react-bootstrap";
55
import { hideExportPaper } from "../../actions";
66

77
import { useLocalizationContext } from "../../components/LocalizationProvider";
8-
import CopyButton from "../CopyButton";
9-
import usePaperExport, {
10-
PAPER_EXPORT_ENDPOINT,
11-
} from "../../utils/usePaperExport";
12-
import useMatomo from "../../utils/useMatomo";
8+
import usePaperExport from "../../utils/usePaperExport";
9+
import Loading from "./exportmodal/Loading";
10+
import Content from "./exportmodal/Content";
11+
import Error from "./exportmodal/Error";
1312

1413
const ExportPaperModal = ({ open, onClose, paper, serverUrl }) => {
1514
const loc = useLocalizationContext();
16-
const { trackEvent } = useMatomo();
1715

18-
const exportContent = usePaperExport(paper, serverUrl);
16+
const exp = usePaperExport(paper, serverUrl);
1917

20-
const handleCopyClick = () => {
21-
trackEvent("List document", "Copy paper export", "Copy export button");
22-
};
18+
const hasFailed = exp && (exp.error || exp.content === "");
2319

24-
const handleDownloadClick = () => {
25-
startExportDownload(paper, serverUrl);
26-
trackEvent(
27-
"List document",
28-
"Download paper export",
29-
"Download export button"
30-
);
20+
const renderBody = () => {
21+
// no data = closed modal
22+
if (!paper) {
23+
return null;
24+
}
25+
// loading in progress
26+
if (!exp) {
27+
return <Loading />;
28+
}
29+
// error while loading
30+
if (hasFailed) {
31+
return <Error />;
32+
}
33+
// successfully loaded
34+
if (exp.content) {
35+
return (
36+
<Content paper={paper} serverUrl={serverUrl}>
37+
{exp.content}
38+
</Content>
39+
);
40+
}
41+
// fallback
42+
return null;
3143
};
3244

3345
return (
@@ -37,48 +49,12 @@ const ExportPaperModal = ({ open, onClose, paper, serverUrl }) => {
3749
<Modal.Title
3850
id="export-paper-title"
3951
className="export-paper-modal-title"
40-
style={{ fontSize: 20 }}
52+
style={{ fontSize: 20, color: hasFailed ? "#e55137" : undefined }}
4153
>
42-
{loc.export_paper}
54+
{loc.export_paper + (hasFailed ? " - connection lost" : "")}
4355
</Modal.Title>
4456
</Modal.Header>
45-
<Modal.Body className="modal-body">
46-
{!!paper && !exportContent && (
47-
<div id="spinner-iframe">
48-
<p className="wait-message">{loc.pdf_load_text}</p>
49-
<p className="wait-spinner">
50-
<span
51-
id="spinner-iframe-icon"
52-
className="glyphicon glyphicon-refresh glyphicon-refresh-animate"
53-
></span>{" "}
54-
</p>
55-
</div>
56-
)}
57-
{(!paper || !!exportContent) && (
58-
<>
59-
<p>
60-
<strong className="hs-strong" style={{ fontWeight: 800 }}>BibTeX</strong>
61-
</p>
62-
<div id="copy-paper-export" className="citation code">
63-
{exportContent}
64-
</div>
65-
<CopyButton
66-
className="indented-modal-btn"
67-
textId={"copy-paper-export"}
68-
textContent={exportContent}
69-
onClick={handleCopyClick}
70-
/>
71-
<Button
72-
className="indented-modal-btn"
73-
bsStyle="primary"
74-
onClick={handleDownloadClick}
75-
>
76-
<i className="fa fa-download"></i>
77-
&nbsp;&nbsp;{loc.download}
78-
</Button>
79-
</>
80-
)}
81-
</Modal.Body>
57+
<Modal.Body className="modal-body">{renderBody()}</Modal.Body>
8258
</Modal>
8359
// html template ends here
8460
);
@@ -95,24 +71,3 @@ const mapDispatchToProps = (dispatch) => ({
9571
});
9672

9773
export default connect(mapStateToProps, mapDispatchToProps)(ExportPaperModal);
98-
99-
// the alternative solution is to really create a form in the JSX
100-
const startExportDownload = (paper, serverUrl) => {
101-
const url = serverUrl + PAPER_EXPORT_ENDPOINT + "&download=true";
102-
103-
const form = document.createElement("form");
104-
105-
form.setAttribute("method", "post");
106-
form.setAttribute("action", url);
107-
form.setAttribute("target", "_blank");
108-
109-
const input = document.createElement("input");
110-
input.type = "hidden";
111-
input.name = "paper";
112-
input.value = JSON.stringify(paper);
113-
form.appendChild(input);
114-
115-
document.body.appendChild(form);
116-
form.submit();
117-
document.body.removeChild(form);
118-
};

‎vis/js/templates/modals/exportmodal/Content.jsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from "react";
2+
3+
import { Button } from "react-bootstrap";
4+
5+
import { useLocalizationContext } from "../../../components/LocalizationProvider";
6+
import CopyButton from "../../CopyButton";
7+
import useMatomo from "../../../utils/useMatomo";
8+
import { PAPER_EXPORT_ENDPOINT } from "../../../utils/usePaperExport";
9+
10+
const Content = ({ paper, serverUrl, children }) => {
11+
const loc = useLocalizationContext();
12+
const { trackEvent } = useMatomo();
13+
14+
const handleCopyClick = () => {
15+
trackEvent("List document", "Copy paper export", "Copy export button");
16+
};
17+
18+
const handleDownloadClick = () => {
19+
startExportDownload(paper, serverUrl);
20+
trackEvent(
21+
"List document",
22+
"Download paper export",
23+
"Download export button"
24+
);
25+
};
26+
27+
return (
28+
<>
29+
<p>
30+
<strong className="hs-strong" style={{ fontWeight: 800 }}>
31+
BibTeX
32+
</strong>
33+
</p>
34+
<div id="copy-paper-export" className="citation code">
35+
{children}
36+
</div>
37+
<CopyButton
38+
className="indented-modal-btn"
39+
textId={"copy-paper-export"}
40+
textContent={children}
41+
onClick={handleCopyClick}
42+
/>
43+
<Button
44+
className="indented-modal-btn"
45+
bsStyle="primary"
46+
onClick={handleDownloadClick}
47+
>
48+
<i className="fa fa-download"></i>
49+
&nbsp;&nbsp;{loc.download}
50+
</Button>
51+
</>
52+
);
53+
};
54+
55+
export default Content;
56+
57+
// the alternative solution is to really create a form in the JSX
58+
const startExportDownload = (paper, serverUrl) => {
59+
const url = serverUrl + PAPER_EXPORT_ENDPOINT + "&download=true";
60+
61+
const form = document.createElement("form");
62+
63+
form.setAttribute("method", "post");
64+
form.setAttribute("action", url);
65+
form.setAttribute("target", "_blank");
66+
67+
const input = document.createElement("input");
68+
input.type = "hidden";
69+
input.name = "paper";
70+
input.value = JSON.stringify(paper);
71+
form.appendChild(input);
72+
73+
document.body.appendChild(form);
74+
form.submit();
75+
document.body.removeChild(form);
76+
};

‎vis/js/templates/modals/exportmodal/Error.jsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from "react";
2+
3+
const Error = () => {
4+
return (
5+
<div className="export-error">
6+
<p>
7+
<strong>Unfortunately we were unable to create a file.</strong>
8+
</p>
9+
<p>
10+
It seems that your Internet is unavailable or the connection was reset.
11+
<br />
12+
<strong>
13+
Please check you Internet settings and try again by refreshing this
14+
page.
15+
</strong>
16+
</p>
17+
<p>
18+
If the error persists, please let us know at{" "}
19+
<a href="mailto:info@openknowledgemaps.org">
20+
info@openknowledgemaps.org
21+
</a>
22+
.<br />
23+
We will investigate this issue further.
24+
</p>
25+
</div>
26+
);
27+
};
28+
29+
export default Error;

‎vis/js/templates/modals/exportmodal/Loading.jsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from "react";
2+
3+
import { useLocalizationContext } from "../../../components/LocalizationProvider";
4+
5+
const Loading = () => {
6+
const loc = useLocalizationContext();
7+
8+
return (
9+
<div id="spinner-iframe">
10+
<p className="wait-message">{loc.pdf_load_text}</p>
11+
<p className="wait-spinner">
12+
<span
13+
id="spinner-iframe-icon"
14+
className="glyphicon glyphicon-refresh glyphicon-refresh-animate"
15+
></span>{" "}
16+
</p>
17+
</div>
18+
);
19+
};
20+
21+
export default Loading;

‎vis/js/utils/usePaperExport.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { useState, useEffect } from "react";
33
export const PAPER_EXPORT_ENDPOINT =
44
"services/exportMetadata.php?format=bibtex";
55

6-
const DATA_FALLBACK = "No data available.";
7-
86
const usePaperExport = (paper, serverUrl) => {
97
const [exports, setExports] = useState({});
108

@@ -17,7 +15,7 @@ const usePaperExport = (paper, serverUrl) => {
1715
}, [setExports, paper, serverUrl]);
1816

1917
if (!paper || !exports[paper.safe_id]) {
20-
return "";
18+
return null;
2119
}
2220

2321
return exports[paper.safe_id];
@@ -35,18 +33,24 @@ const loadPaperExport = (paper, serverUrl, callback) => {
3533
},
3634
body: "paper=" + encodeURIComponent(JSON.stringify(paper)),
3735
})
38-
.then((response) => response.text())
39-
.then((data) =>
36+
.then((response) => {
37+
if (!response.ok) {
38+
throw new Error(`${response.status} ${response.statusText}`);
39+
}
40+
41+
return response.text();
42+
})
43+
.then((content) =>
4044
callback((prev) => ({
4145
...prev,
42-
[paper.safe_id]: data ? data : DATA_FALLBACK,
46+
[paper.safe_id]: { error: false, content },
4347
}))
4448
)
4549
.catch((error) => {
4650
console.error(error);
4751
callback((prev) => ({
4852
...prev,
49-
[paper.safe_id]: DATA_FALLBACK,
53+
[paper.safe_id]: { error: true, content: "" },
5054
}));
5155
});
5256
};

0 commit comments

Comments
 (0)