Skip to content

Commit 7e64477

Browse files
csepulvcsepulv
committed
separate web concepts from SearchBox, prepare for mobile/React Native
1 parent 2193d4e commit 7e64477

19 files changed

+206
-161
lines changed

‎common/SearchBox.js‎

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,22 @@
11
import React, {Component} from 'react';
2-
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
32

43
import {observer} from 'mobx-react';
54

6-
// (Make material-ui happy)
7-
// Needed for onTouchTap
8-
// http://stackoverflow.com/a/34015469/988941
9-
import injectTapEventPlugin from 'react-tap-event-plugin';
10-
injectTapEventPlugin();
11-
12-
import SearchInput from './SearchInput';
13-
import SearchResults from './SearchResults';
14-
15-
const SearchBox = (ListItem)=> {
5+
const SearchBox = (SearchFrame, SearchInput, SearchResults) => {
166
return observer(class extends Component {
177
static propTypes = {
188
searchStore: React.PropTypes.object.isRequired
199
};
2010

2111
render() {
2212
return (
23-
<MuiThemeProvider>
24-
<div>
25-
<SearchInput query={this.props.searchStore.query}
26-
onQueryUpdate={value => this.props.searchStore.updateQuery(value)}
27-
onSubmit={() => this.props.searchStore.search()}
28-
/>
29-
<SearchResults ListItem={ListItem} results={this.props.searchStore.results.slice()}/>
30-
</div>
31-
</MuiThemeProvider>
13+
<SearchFrame>
14+
<SearchInput query={this.props.searchStore.query}
15+
onQueryUpdate={value => this.props.searchStore.updateQuery(value)}
16+
onSubmit={() => this.props.searchStore.search()}
17+
/>
18+
<SearchResults results={this.props.searchStore.results.slice()}/>
19+
</SearchFrame>
3220
);
3321
}
3422
});

‎common/SearchResults.js‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎common/WebSearchBox.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
3+
4+
// (Make material-ui happy)
5+
// Needed for onTouchTap
6+
// http://stackoverflow.com/a/34015469/988941
7+
import injectTapEventPlugin from 'react-tap-event-plugin';
8+
injectTapEventPlugin();
9+
10+
import WebSearchInput from './WebSearchInput';
11+
import WebSearchResults from './WebSearchResults';
12+
13+
import SearchBox from './SearchBox'
14+
15+
const WebSearchFrame = ({children}) => {
16+
return (
17+
<MuiThemeProvider>
18+
<div>
19+
{children}
20+
</div>
21+
</MuiThemeProvider>
22+
);
23+
};
24+
25+
const WebSearchBox = ListItem => SearchBox(WebSearchFrame, WebSearchInput, WebSearchResults(ListItem));
26+
27+
export default WebSearchBox

common/SearchBox.test.js renamed to common/WebSearchBox.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import SearchBox from './SearchBox';
2+
import WebSearchBox from './WebSearchBox';
33
import getMuiTheme from 'material-ui/styles/getMuiTheme';
44
import {TextField, ListItem} from 'material-ui'
55

@@ -13,7 +13,7 @@ const mountWithContext = (node) => mount(node, {context: {muiTheme}});
1313

1414
it('shows search results', () => {
1515

16-
const ColorSearchBox = SearchBox(ColorListItem);
16+
const ColorSearchBox = WebSearchBox(ColorListItem);
1717

1818
const wrapper = mountWithContext(<ColorSearchBox searchStore={new Colors()} />);
1919
const textField = wrapper.find(TextField);

web/src/SearchInput.js renamed to common/WebSearchInput.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import {TextField} from 'material-ui';
33

4-
const SearchInput = ({query, onSubmit, onQueryUpdate}) => {
4+
const WebSearchInput = ({query, onSubmit, onQueryUpdate}) => {
55
const handleKeyDown = (event) => {
66
const ENTER_KEY = 13;
77
if (event.keyCode === ENTER_KEY) {
@@ -21,10 +21,10 @@ const SearchInput = ({query, onSubmit, onQueryUpdate}) => {
2121

2222
};
2323

24-
SearchInput.propTypes = {
24+
WebSearchInput.propTypes = {
2525
query: React.PropTypes.string.isRequired,
2626
onSubmit: React.PropTypes.func.isRequired,
2727
onQueryUpdate: React.PropTypes.func.isRequired
2828
};
2929

30-
export default SearchInput;
30+
export default WebSearchInput;

‎common/WebSearchResults.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React, {Component} from 'react';
2+
import {List} from 'material-ui'
3+
4+
const WebSearchResults = ListItem => {
5+
return class extends Component {
6+
static propTypes = {
7+
results: React.PropTypes.array.isRequired
8+
};
9+
10+
render() {
11+
const listItems = this.props.results.map((result, index) => {
12+
return (
13+
<ListItem key={`result-${index}`} result={result}/>
14+
);
15+
});
16+
return (
17+
<List>
18+
{listItems}
19+
</List>
20+
);
21+
};
22+
};
23+
};
24+
25+
export default WebSearchResults;

‎common/webpack.config.js‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,32 +17,23 @@ module.exports = {
1717
new CopyWebpackPlugin([
1818

1919
// {output}/to/file.txt
20-
{from: './colors.js', to: '../../web/src/colors.js'},
2120
{from: './crayola.json', to: '../../web/src/crayola.json'},
22-
{from: './ColorListItem.js', to: '../../web/src/ColorListItem.js'},
23-
{from: './SearchBox.js', to: '../../web/src/SearchBox.js'},
24-
{from: './SearchResults.js', to: '../../web/src/SearchResults.js'},
25-
{from: './SearchInput.js', to: '../../web/src/SearchInput.js'},
26-
27-
{from: './SearchBox.js', to: '../../github-web/src/SearchBox.js'},
28-
{from: './SearchResults.js', to: '../../github-web/src/SearchResults.js'},
29-
{from: './SearchInput.js', to: '../../github-web/src/SearchInput.js'},
30-
21+
{from: './colors.js', to: '../../web/src/colors.js'},
3122

32-
// Copy directory contents to {output}/to/directory/
33-
// { from: 'from/directory', to: 'to/directory' },
23+
{from: './SearchBox.js', to: '../../web/src/'},
24+
{from: './Web*.js', to: '../../web/src/', flatten:true},
3425

35-
// Copy glob results (with dot files) to /absolute/path/
36-
// {
37-
// from: {
38-
// glob:'from/directory/**/*',
39-
// dot: true
40-
// },
41-
// to: '/absolute/path'
42-
// },
26+
{from: './SearchBox.js', to: '../../github-web/src/'},
27+
{from: './Web*.js', to: '../../github-web/src', flatten:true},
4328

4429
], {
4530

31+
ignore: [
32+
// Doesn't copy any files with a txt extension
33+
'*.test.js',
34+
'*.config.js',
35+
],
36+
4637
// By default, we only copy modified files during
4738
// a watch or webpack-dev-server build. Setting this
4839
// to `true` copies all files.

‎github-web/src/SearchBox.js‎

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,22 @@
11
import React, {Component} from 'react';
2-
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
32

43
import {observer} from 'mobx-react';
54

6-
// (Make material-ui happy)
7-
// Needed for onTouchTap
8-
// http://stackoverflow.com/a/34015469/988941
9-
import injectTapEventPlugin from 'react-tap-event-plugin';
10-
injectTapEventPlugin();
11-
12-
import SearchInput from './SearchInput';
13-
import SearchResults from './SearchResults';
14-
15-
const SearchBox = (ListItem)=> {
5+
const SearchBox = (SearchFrame, SearchInput, SearchResults) => {
166
return observer(class extends Component {
177
static propTypes = {
188
searchStore: React.PropTypes.object.isRequired
199
};
2010

2111
render() {
2212
return (
23-
<MuiThemeProvider>
24-
<div>
25-
<SearchInput query={this.props.searchStore.query}
26-
onQueryUpdate={value => this.props.searchStore.updateQuery(value)}
27-
onSubmit={() => this.props.searchStore.search()}
28-
/>
29-
<SearchResults ListItem={ListItem} results={this.props.searchStore.results.slice()}/>
30-
</div>
31-
</MuiThemeProvider>
13+
<SearchFrame>
14+
<SearchInput query={this.props.searchStore.query}
15+
onQueryUpdate={value => this.props.searchStore.updateQuery(value)}
16+
onSubmit={() => this.props.searchStore.search()}
17+
/>
18+
<SearchResults results={this.props.searchStore.results.slice()}/>
19+
</SearchFrame>
3220
);
3321
}
3422
});

‎github-web/src/SearchResults.js‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎github-web/src/WebSearchBox.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
3+
4+
// (Make material-ui happy)
5+
// Needed for onTouchTap
6+
// http://stackoverflow.com/a/34015469/988941
7+
import injectTapEventPlugin from 'react-tap-event-plugin';
8+
injectTapEventPlugin();
9+
10+
import WebSearchInput from './WebSearchInput';
11+
import WebSearchResults from './WebSearchResults';
12+
13+
import SearchBox from './SearchBox'
14+
15+
const WebSearchFrame = ({children}) => {
16+
return (
17+
<MuiThemeProvider>
18+
<div>
19+
{children}
20+
</div>
21+
</MuiThemeProvider>
22+
);
23+
};
24+
25+
const WebSearchBox = ListItem => SearchBox(WebSearchFrame, WebSearchInput, WebSearchResults(ListItem));
26+
27+
export default WebSearchBox

0 commit comments

Comments
 (0)