simple extraction/refactoring of search box and results

Author: csepulv

web/src/App.js

@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
-import {TextField, List, ListItem, Divider} from 'material-ui'
 
 import {observer} from 'mobx-react';
 
@@ -10,40 +9,20 @@ import {observer} from 'mobx-react';
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
+import SearchInput from './SearchInput';
+import SearchResults from './SearchResults';
+
 export default observer(class App extends Component {
  static propTypes = {
  colors: React.PropTypes.object.isRequired
  };
 
- handleKeyDown = (event) => {
- const ENTER_KEY = 13;
- if (event.keyCode === ENTER_KEY) {
- event.preventDefault();
- this.props.colors.search();
- }
- };
-
  render() {
- const listItems = this.props.colors.results.map((color, index) => {
- return (
- <div key={`color-div-${index}`}>
- <ListItem key={`color-${index}`} primaryText={color.name} style={{backgroundColor: color.hex} }/>
- <Divider key={`divider-${index}`}/>
- </div>
- );
- });
  return (
  <MuiThemeProvider>
  <div>
- <TextField hintText="Search..."
- floatingLabelFixed={true}
- fullWidth={true}
- value={this.props.colors.query}
- onChange={(event, value) => this.props.colors.updateQuery(value)}
- onKeyDown={this.handleKeyDown}/>
- <List>
- {listItems}
- </List>
+ <SearchInput colors={this.props.colors}/>
+ <SearchResults colors={this.props.colors}/>
  </div>
  </MuiThemeProvider>
  );

web/src/SearchInput.js

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

web/src/SearchResults.js

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