Improve searching

browser/main/NoteList/index.js

@@ -52,6 +52,8 @@ class NoteList extends React.Component {
 
     this.state = {
     }
+
+    this.contextNotes = []
   }
 
   componentDidMount () {
@@ -90,6 +92,7 @@ class NoteList extends React.Component {
 
     if (this.notes.length > 0 && location.query.key == null) {
       let { router } = this.context
+      if (!location.pathname.match(/\/searched/)) this.contextNotes = this.getContextNotes()
       router.replace({
         pathname: location.pathname,
         query: {
@@ -234,48 +237,50 @@ class NoteList extends React.Component {
     let { router } = this.context
 
     if (location.pathname.match(/\/home/)) {
-      return data.noteMap.map((note) => note)
+      const allNotes = data.noteMap.map((note) => note)
+      this.contextNotes = allNotes
+      return allNotes
     }
 
     if (location.pathname.match(/\/starred/)) {
-      return data.starredSet.toJS()
-        .map((uniqueKey) => data.noteMap.get(uniqueKey))
+      const starredNotes = data.starredSet.toJS().map((uniqueKey) => data.noteMap.get(uniqueKey))
+      this.contextNotes = starredNotes
+      return starredNotes
     }
 
     if (location.pathname.match(/\/searched/)) {
       const searchInputText = document.getElementsByClassName('searchInput')[0].value
       if (searchInputText === '') {
-        router.push('/home')
+        return this.contextNotes
       }
-      return searchFromNotes(this.notes, searchInputText)
+      return searchFromNotes(this.contextNotes, searchInputText)
     }
 
     if (location.pathname.match(/\/trashed/)) {
-      return data.trashedSet.toJS()
-        .map((uniqueKey) => data.noteMap.get(uniqueKey))
+      const trashedNotes = data.trashedSet.toJS().map((uniqueKey) => data.noteMap.get(uniqueKey))
+      this.contextNotes = trashedNotes
+      return trashedNotes
     }
 
-    let storageKey = params.storageKey
-    let folderKey = params.folderKey
-    let storage = data.storageMap.get(storageKey)
-    if (storage == null) return []
-
-    let folder = _.find(storage.folders, {key: folderKey})
-    if (folder == null) {
-      let storageNoteSet = data.storageNoteMap
-        .get(storage.key)
-      if (storageNoteSet == null) storageNoteSet = []
-      return storageNoteSet
-        .map((uniqueKey) => data.noteMap.get(uniqueKey))
-    }
+    return this.getContextNotes()
+  }
 
-    let folderNoteKeyList = data.folderNoteMap
-      .get(storage.key + '-' + folder.key)
+  // get notes in the current folder
+  getContextNotes () {
+    const { data, params } = this.props
+    const storageKey = params.storageKey
+    const folderKey = params.folderKey
+    const storage = data.storageMap.get(storageKey)
+    if (storage === undefined) return []
+
+    const folder = _.find(storage.folders, {key: folderKey})
+    if (folder === undefined) {
+      const storageNoteSet = data.storageNoteMap.get(storage.key) || []
+      return storageNoteSet.map((uniqueKey) => data.noteMap.get(uniqueKey))
+    }
 
-    return folderNoteKeyList != null
-      ? folderNoteKeyList
-        .map((uniqueKey) => data.noteMap.get(uniqueKey))
-      : []
+    const folderNoteKeyList = data.folderNoteMap.get(`${storage.key}-${folder.key}`) || []
+    return folderNoteKeyList.map((uniqueKey) => data.noteMap.get(uniqueKey))
   }
 
   handleNoteClick (e, uniqueKey) {

browser/main/TopBar/index.js

@@ -18,7 +18,10 @@ class TopBar extends React.Component {
     this.state = {
       search: '',
       searchOptions: [],
-      isSearching: false
+      isSearching: false,
+      isAlphabet: false,
+      isIME: false,
+      isConfirmTranslation: false
     }
 
     this.focusSearchHandler = () => {
@@ -34,9 +37,52 @@ class TopBar extends React.Component {
     ee.off('top:focus-search', this.focusSearchHandler)
   }
 
+  handleKeyDown (e) {
+    // reset states
+    this.setState({
+      isAlphabet: false,
+      isIME: false
+    })
+
+    // When the key is an alphabet, del, enter or ctr
+    if (e.keyCode <= 90) {
+      this.setState({
+        isAlphabet: true
+      })
+    // When the key is an IME input (Japanese, Chinese)
+    } else if (e.keyCode === 229) {
+      this.setState({
+        isIME: true
+      })
+    }
+  }
+
+  handleKeyUp (e) {
+    const { router } = this.context
+    // reset states
+    this.setState({
+      isConfirmTranslation: false
+    })
+
+    // When the key is translation confirmation (Enter)
+    if (this.state.isIME && e.keyCode === 13) {
+      this.setState({
+        isConfirmTranslation: true
+      })
+      router.push('/searched')
+      this.setState({
+        search: this.refs.searchInput.value
+      })
+    }
+  }
+
   handleSearchChange (e) {
-    let { router } = this.context
-    router.push('/searched')
+    const { router } = this.context
+    if (this.state.isAlphabet || this.state.isConfirmTranslation) {
+      router.push('/searched')
+    } else {
+      e.preventDefault()
+    }
     this.setState({
       search: this.refs.searchInput.value
     })
@@ -93,6 +139,8 @@ class TopBar extends React.Component {
                 ref='searchInput'
                 value={this.state.search}
                 onChange={(e) => this.handleSearchChange(e)}
+                onKeyDown={(e) => this.handleKeyDown(e)}
+                onKeyUp={(e) => this.handleKeyUp(e)}
                 placeholder='Search'
                 type='text'
                 className='searchInput'