Sync diagram on sharing if it's not

ZenUml · Nov 5, 2023 · b556542 · b556542
1 parent a9dfadb
commit b556542
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 27 deletions.
diff --git a/src/components/ContentWrap.jsx b/src/components/ContentWrap.jsx
@@ -1008,7 +1008,7 @@ export default class ContentWrap extends Component {
 										</Button>
 									}
 									content={
-										<SharePanel id={0} dsl={''} image={''} shareLink={this.props.currentItem.shareLink} />
+										<SharePanel id={0} dsl={''} image={''} currentItem={this.props.currentItem} />
 									}
 								/>
 								<Button

diff --git a/src/components/SharePanel.jsx b/src/components/SharePanel.jsx
@@ -2,7 +2,7 @@
 import { Component } from 'preact';
 import PropTypes from 'prop-types';
 import { PreviewCard } from './PreviewCard';
-
+import { syncDiagram, getShareLink } from '../services/syncService';
 
 export class SharePanel extends Component {
 	constructor(props) {
@@ -13,19 +13,20 @@ export class SharePanel extends Component {
 		}
 	}
 
-	componentDidMount() {
-		this.setState({
-			isLoading: false,
-			link: this.props.shareLink || 'https://sequencediagram.zenuml.com/preview/1234',
-		});
-
-		// TODO: API call to get the link if props.shareLink is not present
-		// setTimeout(() => {
-		// 	this.setState({
-		// 		isLoading: false,
-		// 		link: props.shareLink || 'https://sequencediagram.zenuml.com/preview/1234',
-		// 	})
-		// }, 3000);
+	async componentDidMount() {
+		if(this.props.currentItem.shareLink) {
+			this.setState({
+				isLoading: false,
+				link: this.props.shareLink,
+			});
+		}
+		else {
+			const result = await syncDiagram(this.props.currentItem);
+			this.setState({
+				isLoading: false,
+				link: getShareLink(result),
+			});
+		}
 	}
 
 	handleCopyLink = () => {
@@ -79,5 +80,5 @@ SharePanel.propTypes = {
 	dsl: PropTypes.string,
 	email: PropTypes.string,
 	image: PropTypes.string,
-	shareLink: PropTypes.string,
+	currentItem: PropTypes.object,
 };
diff --git a/src/components/app.jsx b/src/components/app.jsx
@@ -46,6 +46,7 @@ import { Icons } from './Icons';
 import JSZip from 'jszip';
 import { loadSubscriptionToApp } from '../javascript/firebase/subscription';
 import { currentBrowserTab } from '../services/browserService';
+import { syncDiagram, getShareLink } from '../services/syncService';
 
 if (module.hot) {
 	require('preact/debug');
@@ -765,19 +766,11 @@ BookLibService.Borrow(id) {
 
 		console.log('on saving, ', this.state.currentItem)
 
-		const token = await firebase.auth().currentUser.getIdToken(true);
-
 		try {
-			const data = {token, id: this.state.currentItem.id, name: this.state.currentItem.title, content: this.state.currentItem.js, description: JSON.stringify({source: 'app.zenuml.com'}), imageBase64: this.state.currentItem.imageBase64};
-			console.log('calling /sync-diagram with data:', data)
-
-			const result = await (await fetch('/sync-diagram', {method: 'POST', body: JSON.stringify(data), headers: {'Content-Type': 'application/json'}})).json()
-			console.log('save to php app result: ', result)
-
-			this.state.currentItem.shareLink = `${result.page_share}?v=${result.md5}`;
-
+			const result = await syncDiagram(this.state.currentItem);
+			this.state.currentItem.shareLink = getShareLink(result);
 		} catch(e) {
-			console.error(e)
+			console.error(e);
 		}
 
 		return itemService

diff --git a/src/services/syncService.js b/src/services/syncService.js
@@ -0,0 +1,19 @@
+import firebase from 'firebase/app';
+
+async function syncDiagram(currentItem) {
+  const token = await firebase.auth().currentUser.getIdToken(true);
+
+  const data = { token, id: currentItem.id, name: currentItem.title, content: currentItem.js, description: JSON.stringify({ source: 'app.zenuml.com' }), imageBase64: currentItem.imageBase64 };
+  console.log('calling /sync-diagram with data:', data)
+
+  const result = await (await fetch('/sync-diagram', { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' } })).json()
+  console.log('save to php app result: ', result)
+
+  return result;
+}
+
+function getShareLink(syncResult) {
+  return `${syncResult.page_share}?v=${syncResult.md5}`;
+}
+
+export { syncDiagram, getShareLink };