Fix save on pressing play with new project -- show save button first time around (as isPlaying get reset when URL is change on save)

client/modules/IDE/actions/project.js

@@ -127,6 +127,7 @@ function getSynchedProject(currentState, responseProject) {
 }
 
 export function saveProject(selectedFile = null, autosave = false, mobile = false) {
+  console.trace('saving inproject.js');
   return (dispatch, getState) => {
     const state = getState();
     if (state.project.isSaving) {

client/modules/IDE/components/PreviewFrame.jsx

@@ -59,7 +59,9 @@ class PreviewFrame extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    // console.log(this.props, prevProps);
+    if (prevProps.isPlaying === true && this.props.isPlaying === false) {
+      console.trace('update', 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
@@ -339,27 +341,34 @@ class PreviewFrame extends React.Component {
     // console.log('changed and requiring reload:', changedFiles, filesRequiringReload, filesToHotSwap);
 
     let saving;
-    if (changedFiles.length > 0) {
+    console.log('is saving...', this.props);
+    if (changedFiles.length > 0 || this.props.project.updatedAt === '') {
       saving = this.props.saveProject();
     } else {
       // can be done pretier: a promise that always resolves
       saving = new Promise((resolve, err) => resolve());
     }
 
+    console.log('saving:', saving);
+
     if (saving === null) {
-      // console.log('Error saving... not authenticated?');
+      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!');
+        console.log('Error when saving... not authenticated? Redirect!');
         this.props.stopSketch(); // prevent crazy loop of renderSketch() through componentDidUpdate()
+        // this.props.clearConsole(); // introduces bug: causes nested compnonentDidUpdate()
       });
 
       saving.then(() => {
+        console.log('play!', this.props.isPlaying);
         if (this.props.isPlaying) {
-          this.props.clearConsole();
           doc.removeAttribute('srcdoc');
 
+          if (typeof this.props.project.owner === 'undefined') {
+            console.error('no owner for project?', this.props.project);
+          } else {
             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) {
@@ -396,15 +405,17 @@ class PreviewFrame extends React.Component {
             } else {
               doc.src = source;
             }
-          // lastUpdate = new Date();
-          if (this.props.endSketchRefresh) {
-            this.props.endSketchRefresh();
           }
         } else {
           doc.removeAttribute('src');
           doc.srcdoc = '';
           srcDoc.set(doc, '  ');
         }
+
+        // prevent looping
+        if (this.props.endSketchRefresh) {
+          this.props.endSketchRefresh();
+        }
       });
     }
   }
@@ -463,7 +474,7 @@ PreviewFrame.propTypes = {
     }),
     updatedAt: PropTypes.string,
   }).isRequired,
-  clearConsole: PropTypes.func.isRequired,
+  // clearConsole: PropTypes.func,
   unsavedChanges: PropTypes.bool,
   cmController: PropTypes.shape({
     getContent: PropTypes.func
@@ -473,7 +484,7 @@ PreviewFrame.propTypes = {
 PreviewFrame.defaultProps = {
   fullView: false,
   unsavedChanges: false,
-  cmController: {}
+  cmController: {},
 };
 
 export default PreviewFrame;

client/modules/IDE/components/Toolbar.jsx

@@ -60,7 +60,9 @@ class Toolbar extends React.Component {
   render() {
     const playButtonClass = classNames({
       'toolbar__play-button': true,
-      'toolbar__play-button--selected': this.props.isPlaying
+      'toolbar__play-button--selected': this.props.isPlaying,
+      'toolbar__play-button--saved': this.props.isSaved,
+      'toolbar__play-button--unsaved': !this.props.isSaved
     });
     const stopButtonClass = classNames({
       'toolbar__stop-button': true,
@@ -176,6 +178,7 @@ class Toolbar extends React.Component {
 
 Toolbar.propTypes = {
   isPlaying: PropTypes.bool.isRequired,
+  isSaved: PropTypes.bool.isRequired,
   preferencesIsVisible: PropTypes.bool.isRequired,
   stopSketch: PropTypes.func.isRequired,
   setProjectName: PropTypes.func.isRequired,
@@ -215,6 +218,7 @@ function mapStateToProps(state) {
     infiniteLoop: state.ide.infiniteLoop,
     isPlaying: state.ide.isPlaying,
     owner: state.project.owner,
+    isSaved: state.project.updatedAt !== '',
     preferencesIsVisible: state.ide.preferencesIsVisible,
     project: state.project,
   };

client/modules/IDE/pages/IDEView.jsx

@@ -174,12 +174,13 @@ class IDEView extends React.Component {
     this.autosaveInterval = null;
   }
   saveProject() {
+    console.trace('saving!');
     // return a Promise to save or null
     if (
       isUserOwner(this.props) ||
       (this.props.user.authenticated && !this.props.project.owner)
     ) {
-      console.log('project to save:', this.props.project);
+      console.trace('project to save:', this.props.project);
       return this.props.saveProject(this.cmController.getContent());
     } else if (this.props.user.authenticated) {
       return this.props.cloneProject();

client/styles/components/_toolbar.scss

@@ -1,4 +1,16 @@
 .toolbar__play-button {
+	&--unsaved {
+		// for some reason, I cannot manage to have PreviewFrame save _and_ actuall yload the project (it stops the playback)
+		// pressing twice works. So just show a floppy the first time around :-)
+		svg {
+			display: none;
+		}
+		&::after{
+			content: '\1F4BE'; // save floppy
+		}
+		// background-color: blue !important;
+	}
+
 	@include themify() {
 		@extend %toolbar-button;
 		display: flex;