remove mobx from search input and results

Author: csepulv

web/src/App.js

@@ -21,8 +21,11 @@ export default observer(class App extends Component {
  return (
  <MuiThemeProvider>
  <div>
- <SearchInput colors={this.props.colors}/>
- <SearchResults colors={this.props.colors}/>
+ <SearchInput query={this.props.colors.query}
+ onQueryUpdate={value => this.props.colors.updateQuery(value)}
+ onSubmit={() => this.props.colors.search()}
+ />
+ <SearchResults colors={this.props.colors.results.slice()}/>
  </div>
  </MuiThemeProvider>
  );

web/src/SearchInput.js

@@ -1,17 +1,18 @@
 import React, {Component} from 'react';
 import {TextField} from 'material-ui';
-import {observer} from 'mobx-react';
 
-export default observer(class SearchInput extends Component {
+export default class SearchInput extends Component {
  static propTypes = {
- colors: React.PropTypes.object.isRequired
+ query: React.PropTypes.string.isRequired,
+ onSubmit: React.PropTypes.func.isRequired,
+ onQueryUpdate: React.PropTypes.func.isRequired
  };
 
  handleKeyDown = (event) => {
  const ENTER_KEY = 13;
  if (event.keyCode === ENTER_KEY) {
  event.preventDefault();
- this.props.colors.search();
+ this.props.onSubmit();
  }
  };
 
@@ -20,9 +21,9 @@ export default observer(class SearchInput extends Component {
  <TextField hintText="Search..."
  floatingLabelFixed={true}
  fullWidth={true}
- value={this.props.colors.query}
- onChange={(event, value) => this.props.colors.updateQuery(value)}
+ value={this.props.query}
+ onChange={(event, value) => this.props.onQueryUpdate(value)}
  onKeyDown={this.handleKeyDown}/>
  )
  }
-});
+}

web/src/SearchResults.js

@@ -1,14 +1,13 @@
 import React, {Component} from 'react';
 import {List, ListItem, Divider} from 'material-ui'
-import {observer} from 'mobx-react';
 
-export default observer(class SearchResults extends Component {
+export default class SearchResults extends Component {
  static propTypes = {
- colors: React.PropTypes.object.isRequired
+ colors: React.PropTypes.array.isRequired
  };
 
  render() {
- const listItems = this.props.colors.results.map((color, index) => {
+ const listItems = this.props.colors.map((color, index) => {
  return (
  <div key={`color-div-${index}`}>
  <ListItem key={`color-${index}`} primaryText={color.name} style={{backgroundColor: color.hex} }/>
@@ -23,4 +22,4 @@ export default observer(class SearchResults extends Component {
  );
  }
 
-});
+}