File new behavior

plugins/editor/key-extension.js

@@ -4,6 +4,7 @@ var { findNext, findPrevious } = require('../../src/actions/find');
 var { moveByScrollUpLine, moveByScrollDownLine } = require('../../src/actions/editor-move');
 var { indent } = require('../../src/actions/text-move');
 var { print } = require('../../src/actions/system');
+var { hideOverlay, newFile, processSave } = require('../../src/actions/file');
 
 const keyExtension = {
   setup: function(app) {
@@ -50,13 +51,41 @@ const keyExtension = {
           evt.preventDefault();
           print();
         }
+      },
+      newFile: {
+        code: 'CTRL_N',
+        exec: (evt) => {
+          evt.preventDefault();
+          newFile();
+        }
+      },
+      save: {
+        code: 'CTRL_S',
+        exec: (evt) => {
+          evt.preventDefault();
+          processSave();
+        }
+      },
+      hideOverlay: {
+        code: 'ESC',
+        exec: (evt) => {
+          evt.preventDefault();
+          hideOverlay();
+        }
       }
     };
 
+    const customPredicates = {
+      CTRL_N: function({ ctrlKey, metaKey, keyCode }){
+          return ((ctrlKey === true || metaKey === true) && keyCode === 78);
+        }
+    };
+
     function setCodeMirrorCommands() {
       for (let cmd in cmCommands) {
         const code = cmCommands[cmd].code;
-        cmCommands[cmd].removeCode = app.keypress(app.keypress[code], cmCommands[cmd].exec);
+        const predicate = app.keypress[code] || customPredicates[code];
+        cmCommands[cmd].removeCode = app.keypress(predicate, cmCommands[cmd].exec);
       }
     }
 

plugins/sidebar/file-operations.js

@@ -9,7 +9,7 @@ const NewFileOverlay = require('./overlays/new-file');
 const DownloadOverlay = require('./overlays/download');
 const DeleteConfirmOverlay = require('./overlays/delete-confirm');
 const { reloadDevices } = require('../../src/actions/device.js');
-const { clearName } = require('../../src/actions/file');
+const { clearName, deleteFile, newFile, processSave, hideOverlay } = require('../../src/actions/file');
 
 const styles = require('./styles');
 
@@ -26,52 +26,6 @@ const FileOperations = React.createClass({
 
     toast.show(msg, { style: styles.successToast, timeout: 5000 });
   },
-  saveFile: function(evt){
-    if(evt){
-      evt.preventDefault();
-    }
-
-    const space = this.props.workspace;
-
-    const name = space.filename.deref();
-
-    // TODO: these should transparently accept cursors for all non-function params
-    space.saveFile(name, space.current)
-      .tap(() => this.handleSuccess(`'${name}' saved successfully`))
-      .catch(this.handleError);
-  },
-  createFile: function(name){
-    const { workspace, overlay, loadFile } = this.props;
-
-    if(!name){
-      return;
-    }
-
-    workspace.filename.update(() => name);
-    workspace.current.update(() => '');
-    // 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`)))
-      .catch(this.handleError)
-      .finally(overlay.hide);
-  },
-  deleteFile: function(name){
-    const space = this.props.workspace;
-    const overlay = this.props.overlay;
-
-    if(!name){
-      return;
-    }
-
-    space.deleteFile(space.filename)
-      .tap(() => this.handleSuccess(`'${name}' deleted successfully`))
-      .catch(this.handleError)
-      .finally(overlay.hide);
-  },
-  escapeDialog: function() {
-    this.hideOverlay();
-    clearName();
-  },
   renderOverlay: function(component){
     const overlay = this.props.overlay;
 
@@ -81,21 +35,6 @@ const FileOperations = React.createClass({
 
     overlay.render(renderer, { backdrop: true });
   },
-  hideOverlay: function(){
-    const overlay = this.props.overlay;
-    overlay.hide();
-  },
-  showCreateOverlay: function(evt){
-    evt.preventDefault();
-
-    const component = (
-      <NewFileOverlay
-        onAccept={this.createFile}
-        onCancel={this.hideOverlay} />
-    );
-
-    this.renderOverlay(component);
-  },
   showDeleteOverlay: function(evt){
     evt.preventDefault();
 
@@ -110,8 +49,8 @@ const FileOperations = React.createClass({
     const component = (
       <DeleteConfirmOverlay
         name={name}
-        onAccept={this.deleteFile}
-        onCancel={this.hideOverlay} />
+        onAccept={deleteFile}
+        onCancel={hideOverlay} />
     );
 
     this.renderOverlay(component);
@@ -123,26 +62,14 @@ const FileOperations = React.createClass({
 
     const component = (
       <DownloadOverlay
-        onCancel={this.hideOverlay}
+        onCancel={hideOverlay}
         irken={this.props.irken}
         handleSuccess={this.handleSuccess}
         handleError={this.handleError} />
     );
 
     this.renderOverlay(component);
   },
-  componentDidMount: function(){
-    this.keySaveFile = app.keypress(app.keypress.CTRL_S, this.saveFile);
-    this.keyCloseDialog = app.keypress(app.keypress.ESC, this.escapeDialog);
-  },
-  componentWillUnmount: function(){
-    if(this.keySaveFile) {
-     this.keySaveFile();
-    }
-    if(this.keyCloseDialog) {
-     this.keyCloseDialog();
-    }
-  },
   render: function(){
     return (
       <Menu effect="zoomin" method="click" position="bl">
@@ -158,11 +85,11 @@ const FileOperations = React.createClass({
           icon="ion-backspace-outline"
           label="Delete File" />
         <ChildButton
-          onClick={this.saveFile}
+          onClick={processSave}
           icon="ion-compose"
           label="Save File" />
         <ChildButton
-          onClick={this.showCreateOverlay}
+          onClick={newFile}
           icon="ion-document"
           label="New File" />
       </Menu>

plugins/sidebar/index.js

@@ -9,9 +9,13 @@ const File = require('./file');
 const FileOperations = require('./file-operations');
 const ProjectOperations = require('./project-operations');
 
+const NewFileOverlay = require('./overlays/new-file');
+
 const deviceStore = require('../../src/stores/device');
 const editorStore = require('../../src/stores/editor');
+const fileStore = require('../../src/stores/file');
 
+const { processCreate, processNoCreate, processSave, newFile, loadFile } = require('../../src/actions/file');
 function noop(){}
 
 function sidebar(app, opts, done){
@@ -24,14 +28,6 @@ function sidebar(app, opts, done){
   const getBoard = app.getBoard.bind(irken);
   const scanBoards = app.scanBoards.bind(irken);
 
-  deviceStore.workspace = space;
-  deviceStore.toast = toast;
-  deviceStore.overlay = overlay;
-  deviceStore.getBoard = getBoard;
-  deviceStore.scanBoards = scanBoards;
-
-  editorStore.workspace = space;
-
   function refreshDirectory(){
     // TODO: expose a method to refresh directory without changing it
     space.changeDir(space.cwd.deref());
@@ -45,23 +41,6 @@ function sidebar(app, opts, done){
   });
   chrome.syncFileSystem.onServiceStatusChanged.addListener(refreshDirectory);
 
-  function loadFile(filename, cb = noop){
-    if(filename){
-      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;
@@ -80,10 +59,61 @@ function sidebar(app, opts, done){
     React.render(Component, el, cb);
   });
 
+  // Internal Helpers
+
+  function _onChangeFileStore() {
+    const { showSaveOverlay } = fileStore.getState();
+    if (showSaveOverlay) {
+      _showCreateOverlay();
+    } else {
+      overlay.hide();
+    }
+  }
+
+  function _renderOverlay(component){
+    function renderer(el){
+      React.render(component, el);
+    }
+
+    overlay.render(renderer, { backdrop: true });
+  }
+
+  function _showCreateOverlay(){
+    const component = (
+      <NewFileOverlay
+        onAccept={processCreate}
+        onCancel={processNoCreate} />
+    );
+
+    _renderOverlay(component);
+  }
+
+  // Store bindings
+  deviceStore.workspace = space;
+  deviceStore.toast = toast;
+  deviceStore.overlay = overlay;
+  deviceStore.getBoard = getBoard;
+  deviceStore.scanBoards = scanBoards;
+
+  editorStore.workspace = space;
+
+  fileStore.workspace = space;
+  fileStore.userConfig = userConfig;
+
+  fileStore.toast = toast;
+
+  // Set up listeners
+  fileStore.listen(_onChangeFileStore);
+
+  // Finish Loading Plugin
   const cwd = userConfig.get('cwd') || opts.defaultProject;
   const lastFile = userConfig.get('last-file');
+  console.log(lastFile);
+  space.changeDir(cwd, () => {
+    loadFile(lastFile);
+    done();
+  });
 
-  space.changeDir(cwd, () => loadFile(lastFile, done));
 }
 
 module.exports = sidebar;

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

@@ -7,9 +7,38 @@ class FileActions {
     this.dispatch();
   }
 
+  deleteFile(name) {
+    this.dispatch(name);
+  }
+
+  hideOverlay() {
+    this.dispatch();
+  }
+
+  newFile() {
+    this.dispatch();
+  }
+
+  loadFile(filename){
+    this.dispatch(filename);
+  }
+
+  processCreate(name) {
+    this.dispatch(name);
+  }
+
+  processNoCreate(status){
+    this.dispatch(status);
+  }
+
+  processSave() {
+    this.dispatch();
+  }
+
   updateName(value) {
     this.dispatch(value);
   }
+
 }
 
 module.exports = alt.createActions(FileActions);