Implement a basic search UI

Author: MarshallOfSound

src/app.js

@@ -3,16 +3,19 @@ import { Navigator } from 'react-native'
 import { setTheme, MKColor } from 'react-native-material-kit'
 import HomeScreen from './screens/HomeScreen'
 import PlaylistScreen from './screens/PlaylistScreen'
+import SearchStore from './stores/SearchStore'
+import SearchScreen from './screens/SearchScreen'
 import SettingsScreen from './screens/SettingsScreen'
 import SettingsStore from './stores/SettingsStore'
 import ThemeStore from './stores/ThemeStore'
 import TrackStore from './stores/TrackStore'
 import WebSocketStore from './stores/WebSocketStore'
 
+const searchStore = new SearchStore()
 const settingsStore = new SettingsStore()
 const themeStore = new ThemeStore()
 const trackStore = new TrackStore()
-const webSocketStore = new WebSocketStore(trackStore, themeStore)
+const webSocketStore = new WebSocketStore(trackStore, themeStore, searchStore)
 
 setTheme({
   primaryColor: MKColor.Orange,
@@ -51,6 +54,9 @@ export default class App extends Component {
             case 'settings': {
               return (<SettingsScreen navigator={navigator} settingsStore={settingsStore} themeStore={themeStore} />)
             }
+            case 'search': {
+              return (<SearchScreen navigator={navigator} themeStore={themeStore} webSocketStore={webSocketStore} searchStore={searchStore} />)
+            }
             default:
             case 'remote': {
               return (<HomeScreen trackStore={trackStore} webSocketStore={webSocketStore} navigator={navigator} settingsStore={settingsStore} themeStore={themeStore} />)

src/components/Toolbar.js

@@ -16,6 +16,12 @@ export default class Toolbar extends Component {
   _actionSelected = (actionIndex) => {
     switch (actionIndex) {
       case 0: {
+        this.props.navigator.push({
+          name: 'search'
+        })
+        break
+      }
+      case 1: {
         this.props.navigator.push({
           name: 'settings'
         })
@@ -34,6 +40,9 @@ export default class Toolbar extends Component {
   render () {
     const { color, title, settingsMenu, showDrawer, drawerFunction } = this.props
     const actions = [
+      {
+        title: 'Search'
+      },
       {
         title: 'Settings'
       }

src/screens/SearchScreen.js

@@ -0,0 +1,85 @@
+import React, { Component, PropTypes } from 'react'
+import { ScrollView, StatusBar, StyleSheet, TextInput, View } from 'react-native'
+import { observer } from 'mobx-react/native'
+// import Zeroconf from 'react-native-zeroconf'
+import Toolbar from '../components/Toolbar'
+import SongList from '../components/SongList'
+
+@observer
+export default class SearchScreen extends Component {
+  static propTypes = {
+    navigator: PropTypes.object,
+    searchStore: PropTypes.object,
+    settingsStore: PropTypes.object,
+    themeStore: PropTypes.object,
+    webSocketStore: PropTypes.object
+  }
+
+  constructor (...args) {
+    super(...args)
+    this.state = {
+      searchText: ''
+    }
+  }
+
+  _handleTrackPress = (track) => {
+    const searchText = this.props.searchStore.searchText
+    return () => {
+      this.props.webSocketStore.sendSearchAndPlayResult(searchText, track)
+    }
+  }
+
+  _updateSearchText = (searchText) => {
+    this.props.searchStore.setSearchText(searchText)
+  }
+
+  _search = () => {
+    this.props.webSocketStore.sendSearch(this.props.searchStore.searchText)
+  }
+
+  render () {
+    const { searchStore, themeStore } = this.props
+    return (
+      <View style={[styles.container, { backgroundColor: themeStore.backgroundColor() }]}>
+        <StatusBar animated backgroundColor={themeStore.barColor()} />
+        <Toolbar title={'Search'} navigator={this.props.navigator} color={themeStore.barColor()} />
+        <View style={styles.content}>
+          <View style={styles.settingsContent}>
+            <TextInput
+              style={{ color: themeStore.foreColor() }}
+              autoCorrect={true}
+              defaultValue={searchStore.searchText}
+              keyboardType="web-search"
+              underlineColorAndroid={themeStore.highlightColor()}
+              placeholder="Search text here..."
+              placeholderTextColor={themeStore.foreColor()}
+              onChangeText={this._updateSearchText}
+              onSubmitEditing={this._search}
+            />
+          </View>
+          <ScrollView>
+            <SongList black={!(themeStore.themeEnabled && themeStore.themeType === 'FULL')} data={searchStore.trackDataStore} handlePress={this._handleTrackPress} />
+          </ScrollView>
+        </View>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignSelf: 'stretch'
+  },
+  content: {
+    flex: 1
+  },
+  controlBar: {
+    flex: 0,
+    height: 100,
+    elevation: 4
+  },
+  settingsContent: {
+    margin: 20
+  }
+})

src/screens/SettingsScreen.js

@@ -36,6 +36,7 @@ export default class SettingsScreen extends Component {
               keyboardType="numeric"
               underlineColorAndroid={themeStore.highlightColor()}
               placeholder="GPMDP IP Address"
+              placeholderTextColor={themeStore.foreColor()}
               onChangeText={this._ipChanged}
             />
           </View>

src/stores/SearchStore.js

@@ -0,0 +1,21 @@
+import { observable } from 'mobx'
+import { ListView } from 'react-native'
+
+export default class SearchStore {
+  @observable searchText = ''
+  @observable albums = []
+  @observable artists = []
+  tracks = []
+  @observable trackDataStore = new ListView.DataSource({ rowHasChanged: (r1, r2) => JSON.stringify(r1) !== JSON.stringify(r2) })
+
+  setSearchText = (newSearchText) => {
+    this.searchText = newSearchText
+  }
+
+  setSearchResults = (results) => {
+    this.albums = results.albums
+    this.artists = results.artists
+    this.tracks = results.tracks
+    this.trackDataStore = this.trackDataStore.cloneWithRows(this.tracks.map((track) => Object.assign({}, track, { duration: track.duration * 1000 })))
+  }
+}

src/stores/WebSocketStore.js

@@ -6,6 +6,7 @@ export const TEST_IP_ADDRESS = '192.168.1.60'
 export const TEST_PORT = 5672
 
 export default class WebSocketStore {
+  searchStore
   themeStore
   trackStore
   @observable ipAddress
@@ -16,7 +17,8 @@ export default class WebSocketStore {
   @observable lastMessage = null
   shouldReconnect = false
 
-  constructor (trackStore, themeStore, port = TEST_PORT) {
+  constructor (trackStore, themeStore, searchStore, port = TEST_PORT) {
+    this.searchStore = searchStore
     this.trackStore = trackStore
     this.themeStore = themeStore
     this.port = port
@@ -144,6 +146,11 @@ export default class WebSocketStore {
         this.trackStore.updateQueue(payload)
         break
       }
+      case 'search-results': {
+        this.searchStore.setSearchText(payload.searchText)
+        this.searchStore.setSearchResults(payload)
+        break
+      }
       case 'settings:theme': {
         this.themeStore.setThemeEnabled(payload)
         this.trackStore.forceUpdatePlaylists()
@@ -202,6 +209,14 @@ export default class WebSocketStore {
     this._sendMessage({ namespace: 'playback', method: 'toggleRepeat' })
   }
 
+  sendSearch = (searchText) => {
+    this._sendMessage({ namespace: 'search', method: 'performSearch', arguments: [searchText] })
+  }
+
+  sendSearchAndPlayResult = (searchText, result) => {
+    this._sendMessage({ namespace: 'search', method: 'performSearchAndPlayResult', arguments: [searchText, result] })
+  }
+
   sendSetTime = (time) => {
     this._sendMessage({ namespace: 'playback', method: 'setPlaybackTime', arguments: [time] })
     this.trackStore.stop()