refactor on showBasicModal

- export it
- add message
- handle all the rejections
- const over let

Author: aviatesk

lib/debugger/breakpoints.js

@@ -2,7 +2,7 @@
 /** @jsx etch.dom */
 
 import {CompositeDisposable, Emitter} from 'atom'
-import { showBasicModal } from '../util/basic-modal'
+import showBasicModal from '../util/basic-modal'
 import {Etch} from '../util/etch'
 
 import etch from 'etch'
@@ -253,20 +253,25 @@ export default class BreakpointManager {
       if (bp.file !== file || bp.line !== line) return
       showBasicModal([{
         name: 'Condition',
-        value: bp.condition
+        defaultText: bp.condition,
+        message: `Enter the condition when this breakpoint applies (previous: \`${bp.condition}\`).`,
       }]).then(items => {
         const condition = items['Condition']
         this.addCondition(bp, condition)
         this.emitter.emit('update')
         activePane.activate() // Re-activate previously active pane
+      }).catch((err) => {
+        if (err) console.error(err);
+        return
       })
       found = true
     })
 
     if (!found) {
       showBasicModal([{
         name: 'Condition',
-        value: '',
+        defaultText: '',
+        message: `Enter the condition when this breakpoint applies.`,
       }]).then(items => {
         const condition = items['Condition']
         this.add({
@@ -278,6 +283,8 @@ export default class BreakpointManager {
         })
         this.emitter.emit('update')
         activePane.activate() // Re-activate previously active pane
+      }).catch((err) => {
+        if (err) console.error(err);
       })
     }
   }

lib/debugger/debugger-pane.js

@@ -3,7 +3,7 @@
 
 import etch from 'etch'
 import { toView, Toolbar, Tip, Button, Icon, makeicon, Etch, Raw } from '../util/etch'
-import { showBasicModal } from '../util/basic-modal'
+import showBasicModal from '../util/basic-modal'
 import { CompositeDisposable, TextEditor } from 'atom'
 import PaneItem from '../util/pane-item'
 import { open } from '../util/opener'
@@ -339,12 +339,13 @@ export default class DebuggerPane extends PaneItem {
   addCondition (bp) {
     showBasicModal([{
       name: "Condition",
-      value: bp.condition
+      defaultText: bp.condition,
+      message: `Enter the condition when this breakpoint applies (previous: \`${bp.condition}\`).`,
     }]).then(items => {
       const cond = items["Condition"]
       this.breakpointManager.addCondition(bp, cond)
     }).catch((err) => {
-      console.error(err);
+      if (err) console.error(err);
     })
   }
 

lib/ink.coffee

@@ -40,6 +40,7 @@ exportables =
   Opener: once(=> require('./util/opener'))
   matchHighlighter: once(=> require './util/matchHighlighter')
   ansiToHTML: once(=> require './util/ansitohtml')
+  showBasicModal: once(=> require './util/basic-modal')
 
 module.exports = Ink =
   activate: ->

lib/util/basic-modal.js

@@ -5,29 +5,29 @@ import etch from 'etch'
 import { toView, Toolbar, Button, Icon, makeicon, Etch, Raw } from './etch'
 import { TextEditor, CompositeDisposable } from 'atom'
 
-export function showBasicModal(queries) {
+export default function showBasicModal(queries) {
   return new Promise((resolve, reject) => {
-    subs = new CompositeDisposable()
+    const subs = new CompositeDisposable()
 
-    _resolve = (...args) => {
+    const _resolve = (...args) => {
       panel.destroy()
       subs.dispose()
       resolve(...args)
     }
-    _reject = (...args) => {
+    const _reject = (...args) => {
       panel.destroy()
       subs.dispose()
       reject(...args)
     }
-    let view = new BasicModalView(queries, _resolve, _reject)
+    const view = new BasicModalView(queries, _resolve, _reject)
 
     subs.add(atom.commands.add('.basic-modal .editor', {
       'basic-modal:confirm': () => view.confirm()
     }))
     subs.add(atom.commands.add('.basic-modal .editor', {
       'basic-modal:cancel': () => view.cancel()
     }))
-    let panel = atom.workspace.addModalPanel({
+    const panel = atom.workspace.addModalPanel({
       item: view,
       autoFocus: true
     })
@@ -44,24 +44,24 @@ class BasicModalView {
     this.reject = reject
     this.models = {}
     this.queries = queries
-    for (let query of this.queries) {
+    this.queries.forEach(query => {
       this.models[query.name] = new TextEditor({
         mini: true,
         placeholderText: query.placeholder || ''
       })
-      if (query.value) {
-        this.models[query.name].setText(query.value)
+      if (query.defaultText) {
+        this.models[query.name].setText(query.defaultText)
       }
-    }
+    })
 
     etch.initialize(this)
   }
 
   confirm () {
-    let ret = {}
-    for (let query of this.queries) {
+    const ret = {}
+    this.queries.forEach(query => {
       ret[query.name] = this.models[query.name].getText()
-    }
+    })
     this.resolve(ret)
   }
 
@@ -72,34 +72,35 @@ class BasicModalView {
   update () {}
 
   render () {
-    let queryViews = this.queries.map(query => {
+    const queryViews = this.queries.map(query => {
       return <div className="flex-table row">
         <div className="flex-row">
           {query.name || ''}
         </div>
         <div className="flex-row second">
           {toView(this.models[query.name].element)}
+          {query.message || ''}
         </div>
       </div>
     })
     return  <div className="basic-modal flex-table-container">
-              {queryViews}
-              <div className="confirm-cancel flex-table">
-                <div className="flex-row">
-                  <Button
-                    className="btn-success"
-                    onclick={() => this.confirm()}>
-                    Confirm
-                  </Button>
-                </div>
-                <div className="flex-row">
-                  <Button
-                    className="btn-error"
-                    onclick={() => this.cancel()}>
-                    Cancel
-                  </Button>
-                </div>
-              </div>
-            </div>
+      {queryViews}
+      <div className="confirm-cancel flex-table">
+        <div className="flex-row">
+          <Button
+            className="btn-success"
+            onclick={() => this.confirm()}>
+            Confirm
+          </Button>
+        </div>
+        <div className="flex-row">
+          <Button
+            className="btn-error"
+            onclick={() => this.cancel()}>
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </div>
   }
 }