avoid dispatching handleSuccess/handleError actions

Author: phated

plugins/editor/index.js

@@ -9,19 +9,23 @@ require('codemirror/addon/selection/mark-selection');
 require('codemirror/lib/codemirror.css');
 require('../../assets/theme/parallax.css');
 
+const React = require('react');
 const CodeMirror = require('codemirror');
 require('./pbasic')(CodeMirror);
 
 const keyExtension = require('./key-extension');
+
 const consoleStore = require('../../src/stores/console');
 const editorStore = require('../../src/stores/editor');
 const fileStore = require('../../src/stores/file');
+
 const { handleInput } = require('../../src/actions/editor');
 const DocumentsStore = require('../../src/stores/documents');
 
-const React = require('react');
 const TransmissionBar = require('./transmission-bar');
 
+const makeToasts = require('../../src/lib/toasts');
+
 function editor(app, opts, done){
 
   var codeEditor;
@@ -37,9 +41,30 @@ function editor(app, opts, done){
     }
   }
 
+  function highlighter(position, length) {
+    if(!codeEditor){
+      return;
+    }
+
+    const doc = codeEditor.getDoc();
+
+    const anchor = doc.posFromIndex(position);
+    const head = doc.posFromIndex(position + length);
+
+    doc.setSelection(anchor, head);
+  }
+
   consoleStore.listen(refreshConsole);
 
-  var space = app.workspace;
+  const space = app.workspace;
+  const compile = app.compile.bind(app);
+  // seems strange to pass highlighter to toasts
+  // maybe this should be named "handlers" or something
+  const toasts = makeToasts(app.toast, highlighter);
+
+  editorStore.toasts = toasts;
+  editorStore.compile = compile;
+  editorStore.workspace = space;
 
   app.view('editor', function(el, cb){
     console.log('editor render');

plugins/overlays/index.js

@@ -11,7 +11,7 @@ const overlayStore = require('../../src/stores/overlay');
 const projectStore = require('../../src/stores/project');
 
 const { confirmDelete, changeProject, deleteProject } = require('../../src/actions/project');
-const { handleError, handleSuccess, deleteFile, saveFileAs } = require('../../src/actions/file');
+const { deleteFile, saveFileAs } = require('../../src/actions/file');
 const { hideSave, hideDelete, hideDownload, showProjects, hideProjects } = require('../../src/actions/overlay');
 
 function overlays(app, opts, done){
@@ -61,10 +61,7 @@ function overlays(app, opts, done){
     if(showDownloadOverlay){
       component = (
         <DownloadOverlay
-          onCancel={hideDownload}
-          handleSuccess={handleSuccess}
-          handleError={handleError}
-          handleComplete={hideDownload} />
+          onCancel={hideDownload} />
       );
     }
 

plugins/sidebar/index.js

@@ -10,21 +10,20 @@ const FileOperations = require('./file-operations');
 const ProjectOperations = require('./project-operations');
 
 const deviceStore = require('../../src/stores/device');
-const editorStore = require('../../src/stores/editor');
 const fileStore = require('../../src/stores/file');
 
 const { loadFile } = require('../../src/actions/file');
 
+const makeToasts = require('../../src/lib/toasts');
+
 function sidebar(app, opts, done){
 
   const space = app.workspace;
-  const toast = app.toast;
-  const overlay = app.overlay;
   const userConfig = app.userConfig;
-  const irken = app;
-  const compile = app.compile.bind(irken);
-  const getBoard = app.getBoard.bind(irken);
-  const scanBoards = app.scanBoards.bind(irken);
+  const getBoard = app.getBoard.bind(app);
+  const scanBoards = app.scanBoards.bind(app);
+
+  const toasts = makeToasts(app.toast);
 
   function refreshDirectory(){
     // TODO: expose a method to refresh directory without changing it
@@ -59,18 +58,13 @@ function sidebar(app, opts, done){
 
   // Store bindings
   deviceStore.workspace = space;
-  deviceStore.toast = toast;
-  deviceStore.overlay = overlay;
+  deviceStore.toasts = toasts;
   deviceStore.getBoard = getBoard;
   deviceStore.scanBoards = scanBoards;
 
-  editorStore.toast = toast;
-  editorStore.compile = compile;
-  editorStore.workspace = space;
-
   fileStore.workspace = space;
   fileStore.userConfig = userConfig;
-  fileStore.toast = toast;
+  fileStore.toasts = toasts;
 
   done();
 }

src/actions/file.js

@@ -30,14 +30,6 @@ class FileActions {
   saveFileAs(name) {
     this.dispatch(name);
   }
-
-  handleError(err) {
-    this.dispatch(err);
-  }
-
-  handleSuccess(msg) {
-    this.dispatch(msg);
-  }
 }
 
 module.exports = alt.createActions(FileActions);

src/lib/toasts.js

@@ -0,0 +1,47 @@
+'use strict';
+
+const red = '#da2100';
+const green = '#159600';
+
+const styles = {
+  errorToast: {
+    backgroundColor: red
+  },
+  successToast: {
+    backgroundColor: green
+  }
+};
+
+function toasts(api, highlighter){
+
+  function success(msg){
+    api.show(msg, { style: styles.successToast, timeout: 5000 });
+  }
+
+  function error(err){
+    // leaving this in for better debugging of errors
+    console.log(err);
+
+    api.show(err.message, { style: styles.errorToast });
+
+    if(typeof highlighter !== 'function'){
+      return;
+    }
+
+    if(err && err.errorLength){
+      highlighter(err.errorPosition, err.errorLength);
+    }
+  }
+
+  function clear(){
+    api.clear();
+  }
+
+  return {
+    success,
+    error,
+    clear
+  };
+}
+
+module.exports = toasts;

src/stores/device.js

@@ -1,13 +1,13 @@
 'use strict';
 
-const alt = require('../alt');
 const _ = require('lodash');
 
+const alt = require('../alt');
+
 const { rx, tx } = require('../actions/transmission');
 const { hideDownload, showDownload } = require('../actions/overlay');
 const { clearOutput, output } = require('../actions/console');
 const { enableAuto, disableAuto, reloadDevices, updateSelected } = require('../actions/device');
-const { handleSuccess, handleError } = require('../actions/file');
 
 class DeviceStore {
   constructor() {
@@ -134,7 +134,7 @@ class DeviceStore {
       this.setState({ progress: progress });
     }
 
-    const { workspace, toast, getBoard } = this.getInstance();
+    const { workspace, getBoard } = this.getInstance();
     const { selectedDevice } = this.state;
 
     const name = workspace.filename.deref();
@@ -155,16 +155,34 @@ class DeviceStore {
       .tap(() => clearOutput())
       .then(() => board.on('terminal', output))
       .then(() => board.on('terminal', rx))
-      .tap(() => toast.clear())
-      .tap(() => handleSuccess(`'${name}' downloaded successfully`))
-      .catch(handleError)
+      .tap(() => this._handleClear())
+      .tap(() => this._handleSuccess(`'${name}' downloaded successfully`))
+      .catch((err) => this._handleError(err))
       .finally(() => {
         board.removeListener('progress', updateProgress);
         this.setState({ progress: 0 });
         hideDownload();
       });
   }
 
+  _handleClear(){
+    const { toasts } = this.getInstance();
+
+    toasts.clear();
+  }
+
+  _handleError(err){
+    const { toasts } = this.getInstance();
+
+    toasts.error(err);
+  }
+
+  _handleSuccess(msg){
+    const { toasts } = this.getInstance();
+
+    toasts.success(msg);
+  }
+
 }
 
 DeviceStore.config = {

src/stores/editor.js

@@ -1,11 +1,9 @@
 'use strict';
 
 const alt = require('../alt');
-const styles = require('../../plugins/sidebar/styles');
 
 const { findNext, findPrevious, replace } = require('../actions/find');
-const { handleError, handleSuccess } = require('../actions/file');
-const { handleInput, highlight, syntaxCheck } = require('../actions/editor');
+const { handleInput, syntaxCheck } = require('../actions/editor');
 const { moveByScrollUpLine, moveByScrollDownLine } = require('../actions/editor-move');
 const { dedent, indent } = require('../actions/text-move');
 const { print } = require('../actions/system');
@@ -19,7 +17,6 @@ class EditorStore {
       onFindPrevious: findPrevious,
       onHandleInput: handleInput,
       onIndent: indent,
-      onHighlight: highlight,
       onMoveByScrollUpLine: moveByScrollUpLine,
       onMoveByScrollDownLine: moveByScrollDownLine,
       onPrint: print,
@@ -88,39 +85,29 @@ class EditorStore {
       source: workspace.current.deref()
     });
     if(result.error){
-      this.handleError(result.error);
-    }else{
-      this.handleSuccess('Tokenization successful!');
+      this._handleError(result.error);
+    } else {
+      this._handleClear();
+      this._handleSuccess('Tokenization successful!');
     }
   }
-  onHighlight(opts) {
-    const { cm } = this.getInstance();
-    const doc = cm.getDoc();
 
-    const anchor = doc.posFromIndex(opts.position);
-    const head = doc.posFromIndex(opts.position + opts.length);
+  _handleClear(){
+    const { toasts } = this.getInstance();
 
-    doc.setSelection(anchor, head);
+    toasts.clear();
   }
 
+  _handleError(err){
+    const { toasts } = this.getInstance();
 
-  //duplicated from file store due to dispatch->dispatch invariant
-  handleError(err){
-    // leaving this in for better debugging of errors
-    console.log(err);
-    const { toast } = this.getInstance();
-
-    toast.show(err.message, { style: styles.errorToast });
-    if(err && err.errorLength){
-      this.onHighlight({ position: err.errorPosition, length: err.errorLength });
-    }
+    toasts.error(err);
   }
 
-  //duplicated from file store due to dispatch->dispatch invariant
-  handleSuccess(msg){
-    const { toast } = this.getInstance();
+  _handleSuccess(msg){
+    const { toasts } = this.getInstance();
 
-    toast.show(msg, { style: styles.successToast, timeout: 5000 });
+    toasts.success(msg);
   }
 }