search and keyboard optimisation

Signed-off-by: mashaal <[email protected]>
mashaal · Jan 4, 2017 · 627172a · 627172a
1 parent f9ed8c7
commit 627172a
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 35 deletions.
diff --git a/components/keyboard/index.js b/components/keyboard/index.js
@@ -1,14 +1,19 @@
-import key from 'key'
 import { store } from '../../client.js'
+import { rafThrottle } from '../utilities'
 
 export default class Keyboard {
   constructor () {
-    window.addEventListener('keydown', (event) => {
-      if (event.keyCode === 27) store.dispatch({type: 'ESCAPE'})
-      if (event.keyCode === 32 && !store.getState().search.display && !store.getState().metadata.display) {
-        event.preventDefault()
-        window.player.toggle()
-      }
-    })
+    this.keyEvent = rafThrottle(this.keyDown)
+    window.addEventListener('keydown', this.keyEvent)
+  }
+  keyDown (event) {
+    if (event.keyCode === 27) {
+      event.preventDefault()
+      store.dispatch({type: 'ESCAPE'})
+    }
+    if (event.keyCode === 32 && !store.getState().search.display && !store.getState().metadata.display) {
+      event.preventDefault()
+      window.player.toggle()
+    }
   }
 }
diff --git a/components/library/reducer.js b/components/library/reducer.js
@@ -1,5 +1,6 @@
 const path = require('path')
 import { sortTracks, sortAlbums } from '../utilities'
+import { store } from '../../client.js'
 
 export const libraryReducer = (state = {covers: [], tracks: [], albums: [], newest: false}, action) => {
   switch (action.type) {
@@ -18,11 +19,13 @@ export const libraryReducer = (state = {covers: [], tracks: [], albums: [], newe
       break
     }
     case 'SEARCH': {
-      state = {...state, albums: action.albums}
+      let albums = store.getState().search.fuzzy.search(action.input)
+      state = {...state, albums: albums}
       break
     }
-    case 'CLEAR': {
-      state = {...state, albums: action.albums}
+    case 'ESCAPE': {
+      let albums = store.getState().search.fuzzy.search('')
+      state = {...state, albums: albums}
       break
     }
     case 'REMOVE_ARTWORK': {

diff --git a/components/search/index.jsx b/components/search/index.jsx
@@ -9,7 +9,10 @@ import { store } from '../../client.js'
 export default class Search extends Component {
   constructor () {
     super()
-    this.clear = this.clear.bind(this)
+    this.state = {
+      search: ''
+    }
+    this.handleSearch = this.handleSearch.bind(this)
   }
   shouldComponentUpdate = (nextProps, nextState) => {
     return shallowCompare(this, nextProps, nextState)
@@ -22,28 +25,16 @@ export default class Search extends Component {
         }
       }
     })
-    window.addEventListener('keyup', (event) => {
-      if (!this.props.admin.display && !this.props.metadata.display) {
-        if (key.is(key.code.alnum, event.which) || event.keyCode === 8) {
-          let albums = this.props.search.fuzzy.search(this.refs.search.value)
-          store.dispatch({type: 'SEARCH', input: this.refs.search.value, albums: albums})
-        }
-        if (event.keyCode === 27) {
-          this.clear()
-        }
-      }
-    })
   }
-  clear = () => {
-    this.refs.search.value = ''
-    let albums = this.props.search.fuzzy.search('')
-    store.dispatch({type: 'CLEAR', input: '', albums: albums})
+  handleSearch (event) {
+    event.preventDefault()
+    store.dispatch({type: 'SEARCH', input: event.target.value})
   }
   render () {
     return (
       <form style={[styles.search, this.props.search.display ? styles.show : styles.hide]}>
-        <CloseButton onClick={this.clear} />
-        <input ref='search' type='text' style={styles.input}/>
+        <CloseButton />
+        <input ref='search' type='text' value={this.props.search.input} style={styles.input} onChange={this.handleSearch} />
       </form>
     )
   }
@@ -88,7 +79,6 @@ const styles = {
   },
   hide: {
     opacity: 0,
-    transform: 'translateY(-3em)',
-    pointerEvents: 'none'
+    transform: 'translateY(-5em)'
   }
 }
diff --git a/components/search/reducer.js b/components/search/reducer.js
@@ -1,9 +1,9 @@
 import FuzzySearch from 'fuzzy-search'
 
-export const searchReducer = (state = {display: false, fuzzy: false}, action) => {
+export const searchReducer = (state = {display: false, fuzzy: false, input: ''}, action) => {
   switch (action.type) {
     case 'SEARCH': {
-      state = {...state, display: true}
+      state = {...state, display: true, input: action.input}
       break
     }
     case 'CONNECTED': {
@@ -12,8 +12,8 @@ export const searchReducer = (state = {display: false, fuzzy: false}, action) =>
       })}
       break
     }
-    case 'CLEAR': {
-      state = {...state, display: false}
+    case 'ESCAPE': {
+      state = {...state, display: false, input: ''}
       break
     }
   }