Skip to content

Commit 6ce11e7

Browse files
MrCoderMrCoder
authored
Merge pull request #616 from ZenUml/fix/615-share-link-loader
Fix endless loading spinner issue
2 parents 647e211 + bc0a9f4 commit 6ce11e7

File tree

4 files changed

+79
-61
lines changed

4 files changed

+79
-61
lines changed

‎src/components/PopOver.jsx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -56,20 +56,18 @@ export class Popover extends Component {
5656
<div className="popover-trigger" onClick={this.togglePopover}>
5757
{trigger}
5858
</div>
59-
{isVisible && (
60-
<>
61-
{closeOnBlur && <div className="popover-backdrop" />}
62-
<div
63-
className={`popover-content ${placement} ${
64-
hasShadow ? 'shadow' : ''
65-
}`}
66-
ref={this.popoverRef}
67-
>
68-
{hasArrow && <div className={`popover-arrow`}></div>}
69-
{content}
70-
</div>
71-
</>
72-
)}
59+
<div style={{ display: isVisible ? 'block' : 'none' }}>
60+
{closeOnBlur && <div className="popover-backdrop" />}
61+
<div
62+
className={`popover-content ${placement} ${
63+
hasShadow ? 'shadow' : ''
64+
}`}
65+
ref={this.popoverRef}
66+
>
67+
{hasArrow && <div className={`popover-arrow`}></div>}
68+
{content}
69+
</div>
70+
</div>
7371
</div>
7472
);
7573
}

‎src/components/SharePanel.jsx‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export class SharePanel extends Component {
1212
isLoading: true,
1313
link: '',
1414
isTooltipVisible: false,
15+
hasError: false,
1516
};
1617
}
1718

@@ -24,14 +25,19 @@ export class SharePanel extends Component {
2425
}
2526

2627
async syncDiagram(currentItem) {
27-
const result = await syncDiagram(currentItem);
28-
if (!result) {
29-
return;
28+
this.setState({ isLoading: true });
29+
try {
30+
const result = await syncDiagram(currentItem);
31+
32+
this.setState({
33+
link: getShareLink(result),
34+
hasError: false,
35+
});
36+
} catch (err) {
37+
this.setState({ link: '', hasError: true });
38+
} finally {
39+
this.setState({ isLoading: false });
3040
}
31-
this.setState({
32-
isLoading: false,
33-
link: getShareLink(result),
34-
});
3541
}
3642

3743
handleCopyLink = () => {
@@ -47,20 +53,20 @@ export class SharePanel extends Component {
4753

4854
render() {
4955
const { author, currentItem } = this.props;
50-
const { link, isLoading } = this.state;
56+
const { link, isLoading, isTooltipVisible, hasError } = this.state;
5157

5258
return (
5359
<div className="share-panel">
5460
<Popover
55-
isVisible={this.state.isTooltipVisible}
61+
isVisible={isTooltipVisible}
5662
placement={'top'}
5763
hasShadow={true}
5864
trigger={
5965
<Button
6066
aria-label="Copy link*"
6167
className="button icon-button copy-button"
6268
title={link}
63-
onClick={this.handleCopyLink}
69+
onClick={this.handleCopyLink.bind(this)}
6470
disabled={isLoading}
6571
>
6672
{isLoading ? (
@@ -74,10 +80,21 @@ export class SharePanel extends Component {
7480
</Button>
7581
}
7682
content={
77-
<div className="tooltip">
78-
<span class="material-symbols-outlined">check_circle</span>
79-
<span>Link copied to clipboard</span>
80-
</div>
83+
hasError ? (
84+
<div className="tooltip">
85+
<span class="material-symbols-outlined error">error</span>
86+
<span>
87+
Unable to create the share link. Save it and try again later.
88+
</span>
89+
</div>
90+
) : (
91+
<div className="tooltip">
92+
<span class="material-symbols-outlined success">
93+
check_circle
94+
</span>
95+
<span>Link copied to clipboard</span>
96+
</div>
97+
)
8198
}
8299
/>
83100
<hr />

‎src/services/syncService.js‎

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,39 @@
11
import firebase from 'firebase/app';
22

33
async function syncDiagram(currentItem) {
4-
const { id, title, js, imageBase64 } = currentItem;
5-
if (!js || !title || !imageBase64) {
6-
console.warn('Cannot sync diagram because of missing data');
7-
return null;
8-
}
4+
const { id, title, js, imageBase64 } = currentItem;
5+
if (!js || !title || !imageBase64) {
6+
throw Error('Cannot sync diagram because of missing data');
7+
}
98

10-
const token = await firebase.auth().currentUser.getIdToken(true);
9+
const token = await firebase.auth().currentUser.getIdToken(true);
1110

12-
const data = {
13-
token,
14-
id,
15-
imageBase64,
16-
name: title,
17-
content: js,
18-
description: 'Shared diagram from https://app.zenuml.com',
19-
};
20-
console.log('calling /sync-diagram with data:', data)
21-
try {
22-
const response = await fetch('/sync-diagram', {
23-
method: 'POST',
24-
body: JSON.stringify(data),
25-
headers: { 'Content-Type': 'application/json' },
26-
});
27-
const result = await response.json();
28-
console.log('save to php app result: ', result)
29-
return result;
30-
} catch (error) {
31-
console.warn('Error when calling /sync-diagram', error);
32-
return null;
33-
}
11+
const data = {
12+
token,
13+
id,
14+
imageBase64,
15+
name: title,
16+
content: js,
17+
description: 'Shared diagram from https://app.zenuml.com',
18+
};
19+
console.log('calling /sync-diagram with data:', data)
20+
try {
21+
const response = await fetch('/sync-diagram', {
22+
method: 'POST',
23+
body: JSON.stringify(data),
24+
headers: { 'Content-Type': 'application/json' },
25+
});
26+
const result = await response.json();
27+
console.log('save to php app result: ', result)
28+
return result;
29+
} catch (error) {
30+
console.warn('Error when calling /sync-diagram', error);
31+
throw Error('Error when calling /sync-diagram');
32+
}
3433
}
3534

3635
function getShareLink(syncResult) {
37-
return `${syncResult.page_share}?v=${syncResult.md5}`;
36+
return `${syncResult.page_share}?v=${syncResult.md5}`;
3837
}
3938

40-
export { syncDiagram, getShareLink };
39+
export { syncDiagram, getShareLink };

‎src/style.css‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2095,14 +2095,18 @@ ol.editor-nav li {
20952095
flex-direction: row;
20962096
flex-wrap: nowrap;
20972097
white-space: nowrap;
2098-
padding: 8px;
2099-
gap: 12px;
2098+
padding: 8px 12px;
2099+
gap: 8px;
21002100
}
21012101

2102-
.share-panel .tooltip .material-symbols-outlined {
2102+
.share-panel .tooltip .material-symbols-outlined.success {
21032103
color: #41b276;
21042104
}
21052105

2106+
.share-panel .tooltip .material-symbols-outlined.error {
2107+
color: #df0211;
2108+
}
2109+
21062110
.share-panel .footnote {
21072111
margin-top: 8px;
21082112
color: #acacac;

0 commit comments

Comments
 (0)