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 { Menu, MenuItem, dialog } = remote
-const MenuItem = remote.MenuItem
 
 class MarkdownNoteDetail extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
+      isMovingNote: false,
       note: Object.assign({
         title: '',
-        content: '',
+        content: ''
-        isMovingNote: false,
-        isDeleting: false
       }, 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),
+        note: Object.assign({}, nextProps.note)
-        isDeleting: false
       }, () => {
         this.refs.content.reload()
         this.refs.tags.reset()
@@ -188,34 +185,28 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleDeleteMenuClick (e) {
-    this.setState({
+    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
-      isDeleting: true
+      type: 'warning',
-    }, () => {
+      message: 'Delete a note',
-      this.refs.deleteConfirmButton.focus()
+      detail: 'This work cannot be undone.',
+      buttons: ['Confirm', 'Cancel']
     })
-  }
+    if (index === 0) {
-
-  handleDeleteConfirmButtonClick (e) {
       let { note, dispatch } = this.props
       dataApi
-      .removeNote(note.storage, note.folder, note.key)
+        .deleteNote(note.storage, note.key)
-      .then(() => {
+        .then((data) => {
           let dispatchHandler = () => {
             dispatch({
-            type: 'REMOVE_NOTE',
+              type: 'DELETE_NOTE',
-            note: note
+              storageKey: data.storageKey,
+              noteKey: data.noteKey
             })
           }
           ee.once('list:moved', dispatchHandler)
           ee.emit('list:next')
-        ee.emit('list:focus')
         })
     }
-
-  handleDeleteCancelButtonClick (e) {
-    this.setState({
-      isDeleting: false
-    })
   }
 
   handleDeleteKeyDown (e) {
@@ -231,26 +222,7 @@ class MarkdownNoteDetail extends React.Component {
         style={this.props.style}
         styleName='root'
       >
-        {this.state.isDeleting
+        <div styleName='info'>
-          ? <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'
@@ -293,7 +265,7 @@ class MarkdownNoteDetail extends React.Component {
             </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 { Menu, MenuItem, dialog } = remote
-const MenuItem = remote.MenuItem
 
 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,
+        note: nextNote
-        isDeleting: false
       }, () => {
         let { snippets } = this.state.note
         snippets.forEach((snippet, index) => {
@@ -211,33 +209,28 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleDeleteMenuClick (e) {
-    this.setState({
+    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
-      isDeleting: true
+      type: 'warning',
-    }, () => {
+      message: 'Delete a note',
-      this.refs.deleteConfirmButton.focus()
+      detail: 'This work cannot be undone.',
+      buttons: ['Confirm', 'Cancel']
     })
-  }
+    if (index === 0) {
-
-  handleDeleteConfirmButtonClick (e) {
       let { note, dispatch } = this.props
       dataApi
-      .removeNote(note.storage, note.folder, note.key)
+        .deleteNote(note.storage, note.key)
-      .then(() => {
+        .then((data) => {
           let dispatchHandler = () => {
             dispatch({
-            type: 'REMOVE_NOTE',
+              type: 'DELETE_NOTE',
-            note: note
+              storageKey: data.storageKey,
+              noteKey: data.noteKey
             })
           }
           ee.once('list:moved', dispatchHandler)
           ee.emit('list:next')
         })
     }
-
-  handleDeleteCancelButtonClick (e) {
-    this.setState({
-      isDeleting: false
-    })
   }
 
   handleTabPlusButtonClick (e) {
@@ -423,25 +416,7 @@ class SnippetNoteDetail extends React.Component {
         style={this.props.style}
         styleName='root'
       >
-        {this.state.isDeleting
+        <div styleName='info'>
-          ? <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'
@@ -484,7 +459,6 @@ class SnippetNoteDetail extends React.Component {
             </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
       }
   }