Merge pull request #61 from parallaxinc/toasts

Toasts

Author: monteslu

package.json

@@ -17,7 +17,7 @@
     "react-mfb-iceddev": "^0.1.0",
     "react-select": "^0.4.0",
     "react-style": "^0.4.0",
-    "skrim": "0.0.2",
+    "skrim": "0.0.3",
     "snacks": "^0.2.0",
     "when": "^3.7.2"
   },

plugins/sidebar/file-operations.js

@@ -10,16 +10,30 @@ const NewFileOverlay = require('./overlays/new-file');
 const DownloadOverlay = require('./overlays/download');
 const DeleteConfirmOverlay = require('./overlays/delete-confirm');
 
+const styles = require('./styles');
+
 const FileOperations = React.createClass({
+  handleError: function(err){
+    const toast = this.props.toast;
+
+    toast.show(err.message, { style: styles.errorToast });
+  },
+  handleSuccess: function(msg){
+    const toast = this.props.toast;
+
+    toast.show(msg, { style: styles.successToast, timeout: 5000 });
+  },
   saveFile: function(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(space.filename.deref(), space.current, function(err){
-      console.log('saved', err);
-    });
+    space.saveFile(name, space.current)
+      .tap(() => this.handleSuccess(`'${name}' saved successfully`))
+      .catch(this.handleError);
   },
   createFile: function(name){
     const space = this.props.workspace;
@@ -32,7 +46,10 @@ const FileOperations = React.createClass({
     space.filename.update(() => name);
     space.current.update(() => '');
     // TODO: these should transparently accept cursors for all non-function params
-    space.saveFile(space.filename.deref(), space.current, overlay.hide);
+    space.saveFile(space.filename.deref(), space.current)
+      .tap(() => this.handleSuccess(`'${name}' created successfully`))
+      .catch(this.handleError)
+      .finally(overlay.hide);
   },
   deleteFile: function(name){
     const space = this.props.workspace;
@@ -42,12 +59,17 @@ const FileOperations = React.createClass({
       return;
     }
 
-    space.deleteFile(space.filename, overlay.hide);
+    space.deleteFile(space.filename)
+      .tap(() => this.handleSuccess(`'${name}' deleted successfully`))
+      .catch(this.handleError)
+      .finally(overlay.hide);
   },
   download: function(devicePath){
+    const toast = this.props.toast;
     const space = this.props.workspace;
     const overlay = this.props.overlay;
     const programmer = this.props.programmer;
+    const name = space.filename.deref();
 
     if(!devicePath){
       return;
@@ -65,13 +87,10 @@ const FileOperations = React.createClass({
 
       return programmer.bootload(options);
     })
-    .tap(function(){
-      console.log('Success!');
-      overlay.hide();
-    })
-    .catch(function(err){
-      console.log('Failed: ', err);
-    });
+    .tap(() => toast.clear())
+    .tap(() => this.handleSuccess(`'${name}' downloaded successfully`))
+    .catch(this.handleError)
+    .finally(overlay.hide);
   },
   renderOverlay: function(component){
     const overlay = this.props.overlay;
@@ -102,9 +121,15 @@ const FileOperations = React.createClass({
 
     const space = this.props.workspace;
 
+    const name = space.filename.deref();
+
+    if(!name){
+      return;
+    }
+
     const component = (
       <DeleteConfirmOverlay
-        name={space.filename.deref()}
+        name={name}
         onAccept={this.deleteFile}
         onCancel={this.hideOverlay} />
     );

plugins/sidebar/index.js

@@ -12,6 +12,7 @@ const ProjectOperations = require('./project-operations');
 function sidebar(app, opts, done){
 
   const space = app.workspace;
+  const toast = app.toast;
   const overlay = app.overlay;
   const userConfig = app.userConfig;
   const programmer = app.bs2serial;
@@ -27,7 +28,7 @@ function sidebar(app, opts, done){
           <ListItem icon="folder" disableRipple>{space.cwd.deref()}</ListItem>
           {directory.map((file) => <File key={file.get('name')} workspace={space} filename={file.get('name')} temp={file.get('temp')} />)}
         </FileList>
-        <FileOperations workspace={space} overlay={overlay} programmer={programmer} />
+        <FileOperations workspace={space} overlay={overlay} toast={toast} programmer={programmer} />
       </Sidebar>
     );
 

plugins/sidebar/styles.js

@@ -2,6 +2,9 @@
 
 const StyleSheet = require('react-style');
 
+const red = '#da2100';
+const green = '#159600';
+
 const styles = {
   card: StyleSheet.create({
     margin: 0,
@@ -63,15 +66,21 @@ const styles = {
     marginTop: 10
   }),
   fileTempIndicator: {
-    backgroundColor: '#159600',
+    backgroundColor: green,
     height: 10,
     width: 10,
     borderRadius: '100%',
     marginRight: 5,
     display: 'inline-block'
   },
   fileHasTemp: {
-    backgroundColor: '#da2100'
+    backgroundColor: red
+  },
+  errorToast: {
+    backgroundColor: red
+  },
+  successToast: {
+    backgroundColor: green
   }
 };