記事が編集された状態で他の記事を見ようとすると警告をだす

lib/actions.js

@@ -12,6 +12,8 @@ export const SWITCH_ARTICLE = 'SWITCH_ARTICLE'
 export const SET_SEARCH_FILTER = 'SET_SEARCH_FILTER'
 export const SET_TAG_FILTER = 'SET_TAG_FILTER'
 export const CLEAR_SEARCH = 'CLEAR_SEARCH'
+export const LOCK_STATUS = 'LOCK_STATUS'
+export const UNLOCK_STATUS = 'UNLOCK_STATUS'
 export const TOGGLE_TUTORIAL = 'TOGGLE_TUTORIAL'
 
 // Status - mode
@@ -109,7 +111,19 @@ export function clearSearch () {
   }
 }
 
-export function toggleTutorial() {
+export function lockStatus () {
+  return {
+    type: LOCK_STATUS
+  }
+}
+
+export function unlockStatus () {
+  return {
+    type: UNLOCK_STATUS
+  }
+}
+
+export function toggleTutorial () {
   return {
     type: TOGGLE_TUTORIAL
   }

lib/components/modal/EditedAlert.js

@@ -0,0 +1,35 @@
+import React, { PropTypes } from 'react'
+import store from 'boost/store'
+import { unlockStatus } from 'boost/actions'
+
+export default class EditedAlert extends React.Component {
+  handleNoButtonClick (e) {
+    this.props.close()
+  }
+
+  handleYesButtonClick (e) {
+    store.dispatch(unlockStatus())
+    store.dispatch(this.props.action)
+    this.props.close()
+  }
+
+  render () {
+    return (
+      <div className='EditedAlert modal'>
+        <div className='title'>Your article is still editing!</div>
+
+        <div className='message'>Do you really want to leave without finishing?</div>
+
+        <div className='control'>
+          <button onClick={e => this.handleNoButtonClick(e)}><i className='fa fa-fw fa-close'/> No</button>
+          <button onClick={e => this.handleYesButtonClick(e)} className='primary'><i className='fa fa-fw fa-check'/> Yes</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+EditedAlert.propTypes = {
+  action: PropTypes.object,
+  close: PropTypes.func
+}

lib/reducer.js

@@ -1,14 +1,42 @@
 import { combineReducers } from 'redux'
 import _ from 'lodash'
-import { SWITCH_FOLDER, SWITCH_MODE, SWITCH_ARTICLE, SET_SEARCH_FILTER, SET_TAG_FILTER, CLEAR_SEARCH, TOGGLE_TUTORIAL, ARTICLE_UPDATE, ARTICLE_DESTROY, FOLDER_CREATE, FOLDER_UPDATE, FOLDER_DESTROY, FOLDER_REPLACE, IDLE_MODE, CREATE_MODE } from './actions'
+import {
+  // Status action type
+  SWITCH_FOLDER,
+  SWITCH_MODE,
+  SWITCH_ARTICLE,
+  SET_SEARCH_FILTER,
+  SET_TAG_FILTER,
+  CLEAR_SEARCH,
+  LOCK_STATUS,
+  UNLOCK_STATUS,
+  TOGGLE_TUTORIAL,
+
+  // Article action type
+  ARTICLE_UPDATE,
+  ARTICLE_DESTROY,
+
+  // Folder action type
+  FOLDER_CREATE,
+  FOLDER_UPDATE,
+  FOLDER_DESTROY,
+  FOLDER_REPLACE,
+
+  // view mode
+  IDLE_MODE,
+  CREATE_MODE
+} from './actions'
 import dataStore from 'boost/dataStore'
 import keygen from 'boost/keygen'
 import activityRecord from 'boost/activityRecord'
+import { openModal } from 'boost/modal'
+import EditedAlert from 'boost/components/modal/EditedAlert'
 
 const initialStatus = {
   mode: IDLE_MODE,
   search: '',
-  isTutorialOpen: false
+  isTutorialOpen: false,
+  isStatusLocked: false
 }
 
 let data = dataStore.getData()
@@ -134,10 +162,25 @@ function articles (state = initialArticles, action) {
 
 function status (state = initialStatus, action) {
   state = Object.assign({}, state)
+
   switch (action.type) {
     case TOGGLE_TUTORIAL:
       state.isTutorialOpen = !state.isTutorialOpen
       return state
+    case LOCK_STATUS:
+      state.isStatusLocked = true
+      return state
+    case UNLOCK_STATUS:
+      state.isStatusLocked = false
+      return state
+  }
+
+  // if status locked, status become unmutable
+  if (state.isStatusLocked) {
+    openModal(EditedAlert, {action})
+    return state
+  }
+  switch (action.type) {
     case SWITCH_FOLDER:
       state.mode = IDLE_MODE
       state.search = `//${action.data} `