issue #78 Add suggestion search bar

src/public/components/bar/search.js

@@ -10,6 +10,7 @@ import Form from '../form/default'
 import DialogWindow from '../dialog/default'
 import SearchList from '../list/search'
 import SearchListItem from '../list/item/search'
+import SuggestionInput from '../datalist/suggestion'
 
 export default class SearchBar extends React.Component {
   constructor (props) {
@@ -83,6 +84,8 @@ export default class SearchBar extends React.Component {
   }
 
   search (query) {
+    this.refs.datalist.addItem(query)
+
     this.setState({
       loading: true
     })
@@ -176,7 +179,9 @@ export default class SearchBar extends React.Component {
           ref="input"
           value={this.state.input}
           onChange={ (e) => this.setState({input: e.target.value}) }
-          placeholder="Search, Torrent or Magnet"/>
+          placeholder="Search, Torrent or Magnet"
+          list="search-suggestions"/>
+        <SuggestionInput ref="datalist" id="search-suggestions" />
         <Button style={style.button} text={this.state.status} disabled={this.state.input.length <= 0} />
         <DialogWindow
           open={this.state.dialogOpen}

src/public/components/datalist/index.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+export default class Datalist extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      items: []
+    }
+
+    this.initState(props)
+  }
+
+  initState (props) {
+    Object.assign(this.state, {
+      items: props.items
+    })
+  }
+
+  componentWillReceiveProps (props) {
+    this.initState(props)
+  }
+
+  render () {
+    let items = this.state.items.map((item) => (
+      <option key={item} value={item}/>
+    ))
+    return (
+      <datalist id={this.props.id}>
+        {items}
+      </datalist>
+    )
+  }
+}

src/public/components/datalist/suggestion.js

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import Datalist from './index'
+
+export default class SuggestionInput extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.storageID = '__SearchSuggestions'
+    this.state = {
+      items: []
+    }
+
+    this.initState(props)
+  }
+
+  initState (props) {
+    Object.assign(this.state, {})
+    this.load()
+  }
+
+  componentWillReceiveProps (props) {
+    this.initState(props)
+  }
+
+  addItem (item) {
+    if (this.state.items.indexOf(item) === -1) {
+      let temp = this.state.items
+      temp.push(item)
+
+      this.setState({
+        items: temp
+      })
+
+      this.save()
+    }
+  }
+
+  save () {
+    window.localStorage.setItem(this.storageID, JSON.stringify(this.state.items))
+  }
+
+  load () {
+    try {
+      let stored = JSON.parse(window.localStorage.getItem(this.storageID))
+
+      if (!stored) {
+        throw new Error('LocalStorage empty')
+      }
+
+      this.state.items = JSON.parse(window.localStorage.getItem(this.storageID))
+    } catch (e) {
+      this.state.items = []
+      this.save()
+    }
+  }
+
+  render () {
+    return (
+      <Datalist id={this.props.id} items={this.state.items}/>
+    )
+  }
+}

src/public/components/input/text.js

@@ -19,6 +19,7 @@ export default class TextInput extends React.Component {
           style={Object.assign(style.input, this.props.style.input)}
           type={this.props.type} id={this.props.id}
           onChange={ (e) => this.props.onChange(e) }
+          list={this.props.list}
         />
         <Textfield.Label htmlFor={this.props.id}>
           {this.props.placeholder}