add only unsaved filter

browser/main/HomePage/ArticleTopBar.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import ExternalLink from 'browser/components/ExternalLink'
-import { setSearchFilter, clearSearch, toggleTutorial } from '../actions'
+import { setSearchFilter, clearSearch, toggleOnlyUnsavedFilter, toggleTutorial } from '../actions'
 
 const BRAND_COLOR = '#18AF90'
 
@@ -105,8 +105,15 @@ export default class ArticleTopBar extends React.Component {
     this.focusInput()
   }
 
+  handleOnlyUnsavedChange (e) {
+    let { dispatch } = this.props
+
+    dispatch(toggleOnlyUnsavedFilter())
+  }
+
   handleTutorialButtonClick (e) {
     let { dispatch } = this.props
+    console.log(e.target.value)
 
     dispatch(toggleTutorial())
   }
@@ -142,7 +149,7 @@ export default class ArticleTopBar extends React.Component {
           </div>
 
           {status.isTutorialOpen ? searchTutorialElement : null}
-
+          <label className='only-unsaved'><input value={status.onlyUnsaved} onChange={e => this.handleOnlyUnsavedChange(e)} type='checkbox'/> only unsaved</label>
         </div>
         <div className='right'>
           <button onClick={e => this.handleTutorialButtonClick(e)}>?<span className='tooltip'>How to use</span>

browser/main/HomePage/index.js

@@ -144,6 +144,10 @@ function remap (state) {
   let articles = _articles != null ? _articles.data : []
   let modified = _articles != null ? _articles.modified : []
 
+  if (state.status.onlyUnsaved) {
+    articles = modified.map(modifiedArticle => _.findWhere(articles, {key: modifiedArticle.key}))
+  }
+
   articles.sort((a, b) => {
     return new Date(b.updatedAt) - new Date(a.updatedAt)
   })

browser/main/actions.js

@@ -16,6 +16,7 @@ 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 TOGGLE_ONLY_UNSAVED_FILTER = 'TOGGLE_ONLY_UNSAVED_FILTER'
 
 export const TOGGLE_TUTORIAL = 'TOGGLE_TUTORIAL'
 
@@ -131,6 +132,12 @@ export function clearSearch () {
   }
 }
 
+export function toggleOnlyUnsavedFilter () {
+  return {
+    type: TOGGLE_ONLY_UNSAVED_FILTER
+  }
+}
+
 export function toggleTutorial () {
   return {
     type: TOGGLE_TUTORIAL
@@ -153,5 +160,6 @@ export default {
   setSearchFilter,
   setTagFilter,
   clearSearch,
+  toggleOnlyUnsavedFilter,
   toggleTutorial
 }

browser/main/reducer.js

@@ -7,6 +7,7 @@ import {
   SET_SEARCH_FILTER,
   SET_TAG_FILTER,
   CLEAR_SEARCH,
+  TOGGLE_ONLY_UNSAVED_FILTER,
   TOGGLE_TUTORIAL,
 
   // user
@@ -31,7 +32,7 @@ import activityRecord from 'browser/lib/activityRecord'
 const initialStatus = {
   search: '',
   isTutorialOpen: false,
-  isStatusLocked: false
+  onlyUnsaved: false
 }
 
 let data = dataStore.getData()
@@ -264,6 +265,10 @@ function status (state = initialStatus, action) {
     case CLEAR_SEARCH:
       state.search = ''
 
+      return state
+    case TOGGLE_ONLY_UNSAVED_FILTER:
+      state.onlyUnsaved = !state.onlyUnsaved
+
       return state
     default:
       return state

browser/styles/main/HomeContainer/components/ArticleTopBar.styl

@@ -122,6 +122,12 @@ infoBtnActiveBgColor = #3A3A3A
       transition 0.1s
       &:hover
         color refreshBtnActiveColor
+    .only-unsaved
+      line-height 33px
+      float left
+      height 33px
+      margin-top 13.5px
+      margin-left 10px
   &>.right
     float right
     &>button