Skip to content

Commit 1fe90fc

Browse files
shorttompkinsshorttompkins
committed
ES6ify the app
Refactor the entire app so its using ES6.
1 parent b20d226 commit 1fe90fc

35 files changed

+664
-197
lines changed

‎README.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# React Sanbox App
2+
3+
The point of this app is to experiment with learning react and setting up a good
4+
base application repo that can be easily forked for new projects down the road.
5+
6+
## Build Process
7+
8+
```bash
9+
$ gulp
10+
$ open http://localhost:1337
11+
```
12+
13+
Runs gulp in watch mode, which will watch for changes and perform a Browserify
14+
transformation process. This includes:
15+
16+
* clean
17+
* browserify
18+
* babel transofmration (for ES6)
19+
* bundling to `app.js`
20+
* watchers

‎client-flux/index.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Single-Page Flux App</title>
6+
</head>
7+
<body>
8+
<script type="text/javascript" src="app.js"></script>
9+
</body>
10+
</html>

‎client-flux/js/actions/actions.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
var AppConstants = require('../constants/constants'),
2+
AppDispatcher = require('../dispatchers/dispatcher');
3+
4+
var AppActions = {
5+
addItem: function(item) {
6+
AppDispatcher.handleViewAction({
7+
actionType: AppConstants.ADD_ITEM,
8+
item: item
9+
});
10+
},
11+
removeItem: function(index) {
12+
AppDispatcher.handleViewAction({
13+
actionType: AppConstants.REMOVE_ITEM,
14+
index: index
15+
});
16+
},
17+
increaseItem: function(index) {
18+
AppDispatcher.handleViewAction({
19+
actionType: AppConstants.INCREASE_ITEM,
20+
index: index
21+
});
22+
},
23+
decreaseItem: function(index) {
24+
AppDispatcher.handleViewAction({
25+
actionType: AppConstants.DECREASE_ITEM,
26+
index: index
27+
});
28+
}
29+
};
30+
31+
module.exports = AppActions;

‎client-flux/js/components/app.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
var React = require('React'),
2+
Catalog = require('./catalog/catalog'),
3+
CatalogDetail = require('./catalog/item'),
4+
Cart = require('./cart/cart'),
5+
Template = require('./layout/template'),
6+
Router = require('react-router-component'),
7+
Locations = Router.Locations,
8+
Location = Router.Location;
9+
10+
var App = React.createClass({
11+
render: function() {
12+
return (
13+
<Template>
14+
<Locations>
15+
<Location path="/" handler={Catalog} />
16+
<Location path="/cart" handler={Cart} />
17+
<Location path="/item/:item" handler={CatalogDetail} />
18+
</Locations>
19+
</Template>
20+
);
21+
}
22+
});
23+
24+
module.exports = App;

‎client-flux/js/components/cart/cart.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
var React = require('react'),
2+
AppStore = require('../../stores/store'),
3+
RemoveFromCart = require('./removefromcart'),
4+
IncreaseItem = require('./increaseitem'),
5+
DecreaseItem = require('./decreaseitem'),
6+
StoreWatch = require('../../mixins/store-watch'),
7+
Link = require('react-router-component').Link;
8+
9+
function cartItems() {
10+
return { items: AppStore.getCart() };
11+
}
12+
13+
var Cart = React.createClass({
14+
mixins: [StoreWatch(cartItems)],
15+
16+
render: function() {
17+
var total = 0;
18+
var items = this.state.items.map(function(item, i) {
19+
var subtotal = item.cost * item.qty;
20+
total += subtotal;
21+
return (
22+
<tr key={item.id}>
23+
<td><RemoveFromCart index={i} /></td>
24+
<td>{item.title}</td>
25+
<td>{item.qty}</td>
26+
<td>
27+
<IncreaseItem index={i} />
28+
<DecreaseItem index={i} />
29+
</td>
30+
<td>${subtotal}</td>
31+
</tr>
32+
);
33+
});
34+
35+
return (
36+
<div>
37+
<table width="100%">
38+
<tbody>
39+
{items}
40+
</tbody>
41+
<tfoot>
42+
<tr>
43+
<td colspan="4" align="right">Total</td>
44+
<td align="right">${total}</td>
45+
</tr>
46+
</tfoot>
47+
</table>
48+
<Link href="/">Continue Shopping</Link>
49+
</div>
50+
);
51+
}
52+
});
53+
54+
module.exports = Cart;

‎client-flux/js/components/cart/decreaseitem.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
var React = require('React'),
2+
AppActions = require('../../actions/actions');
3+
4+
var DecreaseItem = React.createClass({
5+
propTypes: {
6+
index: React.PropTypes.number
7+
},
8+
handler: function() {
9+
AppActions.decreaseItem(this.props.index);
10+
},
11+
render: function() {
12+
return <button onClick={ this.handler }>-</button>;
13+
}
14+
});
15+
16+
module.exports = DecreaseItem;

‎client-flux/js/components/cart/increaseitem.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
var React = require('React'),
2+
AppActions = require('../../actions/actions');
3+
4+
var IncreaseItem = React.createClass({
5+
propTypes: {
6+
index: React.PropTypes.number
7+
},
8+
handler: function() {
9+
AppActions.increaseItem(this.props.index);
10+
},
11+
render: function() {
12+
return <button onClick={ this.handler }>+</button>;
13+
}
14+
});
15+
16+
module.exports = IncreaseItem;

‎client-flux/js/components/cart/removefromcart.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
var React = require('React'),
2+
AppActions = require('../../actions/actions');
3+
4+
var RemmoveFromCart = React.createClass({
5+
propTypes: {
6+
index: React.PropTypes.number
7+
},
8+
handler: function() {
9+
AppActions.removeItem(this.props.index);
10+
},
11+
render: function() {
12+
return <button onClick={ this.handler }>x</button>;
13+
}
14+
});
15+
16+
module.exports = RemmoveFromCart;

‎client-flux/js/components/catalog/addtocart.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
var React = require('React'),
2+
AppActions = require('../../actions/actions');
3+
4+
var AddToCart = React.createClass({
5+
propTypes: {
6+
item: React.PropTypes.object
7+
},
8+
handler: function() {
9+
AppActions.addItem(this.props.item);
10+
},
11+
render: function() {
12+
return (
13+
<button onClick={ this.handler }>
14+
Add To Cart
15+
</button>
16+
);
17+
}
18+
});
19+
20+
module.exports = AddToCart;

‎client-flux/js/components/catalog/catalog.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
var React = require('react'),
2+
AppStore = require('../../stores/store'),
3+
AddToCart = require('./addtocart');
4+
5+
function getCatalog() {
6+
return { items: AppStore.getCatalog() };
7+
}
8+
9+
var Catalog = React.createClass({
10+
getInitialState: function() {
11+
return getCatalog();
12+
},
13+
14+
render: function() {
15+
var items = this.state.items.map(function(item){
16+
return (
17+
<tr key={item.id}>
18+
<td>{item.title}</td>
19+
<td>${item.cost}</td>
20+
<td><AddToCart item={item} /></td>
21+
</tr>
22+
);
23+
});
24+
return (
25+
<table width="100%">
26+
{items}
27+
</table>
28+
);
29+
}
30+
});
31+
32+
module.exports = Catalog;

‎client/js/components/catalog/item.js renamed to ‎client-flux/js/components/catalog/item.js

File renamed without changes.

‎client-flux/js/components/layout/header.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
var React = require('react'),
2+
Link = require('react-router-component').Link;
3+
4+
var Header = React.createClass({
5+
render: function() {
6+
return (
7+
<div>
8+
<h1>Lets Shop</h1>
9+
<Link href="/cart">
10+
View Shopping Cart
11+
</Link>
12+
</div>
13+
);
14+
}
15+
});
16+
17+
module.exports = Header;

‎client-flux/js/components/layout/template.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var React = require('react'),
2+
Header = require('./header');
3+
4+
var Template = React.createClass({
5+
propTypes: {
6+
children: React.PropTypes.array
7+
},
8+
render: function() {
9+
return (
10+
<div>
11+
<Header />
12+
{this.props.children}
13+
</div>
14+
);
15+
}
16+
});
17+
18+
module.exports = Template;

‎client-flux/js/constants/constants.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
ADD_ITEM: 'ADD_ITEM',
3+
REMOVE_ITEM: 'REMOVE_ITEM',
4+
INCREASE_ITEM: 'INCREASE_ITEM',
5+
DECREASE_ITEM: 'DECREASE_ITEM'
6+
};

‎client-flux/js/dispatchers/dispatcher.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
var Dispatcher = require('flux').Dispatcher,
2+
assign = require('react/lib/Object.assign');
3+
4+
var AppDispatcher = assign(new Dispatcher(), {
5+
handleViewAction: function(action) {
6+
console.log('action:', action);
7+
this.dispatch({
8+
source: 'VIEW_ACTION',
9+
action: action
10+
});
11+
}
12+
});
13+
14+
module.exports = AppDispatcher;

‎client-flux/js/main.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
(function () {
2+
var React = require('react'),
3+
App = require('./components/app');
4+
5+
//Needed for React Developer Tools
6+
window.React = React;
7+
8+
React.render(<App />, document.body);
9+
})();

‎client-flux/js/mixins/store-watch.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
var React = require('react'),
2+
AppStore = require('../stores/store');
3+
4+
var StoreWatch = function(cb) {
5+
return {
6+
getInitialState: function() {
7+
return cb();
8+
},
9+
componentWillMount: function() {
10+
AppStore.addChangeListener(this._onChange);
11+
},
12+
componentWillUnmount: function() {
13+
AppStore.removeChangeListener(this._onChange);
14+
},
15+
_onChange: function() {
16+
this.setState(cb());
17+
}
18+
};
19+
};
20+
21+
module.exports = StoreWatch;

0 commit comments

Comments
 (0)