From bc83555cab6c447d58a79628de6bc8a2a14c1f54 Mon Sep 17 00:00:00 2001 From: Ruben van de Ven Date: Fri, 9 Oct 2020 17:21:16 +0200 Subject: [PATCH] fix crash on save-and-play when not logged in --- .../modules/IDE/components/PreviewFrame.jsx | 108 +++++++++--------- 1 file changed, 57 insertions(+), 51 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 75f5e54b..a5336423 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -59,6 +59,7 @@ class PreviewFrame extends React.Component { } componentDidUpdate(prevProps) { + // console.log(this.props, prevProps); if (shouldRenderSketch(this.props, prevProps)) this.renderSketch(); // small bug - if autorefresh is on, and the usr changes files // in the sketch, preview will reload @@ -330,12 +331,12 @@ class PreviewFrame extends React.Component { renderSketch() { const doc = this.iframeElement; // const localFiles = this.injectLocalFiles(); - console.log('renderSketch()', this.props); + // console.trace('renderSketch()', this.props); const changedFiles = this.props.files.filter(file => file.changed); const filesRequiringReload = changedFiles.filter(file => !file.content.startsWith('// liveUpdate')); const filesToHotSwap = changedFiles.filter(file => filesRequiringReload.indexOf(file) === -1); - console.log('changed and requiring reload:', changedFiles, filesRequiringReload, filesToHotSwap); + // console.log('changed and requiring reload:', changedFiles, filesRequiringReload, filesToHotSwap); let saving; if (changedFiles.length > 0) { @@ -345,62 +346,67 @@ class PreviewFrame extends React.Component { saving = new Promise((resolve, err) => resolve()); } - saving.catch(() => { - console.log('Error saving... not authenticated?'); - window.location.href = '/login'; - }); + if (saving === null) { + // console.log('Error saving... not authenticated?'); + this.props.stopSketch(); // prevent crazy loop of renderSketch() through componentDidUpdate() + } else { + saving.catch(() => { + // console.log('Error when saving... not authenticated? Redirect!'); + this.props.stopSketch(); // prevent crazy loop of renderSketch() through componentDidUpdate() + }); - saving.then(() => { - if (this.props.isPlaying) { - this.props.clearConsole(); - doc.removeAttribute('srcdoc'); - const source = `${window.location.origin}/${this.props.project.owner.username}/sketches/${this.props.project.id}/index.html`; - // console.log('FILES', this.props.files, doc.src, source, lastUpdate); - if (doc.src === source) { - // const newFiles = this.props.files.filter(file => new Date(file.updatedAt) > lastUpdate); - if (this.props.unsavedChanges) { - // console.log('unsaved changes'); - } + saving.then(() => { + if (this.props.isPlaying) { + this.props.clearConsole(); + doc.removeAttribute('srcdoc'); + const source = `${window.location.origin}/${this.props.project.owner.username}/sketches/${this.props.project.id}/index.html`; + // console.log('FILES', this.props.files, doc.src, source, lastUpdate); + if (doc.src === source) { + // const newFiles = this.props.files.filter(file => new Date(file.updatedAt) > lastUpdate); + if (this.props.unsavedChanges) { + // console.log('unsaved changes'); + } - console.log('doc', doc); - // we need a hard reload - if (filesRequiringReload.length > 0) { - doc.src = source; // for now... + // console.log('doc', doc); + // we need a hard reload + if (filesRequiringReload.length > 0) { + doc.src = source; // for now... + } else { + // if (doc.contentWindow.document.querySelector('script[src="/assets/hotswap.js"]') == null) { + // const headEl = doc.contentWindow.document.querySelector('head'); + // const srcEl = doc.contentWindow.document.createElement('script'); + // srcEl.src = '/assets/hotswap.js'; + // headEl.appendChild(srcEl); + // } + + console.log('Hot swap (..append):', filesToHotSwap); + const headEl = doc.contentWindow.document.querySelector('head'); + const updatevar = Date.now(); + filesToHotSwap.forEach((file) => { + // doc.contentWindow.postMessage({ 'action': 'code', 'contents': file.content }, '*'); + const srcEl = doc.contentWindow.document.createElement('script'); + srcEl.src = `${file.name}?changed=${updatevar}`; + srcEl.onload = 'setupAssets();'; // (re)load assets + headEl.appendChild(srcEl); + }); + } + // if ( this.props.htmlFile.content === doc.contentWindow) + // TODO: don't set, but update only (will be hard... :-P) } else { - // if (doc.contentWindow.document.querySelector('script[src="/assets/hotswap.js"]') == null) { - // const headEl = doc.contentWindow.document.querySelector('head'); - // const srcEl = doc.contentWindow.document.createElement('script'); - // srcEl.src = '/assets/hotswap.js'; - // headEl.appendChild(srcEl); - // } - - console.log('Hot swap (..append):', filesToHotSwap); - const headEl = doc.contentWindow.document.querySelector('head'); - const updatevar = Date.now(); - filesToHotSwap.forEach((file) => { - // doc.contentWindow.postMessage({ 'action': 'code', 'contents': file.content }, '*'); - const srcEl = doc.contentWindow.document.createElement('script'); - srcEl.src = `${file.name}?changed=${updatevar}`; - srcEl.onload = 'setupAssets();'; // (re)load assets - headEl.appendChild(srcEl); - }); + doc.src = source; + } + // lastUpdate = new Date(); + if (this.props.endSketchRefresh) { + this.props.endSketchRefresh(); } - // if ( this.props.htmlFile.content === doc.contentWindow) - // TODO: don't set, but update only (will be hard... :-P) } else { - doc.src = source; + doc.removeAttribute('src'); + doc.srcdoc = ''; + srcDoc.set(doc, ' '); } - // lastUpdate = new Date(); - if (this.props.endSketchRefresh) { - this.props.endSketchRefresh(); - } - } else { - doc.removeAttribute('src'); - doc.srcdoc = ''; - srcDoc.set(doc, ' '); - } - }); + }); + } } render() {