moved to common, webpack to copy files

Author: csepulv

common/SearchBox.js

@@ -0,0 +1,34 @@
+import React, {Component} from 'react';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+
+import {observer} from 'mobx-react';
+
+// (Make material-ui happy)
+// Needed for onTouchTap
+// http://stackoverflow.com/a/34015469/988941
+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 = {
+ searchStore: React.PropTypes.object.isRequired
+ };
+
+ render() {
+ return (
+ <MuiThemeProvider>
+ <div>
+ <SearchInput query={this.props.searchStore.query}
+ onQueryUpdate={value => this.props.searchStore.updateQuery(value)}
+ onSubmit={() => this.props.searchStore.search()}
+ />
+ <SearchResults results={this.props.searchStore.results.slice()}/>
+ </div>
+ </MuiThemeProvider>
+ );
+ }
+});
+

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import {TextField} from 'material-ui';
+
+const SearchInput = ({query, onSubmit, onQueryUpdate}) => {
+ const handleKeyDown = (event) => {
+ const ENTER_KEY = 13;
+ if (event.keyCode === ENTER_KEY) {
+ event.preventDefault();
+ onSubmit();
+ }
+ };
+
+ return (
+ <TextField hintText="Search..."
+ floatingLabelFixed={true}
+ fullWidth={true}
+ value={query}
+ onChange={(event, value) => onQueryUpdate(value)}
+ onKeyDown={handleKeyDown}/>
+ );
+
+};
+
+SearchInput.propTypes = {
+ query: React.PropTypes.string.isRequired,
+ onSubmit: React.PropTypes.func.isRequired,
+ onQueryUpdate: React.PropTypes.func.isRequired
+};
+
+export default SearchInput;

common/SearchInput.js

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

common/SearchResults.js

@@ -0,0 +1,21 @@
+import {extendObservable, runInAction} from 'mobx';
+import crayola from './crayola.json'
+
+export default class Colors {
+ constructor() {
+ extendObservable(this, {
+ results: [],
+ query: ''
+ });
+ }
+
+ search() {
+ runInAction(() => {
+ this.results = crayola.filter(color => color.name.toLowerCase().includes(this.query.toLowerCase()));
+ });
+ }
+
+ updateQuery(value) {
+ runInAction(() => this.query = value);
+ }
+}