Skip to content

Commit b8ff122

Browse files
shorttompkinsshorttompkins
committed
Initial commit
1 parent 0a900c6 commit b8ff122

26 files changed

+543
-21
lines changed

‎.eslintrc

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"rules": {
3+
"indent": [2,2, {"VariableDeclarator": 2}],
4+
"quotes": [
5+
2,
6+
"single"
7+
],
8+
"linebreak-style": [
9+
2,
10+
"unix"
11+
],
12+
"semi": [
13+
2,
14+
"always"
15+
]
16+
},
17+
"env": {
18+
"es6": true,
19+
"browser": true,
20+
"commonjs": true
21+
},
22+
"extends": "eslint:recommended",
23+
"ecmaFeatures": {
24+
"modules": true,
25+
"jsx": true,
26+
"experimentalObjectRestSpread": true
27+
},
28+
"plugins": [
29+
"react"
30+
]
31+
}

‎client-basic/components/app.jsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
var React = require('React'),
2+
People = require('./people.jsx');
3+
4+
module.exports = React.createClass({
5+
render: function() {
6+
return (
7+
<div>
8+
Hello world!
9+
<hr />
10+
<People />
11+
</div>
12+
)
13+
}
14+
});

‎client-basic/components/people.jsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
var React = require('React'),
2+
_ = require('lodash'),
3+
Person = require('./person.jsx');
4+
5+
var MyMixins = {
6+
getInitialState: function() {
7+
return {
8+
people: []
9+
}
10+
},
11+
12+
addPerson: function(e) {
13+
this.setState({
14+
people: this.state.people.concat(this.refs.person.getDOMNode().value)
15+
});
16+
}
17+
};
18+
19+
module.exports = React.createClass({
20+
21+
mixins: [MyMixins],
22+
23+
render: function() {
24+
return (
25+
<div>
26+
<input type="text" ref="person" placeholder="Enter a person" /> <button onClick={ this.addPerson }>Add</button>
27+
<br/>
28+
<ul>
29+
{
30+
_.map(this.state.people, function(person, i) {
31+
return (
32+
<Person name={ person } key={ i } />
33+
)
34+
})
35+
}
36+
</ul>
37+
</div>
38+
)
39+
}
40+
});

‎client-basic/components/person.jsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
var React = require('React');
2+
3+
module.exports = React.createClass({
4+
propTypes: {
5+
name: React.PropTypes.string
6+
},
7+
getDefaultProps: function() {
8+
return {
9+
name: ''
10+
}
11+
},
12+
logName: function(e) {
13+
console.log(e.target.innerText);
14+
},
15+
render: function() {
16+
return (
17+
<li onClick={ this.logName }>{ this.props.name }</li>
18+
)
19+
}
20+
});

‎client/www/index.html renamed to ‎client-basic/index.html

File renamed without changes.

‎client/index.js renamed to ‎client-basic/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
//Needed for React Developer Tools
66
window.React = React;
77

8-
// Render the main app react component into the document body.
8+
// Render the main app react component into the document body.
99
// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
10-
React.render(React.createElement(App), document.body);
11-
})();
10+
React.render(<App />, document.body);
11+
})();

‎client/components/app.jsx

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

‎client/index.html

Lines changed: 10 additions & 0 deletions
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/js/actions/actions.js

Lines changed: 31 additions & 0 deletions
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/js/components/app.js

Lines changed: 24 additions & 0 deletions
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/js/components/cart/cart.js

Lines changed: 54 additions & 0 deletions
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/js/components/cart/decreaseitem.js

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

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

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

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

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

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

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

‎client/js/components/catalog/catalog.js

Lines changed: 32 additions & 0 deletions
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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
var React = require('react');
2+
3+
var CartItem = React.createClass({
4+
5+
render: function() {
6+
return null;
7+
}
8+
});
9+
10+
module.exports = CartItem;

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

Lines changed: 17 additions & 0 deletions
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;

0 commit comments

Comments
 (0)