rename App to SearchBox, rename props

Author: csepulv

web/src/App.js web/src/SearchBox.jsweb/src/App.js renamed to web/src/SearchBox.js

@@ -14,18 +14,18 @@ import SearchResults from './SearchResults';
 
 export default observer(class App extends Component {
  static propTypes = {
- colors: React.PropTypes.object.isRequired
+ searchStore: React.PropTypes.object.isRequired
  };
 
  render() {
  return (
  <MuiThemeProvider>
  <div>
- <SearchInput query={this.props.colors.query}
- onQueryUpdate={value => this.props.colors.updateQuery(value)}
- onSubmit={() => this.props.colors.search()}
+ <SearchInput query={this.props.searchStore.query}
+ onQueryUpdate={value => this.props.searchStore.updateQuery(value)}
+ onSubmit={() => this.props.searchStore.search()}
  />
- <SearchResults colors={this.props.colors.results.slice()}/>
+ <SearchResults results={this.props.searchStore.results.slice()}/>
  </div>
  </MuiThemeProvider>
  );

web/src/App.test.js web/src/SearchBox.test.jsweb/src/App.test.js renamed to web/src/SearchBox.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import App from './App';
+import App from './SearchBox';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import {TextField, ListItem} from 'material-ui'
 
@@ -11,7 +11,7 @@ const muiTheme = getMuiTheme();
 const mountWithContext = (node) => mount(node, {context: {muiTheme}});
 
 it('shows search results', () => {
- const wrapper = mountWithContext(<App colors={new Colors()} />);
+ const wrapper = mountWithContext(<App searchStore={new Colors()} />);
  const textField = wrapper.find(TextField);
  textField.props().onChange(null, 'Blue G');
  textField.props().onKeyDown({

web/src/SearchResults.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import {List, ListItem, Divider} from 'material-ui'
 
-const SearchResults = ({colors}) => {
- const listItems = colors.map((color, index) => {
+const SearchResults = ({results}) => {
+ const listItems = results.map((result, index) => {
  return (
- <div key={`color-div-${index}`}>
- <ListItem key={`color-${index}`} primaryText={color.name} style={{backgroundColor: color.hex} }/>
+ <div key={`result-div-${index}`}>
+ <ListItem key={`result-${index}`} primaryText={result.name} style={{backgroundColor: result.hex} }/>
  <Divider key={`divider-${index}`}/>
  </div>
  );
@@ -18,7 +18,7 @@ const SearchResults = ({colors}) => {
 };
 
 SearchResults.propTypes = {
- colors: React.PropTypes.array.isRequired
+ results: React.PropTypes.array.isRequired
 };
 
 export default SearchResults;

web/src/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import App from './SearchBox';
 import './index.css';
 
 import Colors from './colors'
 
 ReactDOM.render(
- <App colors={new Colors()}/>,
+ <App searchStore={new Colors()}/>,
  document.getElementById('root')
 );