Skip to content
This repository was archived by the owner on Jul 24, 2018. It is now read-only.

Commit ed64ae4

Browse files
code0wlcode0wl
committed
seperated model out of main
1 parent ca702ab commit ed64ae4

File tree

3 files changed

+81
-80
lines changed

3 files changed

+81
-80
lines changed

‎app/src/filterable-product-table.jsx

Lines changed: 32 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,44 @@
11
import React from 'react';
22
import ProductTable from './components/product-table';
33
import SearchBar from './components/search-bar';
4+
import products from './models/products';
45

56
class FilterableProductTable extends React.Component {
67

7-
constructor() {
8-
super();
8+
constructor() {
9+
super();
910

10-
this.handleUserInput = this.handleUserInput.bind(this);
11+
this.handleUserInput = this.handleUserInput.bind(this);
1112

12-
this.state = {
13-
filterText: '',
14-
inStockOnly: false
13+
this.state = {
14+
filterText: '',
15+
inStockOnly: false
16+
}
17+
}
18+
19+
handleUserInput(filterText, inStockOnly) {
20+
this.setState({
21+
filterText: filterText,
22+
inStockOnly: inStockOnly
23+
});
24+
}
25+
26+
render() {
27+
return (
28+
<div>
29+
<SearchBar
30+
filterText={this.state.filterText}
31+
inStockOnly={this.state.inStockOnly}
32+
onUserInput={this.handleUserInput}
33+
/>
34+
<ProductTable
35+
products={products}
36+
filterText={this.state.filterText}
37+
inStockOnly={this.state.inStockOnly}
38+
/>
39+
</div>
40+
)
1541
}
16-
}
17-
18-
handleUserInput(filterText, inStockOnly) {
19-
this.setState({
20-
filterText: filterText,
21-
inStockOnly: inStockOnly
22-
});
23-
}
24-
25-
render() {
26-
27-
const products = [
28-
{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
29-
{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
30-
{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
31-
{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
32-
{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
33-
{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
34-
];
35-
36-
return (
37-
<div>
38-
<SearchBar
39-
filterText={this.state.filterText}
40-
inStockOnly={this.state.inStockOnly}
41-
onUserInput={this.handleUserInput}
42-
/>
43-
<ProductTable
44-
products={products}
45-
filterText={this.state.filterText}
46-
inStockOnly={this.state.inStockOnly}
47-
/>
48-
</div>
49-
)
50-
}
5142

5243
}
5344

‎app/src/models/products.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const products = [
2+
{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
3+
{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
4+
{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
5+
{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
6+
{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
7+
{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
8+
];
9+
10+
export default products;

‎package.json

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
11
{
2-
"name": "react-example-2015",
3-
"version": "1.0.0",
4-
"description": "React es15 in best practice style.",
5-
"main": "webpack.config.js",
6-
"devDependencies": {
7-
"babel": "^6.5.2",
8-
"babel-core": "^5.8.38",
9-
"babel-loader": "^5.4.0",
10-
"babel-preset-es2015": "^6.6.0",
11-
"css-loader": "^0.15.2",
12-
"cssesc": "^0.1.0",
13-
"flatten": "0.0.1",
14-
"html-webpack-plugin": "^1.6.0",
15-
"http-server": "^0.8.5",
16-
"indexes-of": "^1.0.1",
17-
"node-libs-browser": "^0.5.2",
18-
"react": "^15.0.1",
19-
"react-dom": "^15.0.1",
20-
"react-hot-loader": "^1.3.0",
21-
"style-loader": "^0.12.3",
22-
"webpack": "^1.12.14",
23-
"webpack-dev-server": "^1.14.1",
24-
"webpack-merge": "^0.1.3"
25-
},
26-
"private": false,
27-
"scripts": {
28-
"build": "webpack",
29-
"start": "webpack-dev-server --devtool eval-source --progress --colors --hot --inline --history-api-fallback"
30-
},
31-
"repository": {
32-
"type": "git",
33-
"url": "git+https://github.com/Ositoozy/react-example-es2015.git"
34-
},
35-
"author": "Oscar Lodriguez",
36-
"license": "ISC",
37-
"bugs": {
38-
"url": "https://github.com/Ositoozy/react-example-es2015.git/issues"
39-
},
40-
"homepage": "https://github.com/Ositoozy/react-example-es2015.git#readme"
2+
"name": "react-example-2015",
3+
"version": "1.0.0",
4+
"description": "React es15 in best practice style.",
5+
"main": "webpack.config.js",
6+
"devDependencies": {
7+
"babel": "^6.5.2",
8+
"babel-core": "^5.8.38",
9+
"babel-loader": "^5.4.0",
10+
"babel-preset-es2015": "^6.6.0",
11+
"css-loader": "^0.15.2",
12+
"cssesc": "^0.1.0",
13+
"flatten": "0.0.1",
14+
"html-webpack-plugin": "^1.6.0",
15+
"http-server": "^0.8.5",
16+
"indexes-of": "^1.0.1",
17+
"node-libs-browser": "^0.5.2",
18+
"react": "^15.0.1",
19+
"react-dom": "^15.0.1",
20+
"react-hot-loader": "^1.3.0",
21+
"style-loader": "^0.12.3",
22+
"webpack": "^1.12.14",
23+
"webpack-dev-server": "^1.14.1",
24+
"webpack-merge": "^0.1.3"
25+
},
26+
"private": false,
27+
"scripts": {
28+
"build": "webpack",
29+
"start": "webpack-dev-server --devtool eval-source --progress --colors --hot --inline --history-api-fallback"
30+
},
31+
"repository": {
32+
"type": "git",
33+
"url": "git+https://github.com/Ositoozy/react-example-es2015.git"
34+
},
35+
"author": "Oscar Lodriguez",
36+
"license": "ISC",
37+
"bugs": {
38+
"url": "https://github.com/Ositoozy/react-example-es2015.git/issues"
39+
},
40+
"homepage": "https://github.com/Ositoozy/react-example-es2015.git#readme"
4141
}

0 commit comments

Comments
 (0)