delete note

2025-12-15 18:56:22 +00:00 · 2016-07-23 15:28:17 +09:00
parent b2d34ab95d
commit 45b1cd3942
17 changed files with 498 additions and 329 deletions
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -5,9 +5,9 @@ import MarkdownEditor from 'browser/components/MarkdownEditor'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
-import Commander from 'browser/main/lib/Commander'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
+import ee from 'browser/main/lib/eventEmitter'

 const electron = require('electron')
 const { remote } = electron
@@ -22,31 +22,22 @@ class MarkdownNoteDetail extends React.Component {
      note: Object.assign({
        title: '',
        content: '',
-        isMovingNote: false
+        isMovingNote: false,
+        isDeleting: false
      }, props.note)
    }
    this.dispatchTimer = null
  }

-  componentDidMount () {
-    Commander.bind('note-detail', this)
-  }
-
-  componentWillUnmount () {
-    Commander.release(this)
-  }
-
-  fire (command) {
-    switch (command) {
-      case 'focus':
-        this.refs.content.focus()
-    }
+  focus () {
+    this.refs.content.focus()
  }

  componentWillReceiveProps (nextProps) {
    if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
      this.setState({
-        note: Object.assign({}, nextProps.note)
+        note: Object.assign({}, nextProps.note),
+        isDeleting: false
      }, () => {
        this.refs.content.reload()
        this.refs.tags.reset()
@@ -176,11 +167,39 @@ class MarkdownNoteDetail extends React.Component {
    let menu = new Menu()
    menu.append(new MenuItem({
      label: 'Delete',
-      click: (e) => this.handlePreferencesButtonClick(e)
+      click: (e) => this.handleDeleteMenuClick(e)
    }))
    menu.popup(remote.getCurrentWindow())
  }

+  handleDeleteMenuClick (e) {
+    this.setState({
+      isDeleting: true
+    })
+  }
+
+  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
+    })
+  }
+
  render () {
    let { storages, config } = this.props
    let { note } = this.state
@@ -190,43 +209,58 @@ class MarkdownNoteDetail extends React.Component {
        style={this.props.style}
        styleName='root'
      >
-        <div styleName='info'>
-          <div styleName='info-left'>
+        {this.state.isDeleting
+          ? <div styleName='info'>
+            <div styleName='info-delete'>

-            <div styleName='info-left-top'>
-              <FolderSelect styleName='info-left-top-folderSelect'
-                value={this.state.note.storage + '-' + this.state.note.folder}
-                ref='folder'
-                storages={storages}
-                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)}
-              />
+              <span styleName='info-delete-message'>
+                Are you sure to delete this note?
+              </span>
+              <button styleName='info-delete-cancelButton'
+                onClick={(e) => this.handleDeleteCancelButtonClick(e)}
+              >Cancel</button>
+              <button styleName='info-delete-confirmButton'
+                onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
+              >Confirm</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)}
-            >
-              <i className='fa fa-share-alt fa-fw'/>
-            </button>
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleContextButtonClick(e)}
-            >
-              <i className='fa fa-ellipsis-v'/>
-            </button>
+          : <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'
+                  storages={storages}
+                  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}
+              />
+              <button styleName='info-right-button'
+                onClick={(e) => this.handleShareButtonClick(e)}
+              >
+                <i className='fa fa-share-alt fa-fw'/>
+              </button>
+              <button styleName='info-right-button'
+                onClick={(e) => this.handleContextButtonClick(e)}
+              >
+                <i className='fa fa-ellipsis-v'/>
+              </button>
+            </div>
          </div>
-        </div>
+        }
        <div styleName='body'>
          <MarkdownEditor
            ref='content'
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -12,6 +12,36 @@ $info-height = 75px
  border-bottom $ui-border
  background-color $ui-backgroundColor

+.info-delete
+  height 80px
+  clearfix()
+
+.info-delete-message
+  height 80px
+  line-height 80px
+  padding 0 25px
+  float left
+
+.info-delete-confirmButton
+  float right
+  margin 25px 5px 0
+  height 30px
+  padding 0 25px
+  border-radius 2px
+  border none
+  color $ui-text-color
+  colorDangerButton()
+
+.info-delete-cancelButton
+  float right
+  height 30px
+  margin 25px 5px 0
+  padding 0 25px
+  border $ui-border
+  border-radius 2px
+  color $ui-text-color
+  colorDefaultButton()
+
 .info-left
  float left
  padding 0 5px
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -5,10 +5,10 @@ import CodeEditor from 'browser/components/CodeEditor'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
-import Commander from 'browser/main/lib/Commander'
 import dataApi from 'browser/main/lib/dataApi'
 import modes from 'browser/lib/modes'
 import { hashHistory } from 'react-router'
+import ee from 'browser/main/lib/eventEmitter'

 const electron = require('electron')
 const { remote } = electron
@@ -25,34 +25,26 @@ class SnippetNoteDetail extends React.Component {
        description: ''
      }, props.note, {
        snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet))
-      })
+      }),
+      isDeleting: false
    }
  }

-  componentDidMount () {
-    Commander.bind('note-detail', this)
-  }
-
-  componentWillUnmount () {
-    Commander.release(this)
-  }
-
-  fire (command) {
-    switch (command) {
-      case 'focus':
-        this.refs.description.focus()
-    }
+  focus () {
+    this.refs.description.focus()
  }

  componentWillReceiveProps (nextProps) {
    if (nextProps.note.key !== this.props.note.key) {
+      let nextNote = Object.assign({
+        description: ''
+      }, nextProps.note, {
+        snippets: nextProps.note.snippets.map((snippet) => Object.assign({}, snippet))
+      })
      this.setState({
        snippetIndex: 0,
-        note: Object.assign({
-          description: ''
-        }, nextProps.note, {
-          snippets: nextProps.note.snippets.map((snippet) => Object.assign({}, snippet))
-        })
+        note: nextNote,
+        isDeleting: false
      }, () => {
        let { snippets } = this.state.note
        snippets.forEach((snippet, index) => {
@@ -171,6 +163,7 @@ class SnippetNoteDetail extends React.Component {
    let menu = new Menu()
    menu.append(new MenuItem({
      label: 'Export as a File',
+      disabled: true,
      click: (e) => this.handlePreferencesButtonClick(e)
    }))
    menu.append(new MenuItem({
@@ -185,11 +178,39 @@ class SnippetNoteDetail extends React.Component {
    let menu = new Menu()
    menu.append(new MenuItem({
      label: 'Delete',
-      click: (e) => this.handlePreferencesButtonClick(e)
+      click: (e) => this.handleDeleteMenuClick(e)
    }))
    menu.popup(remote.getCurrentWindow())
  }

+  handleDeleteMenuClick (e) {
+    this.setState({
+      isDeleting: true
+    })
+  }
+
+  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
+    })
+  }
+
  handleTabPlusButtonClick (e) {
    let { note } = this.state

@@ -360,43 +381,59 @@ class SnippetNoteDetail extends React.Component {
        style={this.props.style}
        styleName='root'
      >
-        <div styleName='info'>
-          <div styleName='info-left'>
+        {this.state.isDeleting
+          ? <div styleName='info'>
+            <div styleName='info-delete'>

-            <div styleName='info-left-top'>
-              <FolderSelect styleName='info-left-top-folderSelect'
-                value={this.state.note.storage + '-' + this.state.note.folder}
-                ref='folder'
-                storages={storages}
-                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)}
-              />
+              <span styleName='info-delete-message'>
+                Are you sure to delete this note?
+              </span>
+              <button styleName='info-delete-cancelButton'
+                onClick={(e) => this.handleDeleteCancelButtonClick(e)}
+              >Cancel</button>
+              <button styleName='info-delete-confirmButton'
+                onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
+              >Confirm</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)}
-            >
-              <i className='fa fa-share-alt fa-fw'/>
-            </button>
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleContextButtonClick(e)}
-            >
-              <i className='fa fa-ellipsis-v'/>
-            </button>
+          : <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'
+                  storages={storages}
+                  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}
+              />
+              <button styleName='info-right-button'
+                onClick={(e) => this.handleShareButtonClick(e)}
+              >
+                <i className='fa fa-share-alt fa-fw'/>
+              </button>
+              <button styleName='info-right-button'
+                onClick={(e) => this.handleContextButtonClick(e)}
+              >
+                <i className='fa fa-ellipsis-v'/>
+              </button>
+            </div>
          </div>
-        </div>
+        }
+
        <div styleName='body'>
          <div styleName='body-description'>
            <textarea styleName='body-description-textarea'
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -12,6 +12,36 @@ $info-height = 75px
  border-bottom $ui-border
  background-color $ui-backgroundColor

+.info-delete
+  height 80px
+  clearfix()
+
+.info-delete-message
+  height 80px
+  line-height 80px
+  padding 0 25px
+  float left
+
+.info-delete-confirmButton
+  float right
+  margin 25px 5px 0
+  height 30px
+  padding 0 25px
+  border-radius 2px
+  border none
+  color $ui-text-color
+  colorDangerButton()
+
+.info-delete-cancelButton
+  float right
+  height 30px
+  margin 25px 5px 0
+  padding 0 25px
+  border $ui-border
+  border-radius 2px
+  color $ui-text-color
+  colorDefaultButton()
+
 .info-left
  float left
  padding 0 5px
@@ -68,6 +98,7 @@ $info-height = 75px
  resize none
  border none
  padding 10px
+  line-height 1.6

 .tabList
  absolute left right
--- a/browser/main/Detail/index.js
+++ b/browser/main/Detail/index.js
@@ -4,14 +4,25 @@ import styles from './Detail.styl'
 import _ from 'lodash'
 import MarkdownNoteDetail from './MarkdownNoteDetail'
 import SnippetNoteDetail from './SnippetNoteDetail'
-import dataApi from 'browser/main/lib/dataApi'
-
-const electron = require('electron')
+import ee from 'browser/main/lib/eventEmitter'

 const OSX = global.process.platform === 'darwin'

 class Detail extends React.Component {
-  componentDidUpdate (prevProps, prevState) {
+  constructor (props) {
+    super(props)
+
+    this.focusHandler = () => {
+      this.refs.root.focus()
+    }
+  }
+
+  componentDidMount () {
+    ee.on('detail:focus', this.focusHandler)
+  }
+
+  componentWillUnmount () {
+    ee.off('detail:focus', this.focusHandler)
  }

  render () {
@@ -35,6 +46,7 @@ class Detail extends React.Component {
        <div styleName='root'
          style={this.props.style}
          tabIndex='0'
+          ref='root'
        >
          <div styleName='empty'>
            <div styleName='empty-message'>{OSX ? 'Command(⌘)' : 'Ctrl(^)'} + N<br/>to create a new post</div>
@@ -48,6 +60,7 @@ class Detail extends React.Component {
        <SnippetNoteDetail
          note={note}
          config={config}
+          ref='root'
          {..._.pick(this.props, [
            'dispatch',
            'storages',
@@ -63,6 +76,7 @@ class Detail extends React.Component {
      <MarkdownNoteDetail
        note={note}
        config={config}
+        ref='root'
        {..._.pick(this.props, [
          'dispatch',
          'storages',