add DeleteArticleModal

browser/main/HomePage/ArticleDetail/index.js

@@ -7,15 +7,15 @@ import CodeEditor from 'browser/components/CodeEditor'
 import {
   switchFolder,
   cacheArticle,
-  saveArticle,
-  destroyArticle
+  saveArticle
 } from '../../actions'
 import linkState from 'browser/lib/linkState'
-import FolderMark from 'browser/components/FolderMark'
 import TagSelect from 'browser/components/TagSelect'
 import ModeSelect from 'browser/components/ModeSelect'
 import activityRecord from 'browser/lib/activityRecord'
 import ShareButton from './ShareButton'
+import { openModal } from 'browser/lib/modal'
+import DeleteArticleModal from '../../modal/DeleteArticleModal'
 
 const electron = require('electron')
 const clipboard = electron.clipboard
@@ -251,6 +251,12 @@ export default class ArticleDetail extends React.Component {
     }
   }
 
+  handleDeleteButtonClick (e) {
+    if (this.props.activeArticle) {
+      openModal(DeleteArticleModal, {articleKey: this.props.activeArticle.key})
+    }
+  }
+
   handleTitleKeyDown (e) {
     if (e.keyCode === 9 && !e.shiftKey) {
       e.preventDefault()

browser/main/modal/DeleteArticleModal.js

@@ -0,0 +1,40 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import store from '../store'
+import { destroyArticle } from '../actions'
+
+export default class DeleteArticleModal extends React.Component {
+  componentDidMount () {
+    ReactDOM.findDOMNode(this.refs.no).focus()
+  }
+
+  handleNoButtonClick (e) {
+    this.props.close()
+  }
+
+  handleYesButtonClick (e) {
+    store.dispatch(destroyArticle(this.props.articleKey))
+    this.props.close()
+  }
+
+  render () {
+    return (
+      <div className='DeleteArticleModal modal'>
+        <div className='title'><i className='fa fa-fw fa-trash'/> Delete an article.</div>
+
+        <div className='message'>Do you really want to delete?</div>
+
+        <div className='control'>
+          <button ref='no' onClick={e => this.handleNoButtonClick(e)}><i className='fa fa-fw fa-close'/> No</button>
+          <button ref='yes' onClick={e => this.handleYesButtonClick(e)} className='danger'><i className='fa fa-fw fa-check'/> Yes</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+DeleteArticleModal.propTypes = {
+  action: PropTypes.object,
+  articleKey: PropTypes.string,
+  close: PropTypes.func
+}

browser/main/reducer.js

@@ -222,7 +222,9 @@ function articles (state = initialArticles, action) {
         let articleKey = action.data.key
 
         let targetIndex = _.findIndex(state.data, _article => articleKey === _article.key)
-        if (targetIndex >= 0) state.splice(targetIndex, 1)
+        if (targetIndex >= 0) state.data.splice(targetIndex, 1)
+        let modifiedIndex = _.findIndex(state.modified, _article => articleKey === _article.key)
+        if (modifiedIndex >= 0) state.modified.splice(modifiedIndex, 1)
 
         dataStore.setArticles(state)
         return state