DELETE_NOTE

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>
-            <div styleName='info-right'>
-              <StarButton styleName='info-right-button'
-                onClick={(e) => this.handleStarButtonClick(e)}
-                isActive={note.isStarred}
+        <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)}
               />
-              <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

browser/main/Detail/SnippetNoteDetail.js

@@ -24,21 +24,20 @@ function detectModeByFilename (filename) {
 
 const electron = require('electron')
 const { remote } = electron
-const Menu = remote.Menu
-const MenuItem = remote.MenuItem
+const { Menu, MenuItem, dialog } = remote
 
 class SnippetNoteDetail extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
+      isMovingNote: false,
       snippetIndex: 0,
       note: Object.assign({
         description: ''
       }, props.note, {
         snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet))
-      }),
-      isDeleting: false
+      })
     }
   }
 
@@ -56,8 +55,7 @@ class SnippetNoteDetail extends React.Component {
       })
       this.setState({
         snippetIndex: 0,
-        note: nextNote,
-        isDeleting: false
+        note: nextNote
       }, () => {
         let { snippets } = this.state.note
         snippets.forEach((snippet, index) => {
@@ -211,33 +209,28 @@ class SnippetNoteDetail 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')
-      })
-  }
-
-  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')
+        })
+    }
   }
 
   handleTabPlusButtonClick (e) {
@@ -423,68 +416,49 @@ class SnippetNoteDetail 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>
-            <div styleName='info-right'>
-              <StarButton styleName='info-right-button'
-                onClick={(e) => this.handleStarButtonClick(e)}
-                isActive={note.isStarred}
+        <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)}
               />
-              <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'>
           <div styleName='body-description'>

browser/main/Detail/SnippetNoteDetail.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

browser/main/store.js

@@ -263,7 +263,46 @@ function data (state = defaultDataMap(), action) {
       }
     case 'DELETE_NOTE':
       {
+        let uniqueKey = action.storageKey + '-' + action.noteKey
+        let targetNote = state.noteMap.get(uniqueKey)
 
+        state = Object.assign({}, state)
+
+        // From storageNoteMap
+        state.storeageNoteMap = new Map(state.storeageNoteMap)
+        let noteSet = state.storeageNoteMap.get(targetNote.storage)
+        noteSet = new Set(noteSet)
+        noteSet.delete(uniqueKey)
+        state.storeageNoteMap.set(targetNote.storage, noteSet)
+
+        if (targetNote != null) {
+          // From isStarred
+          if (targetNote.isStarred) {
+            state.starredSet = new Set(state.starredSet)
+            state.starredSet.delete(uniqueKey)
+          }
+
+          // From folderNoteMap
+          let folderKey = targetNote.storage + '-' + targetNote.folder
+          state.folderNoteMap = new Map(state.folderNoteMap)
+          let folderSet = state.folderNoteMap.get(folderKey)
+          folderSet = new Set(folderSet)
+          folderSet.delete(uniqueKey)
+          state.folderNoteMap.set(folderKey, folderSet)
+
+          // From tagMap
+          if (targetNote.tags.length > 0) {
+            state.tagNoteMap = new Map(state.tagNoteMap)
+            targetNote.tags.forEach((tag) => {
+              let noteSet = state.tagNoteMap.get(tag)
+              noteSet = new Set(noteSet)
+              noteSet.delete(uniqueKey)
+              state.tagNoteMap.set(tag, noteSet)
+            })
+          }
+        }
+        state.noteMap = new Map(state.noteMap)
+        state.noteMap.delete(uniqueKey)
         return state
       }
   }