DELETE_NOTE

Author: Rokt33r

browser/main/Detail/MarkdownNoteDetail.js

@@ -11,19 +11,17 @@ import ee from 'browser/main/lib/eventEmitter'
 
 const electron = require('electron')
 const { remote } = electron
-const Menu = remote.Menu
-const MenuItem = remote.MenuItem
+const { Menu, MenuItem, dialog } = remote
 
 class MarkdownNoteDetail extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
+      isMovingNote: false,
       note: Object.assign({
         title: '',
-        content: '',
-        isMovingNote: false,
-        isDeleting: false
+        content: ''
       }, props.note)
     }
     this.dispatchTimer = null
@@ -37,8 +35,7 @@ class MarkdownNoteDetail extends React.Component {
     if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
       if (this.saveQueue != null) this.saveNow()
       this.setState({
-        note: Object.assign({}, nextProps.note),
-        isDeleting: false
+        note: Object.assign({}, nextProps.note)
       }, () => {
         this.refs.content.reload()
         this.refs.tags.reset()
@@ -188,34 +185,28 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleDeleteMenuClick (e) {
-    this.setState({
-      isDeleting: true
-    }, () => {
-      this.refs.deleteConfirmButton.focus()
-    })
-  }
-
-  handleDeleteConfirmButtonClick (e) {
-    let { note, dispatch } = this.props
-    dataApi
-      .removeNote(note.storage, note.folder, note.key)
-      .then(() => {
-        let dispatchHandler = () => {
-          dispatch({
-            type: 'REMOVE_NOTE',
-            note: note
-          })
-        }
-        ee.once('list:moved', dispatchHandler)
-        ee.emit('list:next')
-        ee.emit('list:focus')
-      })
-  }
-
-  handleDeleteCancelButtonClick (e) {
-    this.setState({
-      isDeleting: false
+    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: 'Delete a note',
+      detail: 'This work cannot be undone.',
+      buttons: ['Confirm', 'Cancel']
     })
+    if (index === 0) {
+      let { note, dispatch } = this.props
+      dataApi
+        .deleteNote(note.storage, note.key)
+        .then((data) => {
+          let dispatchHandler = () => {
+            dispatch({
+              type: 'DELETE_NOTE',
+              storageKey: data.storageKey,
+              noteKey: data.noteKey
+            })
+          }
+          ee.once('list:moved', dispatchHandler)
+          ee.emit('list:next')
+        })
+    }
   }
 
   handleDeleteKeyDown (e) {
@@ -231,69 +222,50 @@ class MarkdownNoteDetail extends React.Component {
         style={this.props.style}
         styleName='root'
       >
-        {this.state.isDeleting
-          ? <div styleName='info'>
-            <div styleName='info-delete'
-              tabIndex='-1'
-              onKeyDown={(e) => this.handleDeleteKeyDown(e)}
-            >
-
-              <span styleName='info-delete-message'>
-                Are you sure to delete this note?
-              </span>
-              <button styleName='info-delete-confirmButton'
-                onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
-                ref='deleteConfirmButton'
-              >Confirm</button>
-              <button styleName='info-delete-cancelButton'
-                onClick={(e) => this.handleDeleteCancelButtonClick(e)}
-              >Cancel</button>
-            </div>
-          </div>
-          : <div styleName='info'>
-            <div styleName='info-left'>
-              <div styleName='info-left-top'>
-                <FolderSelect styleName='info-left-top-folderSelect'
-                  value={this.state.note.storage + '-' + this.state.note.folder}
-                  ref='folder'
-                  data={data}
-                  onChange={(e) => this.handleFolderChange(e)}
-                />
-              </div>
-              <div styleName='info-left-bottom'>
-                <TagSelect
-                  styleName='info-left-bottom-tagSelect'
-                  ref='tags'
-                  value={this.state.note.tags}
-                  onChange={(e) => this.handleChange(e)}
-                />
-              </div>
+        <div styleName='info'>
+          <div styleName='info-left'>
+            <div styleName='info-left-top'>
+              <FolderSelect styleName='info-left-top-folderSelect'
+                value={this.state.note.storage + '-' + this.state.note.folder}
+                ref='folder'
+                data={data}
+                onChange={(e) => this.handleFolderChange(e)}
+              />
             </div>
-            <div styleName='info-right'>
-              <StarButton styleName='info-right-button'
-                onClick={(e) => this.handleStarButtonClick(e)}
-                isActive={note.isStarred}
+            <div styleName='info-left-bottom'>
+              <TagSelect
+                styleName='info-left-bottom-tagSelect'
+                ref='tags'
+                value={this.state.note.tags}
+                onChange={(e) => this.handleChange(e)}
               />
-              <button styleName='info-right-button'
-                onClick={(e) => this.handleShareButtonClick(e)}
-                disabled
-              >
-                <i className='fa fa-share-alt fa-fw'/>
-                <span styleName='info-right-button-tooltip'
-                  style={{right: 20}}
-                >Share Note</span>
-              </button>
-              <button styleName='info-right-button'
-                onClick={(e) => this.handleContextButtonClick(e)}
-              >
-                <i className='fa fa-ellipsis-v'/>
-                <span styleName='info-right-button-tooltip'
-                  style={{right: 5}}
-                >More Options</span>
-              </button>
             </div>
           </div>
-        }
+          <div styleName='info-right'>
+            <StarButton styleName='info-right-button'
+              onClick={(e) => this.handleStarButtonClick(e)}
+              isActive={note.isStarred}
+            />
+            <button styleName='info-right-button'
+              onClick={(e) => this.handleShareButtonClick(e)}
+              disabled
+            >
+              <i className='fa fa-share-alt fa-fw'/>
+              <span styleName='info-right-button-tooltip'
+                style={{right: 20}}
+              >Share Note</span>
+            </button>
+            <button styleName='info-right-button'
+              onClick={(e) => this.handleContextButtonClick(e)}
+            >
+              <i className='fa fa-ellipsis-v'/>
+              <span styleName='info-right-button-tooltip'
+                style={{right: 5}}
+              >More Options</span>
+            </button>
+          </div>
+        </div>
+
         <div styleName='body'>
           <MarkdownEditor
             ref='content'

browser/main/Detail/MarkdownNoteDetail.styl

@@ -12,34 +12,6 @@ $info-height = 75px
   border-bottom $ui-border
   background-color $ui-backgroundColor
 
-.info-delete
-  height 80px
-  display flex
-
-.info-delete-message
-  height 80px
-  line-height 80px
-  padding 0 25px
-  overflow ellipsis
-  flex 1
-
-.info-delete-confirmButton
-  margin 25px 5px 0
-  width 80px
-  height 30px
-  border-radius 2px
-  border none
-  colorDangerButton()
-
-.info-delete-cancelButton
-  width 80px
-  height 30px
-  margin 25px 5px 0
-  border $ui-border
-  border-radius 2px
-  color $ui-text-color
-  colorDefaultButton()
-
 .info-left
   float left
   padding 0 5px