lots of behavior fixes and cleanup

Author: phated

plugins/sidebar/index.js

@@ -15,7 +15,7 @@ const deviceStore = require('../../src/stores/device');
 const editorStore = require('../../src/stores/editor');
 const fileStore = require('../../src/stores/file');
 
-const { processCreate, processSave, newFile } = require('../../src/actions/file');
+const { processCreate, processNoCreate, processSave, newFile, loadFile } = require('../../src/actions/file');
 function noop(){}
 
 function sidebar(app, opts, done){
@@ -41,30 +41,6 @@ function sidebar(app, opts, done){
   });
   chrome.syncFileSystem.onServiceStatusChanged.addListener(refreshDirectory);
 
-  // TODO: move to file store
-  function loadFile(filename, cb = noop){
-    const previousFile = space.filename.deref();
-    let unsaved = false;
-    if(previousFile) {
-      unsaved = _checkUnsaved(previousFile);
-    }
-
-    if(filename && !unsaved){
-      space.loadFile(filename, (err) => {
-        if(err){
-          cb(err);
-          return;
-        }
-
-        userConfig.set('last-file', filename);
-
-        cb();
-      });
-    } else {
-      cb();
-    }
-  }
-
   app.view('sidebar', function(el, cb){
     console.log('sidebar render');
     const directory = space.directory;
@@ -84,32 +60,16 @@ function sidebar(app, opts, done){
   });
 
   // Internal Helpers
-  function _checkUnsaved(file) {
-    const unnamed = space.directory.every(function(x) {
-      if(x.get('name') === file) {
-        return false;
-      }
-      else {
-        return true;
-      }
-    });
-    if(unnamed) {
-      processSave();
-      return true;
-    }
-  }
 
   function _onChangeFileStore() {
     const { showSaveOverlay } = fileStore.getState();
     if (showSaveOverlay) {
       _showCreateOverlay();
+    } else {
+      overlay.hide();
     }
   }
 
-  function _hideOverlay() {
-    overlay.hide();
-  }
-
   function _renderOverlay(component){
     function renderer(el){
       React.render(component, el);
@@ -122,7 +82,7 @@ function sidebar(app, opts, done){
     const component = (
       <NewFileOverlay
         onAccept={processCreate}
-        onCancel={_hideOverlay} />
+        onCancel={processNoCreate} />
     );
 
     _renderOverlay(component);
@@ -141,8 +101,6 @@ function sidebar(app, opts, done){
   fileStore.userConfig = userConfig;
 
   fileStore.toast = toast;
-  fileStore.loadFile = loadFile;
-  fileStore.overlay = overlay;
 
   // Set up listeners
   fileStore.listen(_onChangeFileStore);
@@ -151,13 +109,10 @@ function sidebar(app, opts, done){
   const cwd = userConfig.get('cwd') || opts.defaultProject;
   const lastFile = userConfig.get('last-file');
   console.log(lastFile);
-  space.changeDir(cwd, () => loadFile(lastFile, (err) => {
-    if(err){
-      newFile();
-    }
-
+  space.changeDir(cwd, () => {
+    loadFile(lastFile);
     done();
-  }));
+  });
 
 }
 

plugins/sidebar/overlays/new-file.js

@@ -33,7 +33,7 @@ class NewFileOverlay extends React.Component {
 
     return (
       <Card styles={styles.overlay}>
-        <h3 style={styles.overlayTitle}>Please name your file.</h3>
+        <h3 style={styles.overlayTitle}>Do you want to save the changes you made to New file?</h3>
         <TextField
           value={fileName}
           ref="filename"
@@ -42,8 +42,9 @@ class NewFileOverlay extends React.Component {
           floatingLabel
           onChange={this._onUpdateName} />
         <div style={styles.overlayButtonContainer}>
-          <Button onClick={this._onAccept}>Create</Button>
-          <Button onClick={this._onCancel}>Cancel</Button>
+          <Button onClick={this._onAccept}>Save As</Button>
+          <Button onClick={() => this._onCancel({ trash: true })}>Don't Save</Button>
+          <Button onClick={() => this._onCancel({ trash: false })}>Cancel</Button>
         </div>
       </Card>
     );
@@ -54,16 +55,16 @@ class NewFileOverlay extends React.Component {
 
     clearName();
     if(typeof onAccept === 'function'){
-      onAccept(fileName, evt);
+      onAccept(fileName);
     }
   }
 
-  _onCancel(evt){
+  _onCancel(status, evt){
     const { onCancel } = this.props;
 
     clearName();
     if(typeof onCancel === 'function'){
-      onCancel(evt);
+      onCancel(status);
     }
   }
 

src/actions/file.js

@@ -19,10 +19,18 @@ class FileActions {
     this.dispatch();
   }
 
+  loadFile(filename){
+    this.dispatch(filename);
+  }
+
   processCreate(name) {
     this.dispatch(name);
   }
 
+  processNoCreate(status){
+    this.dispatch(status);
+  }
+
   processSave() {
     this.dispatch();
   }

src/stores/file.js

@@ -6,7 +6,7 @@ const alt = require('../alt');
 const styles = require('../../plugins/sidebar/styles');
 
 const { clearName, deleteFile, hideOverlay, newFile, processCreate,
-  processSave, updateName } = require('../actions/file');
+  processNoCreate, processSave, updateName, loadFile } = require('../actions/file');
 
 class FileStore {
   constructor() {
@@ -16,26 +16,37 @@ class FileStore {
       onDeleteFile: deleteFile,
       onHideOverlay: hideOverlay,
       onNewFile: newFile,
+      onLoadFile: loadFile,
+      onProcessNoCreate: processNoCreate,
       onProcessCreate: processCreate,
       onProcessSave: processSave,
       onUpdateName: updateName
     });
 
     this.state = {
       fileName: '',
+      isNewFile: false,
       showSaveOverlay: false
     };
 
+    this.loadQueue = [];
   }
 
   onClearName() {
+    const { workspace } = this.getInstance();
     this.setState({
-      fileName: ''
+      fileName: workspace.filename.deref()
+    });
+  }
+
+  onUpdateName(value) {
+    this.setState({
+      fileName: value
     });
   }
 
   onDeleteFile(name) {
-    const { overlay, workspace } = this.getInstance();
+    const { workspace } = this.getInstance();
 
     if(!name){
       return;
@@ -45,7 +56,7 @@ class FileStore {
       .tap(() => this._handleSuccess(`'${name}' deleted successfully`))
       .catch(this._handleError)
       .finally(() => {
-        overlay.hide();
+        this.setState({ showSaveOverlay: false });
         this.onNewFile();
       });
 
@@ -58,13 +69,12 @@ class FileStore {
   }
 
   onHideOverlay() {
-    const { overlay } = this.getInstance();
-    overlay.hide();
+    this.setState({ showSaveOverlay: false });
     this.onClearName();
   }
 
   onProcessCreate(name) {
-    const { loadFile, overlay, workspace } = this.getInstance();
+    const { loadFile, workspace } = this.getInstance();
 
     if(!name){
       return;
@@ -73,34 +83,36 @@ class FileStore {
     workspace.filename.update(() => name);
     // TODO: these should transparently accept cursors for all non-function params
     workspace.saveFile(workspace.filename.deref(), workspace.current)
-      .tap(() => loadFile(name, () => this._handleSuccess(`'${name}' created successfully`)))
+      .tap(() => {
+        this.setState({ isNewFile: false });
+        if(this.loadQueue.length){
+          this.onLoadFile(this.loadQueue.shift());
+        }
+      })
+      .tap(() => this._handleSuccess(`'${name}' created successfully`))
       .catch(this._handleError)
-      .finally(overlay.hide);
+      .finally(() => this.setState({ showSaveOverlay: false }));
 
     this.onHideSave();
   }
 
-  onProcessSave() {
-
-    const { workspace } = this.getInstance();
-
-    // TODO: reuse with checkUnsaved in sidebar index
-    const file = workspace.filename.deref();
-    const unnamed = workspace.directory.every(function(x) {
-      if(x.get('name') === file) {
-        return false;
-      }
-      else {
-        return true;
+  onProcessNoCreate(status){
+    if(status.trash){
+      this.setState({ isNewFile: false, showSaveOverlay: false });
+      if(this.loadQueue.length){
+        this.onLoadFile(this.loadQueue.shift());
       }
-    });
-    if(unnamed) {
-      this.setState({
-        fileName: file,
-        showSaveOverlay: true
-      });
+    } else {
+      this.setState({ showSaveOverlay: false });
     }
-    else {
+  }
+
+  onProcessSave() {
+    const { isNewFile } = this.state;
+
+    if(isNewFile) {
+      this.setState({ showSaveOverlay: true });
+    } else {
       this.setState({ showSaveOverlay: false });
       this._save();
     }
@@ -139,11 +151,41 @@ class FileStore {
     workspace.updateContent('');
 
     userConfig.set('last-file', builtName);
-  }
 
-  onUpdateName(value) {
     this.setState({
-      fileName: value
+      fileName: builtName,
+      isNewFile: true
+    });
+  }
+
+  _queueLoad(filename){
+    this.loadQueue.push(filename);
+  }
+
+  onLoadFile(filename){
+    const { workspace, userConfig } = this.getInstance();
+    const { isNewFile } = this.state;
+
+    const content = workspace.current.deref();
+
+    if(isNewFile && content.length){
+      this._queueLoad(filename);
+      this.onProcessSave();
+      return;
+    }
+
+    workspace.loadFile(filename, (err) => {
+      if(err){
+        this._handleError(err);
+        return;
+      }
+
+      userConfig.set('last-file', filename);
+
+      this.setState({
+        fileName: filename,
+        isNewFile: false
+      });
     });
   }