Skip to content

Commit 05bf150

Browse files
indiTechCoderindiTechCoder
committed
section 08 added
1 parent 9d3410e commit 05bf150

File tree

43 files changed

+1179
-26
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1179
-26
lines changed

‎Section-06-React ES6 Apps/React-JS-ES6-todo/src/components/create-todo.js

+1-4
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,10 @@ export default class TodosList extends React.Component {
88
error: null
99
};
1010
}
11-
1211
renderError() {
1312
if (!this.state.error) { return null; }
14-
1513
return <div style={{ color: 'red' }}>{this.state.error}</div>;
1614
}
17-
1815
render() {
1916
return (
2017
<form onSubmit={this.handleCreate.bind(this)}>
@@ -29,7 +26,7 @@ export default class TodosList extends React.Component {
2926
event.preventDefault();
3027

3128
const createInput = this.refs.createInput;
32-
const task = createInput.value;
29+
const task = event.target.value;
3330
const validateInput = this.validateInput(task);
3431

3532
if (validateInput) {

‎Section-06-React ES6 Apps/ReactRouter-App with Gulp ES6/public/assets/js/bundle.js.map

+491
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Section-06.1-React Flux & ES6 Apps/React Flux Starter App/app/app-action.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
var AppDispatcher = require('dispatcher');
2+
3+
var AppAction = {
4+
addItem : function(item){
5+
AppDispatcher.dispatch({
6+
actionType : AppConstant.ADD_ITEM,
7+
item : item
8+
})
9+
},
10+
removeItem : function(index){
11+
AppDispatcher.dispatch({
12+
actionType : AppConstant.REMOVE_ITEM,
13+
index : index
14+
})
15+
},
16+
increaseItem : function(index){
17+
AppDispatcher.dispatch({
18+
actionType : AppConstant.INC_ITEM,
19+
index : index
20+
})
21+
},
22+
decreaseItem : function(index){
23+
AppDispatcher.dispatch({
24+
actionType : AppConstant.DEC_ITEM,
25+
index : index
26+
})
27+
}
28+
29+
}

‎Section-06.1-React Flux & ES6 Apps/React Flux Starter App/app/app-constants.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.export = {
2+
ADD_ITEM : 'ADD_ITEM',
3+
REMOVE_ITEM : 'REMOVE_ITEM',
4+
INC_ITEM : 'INC_ITEM',
5+
DEC_ITEM : 'DEC_ITEM'
6+
}

‎Section-06.1-React Flux & ES6 Apps/React Flux Starter App/app/app-store.js

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
var AppDispatcher = require('dispatcher');
2+
var AppConstant = require('app-constants');
3+
var assign = require('object-assign');
4+
5+
var EeventEmitter = require('events').EventEmitter;
6+
7+
var CHANGE_EVENT = "change";
8+
var _catalog = [];
9+
10+
for(var i = 1;i<5;i++){
11+
_catalog.push({
12+
'id' : 'cart'+i,
13+
'title' : 'Title Product',
14+
'details' : 'Title Product',
15+
'description' : 'Title Product',
16+
'cost' : i
17+
})
18+
}
19+
var _cartItem = [];
20+
fucntion _addItem(item){
21+
if(! item.inCart){
22+
item['qty'] = 1;
23+
item['inCart'] = true ;
24+
_cartItem.push(item);
25+
}
26+
else{
27+
_cartItem.forEach(function(cartItem, index){
28+
if(cartItem.index == item.id){
29+
__incItem(index);
30+
}
31+
});
32+
}
33+
}
34+
function _removeItem(index){
35+
_cartItem[index].inCart = false;
36+
_cartItem.splice(index, 1);
37+
}
38+
function _incItem(index){
39+
_cartItem[index].qty ++;
40+
}
41+
function _decItem(index){
42+
if(_cartItem[index].qty > 1){
43+
_cartItem[index].qty -- ;
44+
}
45+
else{
46+
_removeItem(index);
47+
}
48+
}
49+
function _cartTotal(){
50+
var qty = 0 , total = 0;
51+
_cartItem.array.forEach( function(cartItem) {
52+
qty += cartItem.qty;
53+
total +=cartItem.qty * cartItem.cost;
54+
});
55+
return {'qty' : qty , 'total': total}
56+
}
57+
AppDispatcher.register(function(payload){
58+
var action = payload.actionType;
59+
switch(action){
60+
case AppConstant.ADD_ITEM :
61+
_addItem(item)
62+
//emit change-event and notify app
63+
break;
64+
case AppConstant.REMOVE_ITEM :
65+
_removeItem(payload.index)
66+
break;
67+
case AppConstant.INC_ITEM :
68+
_incItem(payload.index)
69+
break;
70+
case AppConstant.DEC_ITEM :
71+
_decItem(payload.index)
72+
break;
73+
default :
74+
}
75+
})
76+
77+
Var AppStore = assign(EventEmitter.prototype, {
78+
79+
emitChnage : function(){
80+
this.emitChange(CHANGE_CHANGE)
81+
},
82+
addChangeListener : function(callabck){
83+
this.on(CHANGE_EVENT,callback)
84+
},
85+
getCart : function(){
86+
return _cartItem;
87+
},
88+
getCatalog : function(){
89+
return _catalog;
90+
},
91+
getCartTotal : function(){
92+
return _cartTotal();
93+
}
94+
95+
})

‎Section-06.1-React Flux & ES6 Apps/React Flux Starter App/app/components/AddtoCart.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var React = require('react')
2+
var ReactDOM = require('react-dom')
3+
var AppStore = require('AppStore');
4+
var AppAction = require('AppAction');
5+
6+
var AddtoCart = React.createClass({
7+
handler : function(){
8+
AppAction.additem(this.props.item);
9+
},
10+
render: function() {
11+
return (<div><button onClick={this.handler} >AddToCart</button>
12+
<div>);
13+
}
14+
});
15+
16+
17+
module.export = AddtoCart;
18+

‎Section-06.1-React Flux & ES6 Apps/React Flux Starter App/app/components/Cart.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
var React = require('react')
2+
var ReactDOM = require('react-dom')
3+
var AppStore = require('AppStore');
4+
5+
function getCart(){
6+
return {items : AppStore.getCarts()};
7+
}
8+
var Cart = React.createClass({
9+
getInitialState : function(){
10+
return getCart();
11+
},
12+
componnetDidMount : function(){
13+
AppStore.addChangeListerner(this._onChange);
14+
},
15+
componnetWillUnMount : function(){
16+
AppStore.removeChangeListerner(this._onChange);
17+
}
18+
});
19+

‎Section-06.1-React Flux & ES6 Apps/React Flux Starter App/app/components/Increse.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
var React = require('react')
2+
var ReactDOM = require('react-dom')
3+
var AppStore = require('AppStore');
4+
5+
var Increase = React.createClass({
6+
handler : function(){
7+
AppAction.Incitem(this.props.index);
8+
},
9+
render: function() {
10+
return (<div><button onClick={this.handler} >+ </button>
11+
<div>);
12+
}
13+
});
14+
15+
16+
module.export = Increase;
17+

‎Section-06.1-React Flux & ES6 Apps/React Flux Starter App/app/components/RemoveFromCart.js

Whitespace-only changes.

‎Section-06.1-React Flux & ES6 Apps/React Flux Starter App/app/components/app-cart.js

Whitespace-only changes.

‎Section-06.1-React Flux & ES6 Apps/React Flux Starter App/app/components/catalog.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
var React = require('react')
2+
var ReactDOM = require('react-dom')
3+
var AppStore = require('AppStore');
4+
5+
function getCatalog(){
6+
return {items : AppStore.getCatalog()};
7+
}
8+
var Catalog = React.createClass({
9+
10+
getInitialState : function(){
11+
return getCatalog();
12+
}
13+
render: function() {
14+
var itemsRow = this.state.items.map(function(item){
15+
return (<tr key={item.id}>
16+
<td>{item.id}</td> <td>{item.cost}</td>
17+
<td><AddtoCart item={item}></td>
18+
</tr>);
19+
})
20+
21+
return (<div><table><tbody>{itemsRow}</tbody></table>
22+
<div>);
23+
}
24+
});
25+

‎Section-06.1-React Flux & ES6 Apps/React Flux Starter App/app/dispatcher.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
var Dispatcher = require('flux').Dispatcher ;
2+
3+
export default new Dispatcher();

‎Section-06.1-React Flux & ES6 Apps/React Flux Starter App/gulpfile.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
var gulp = require('gulp');
2+
var browserify = require('browserify');
3+
var reactify = require('reactify');
4+
var source = require('vinyl-source-stream');
5+
var uglify = require('gulp-uglify');
6+
var concat = require('gulp-concat');
7+
var minify = require('gulp-minify-css');
8+
9+
gulp.task('browserify', function() {
10+
browserify('./src/js/main.js') // ES6 only
11+
.transform('reactify') // es6 TO es5
12+
.bundle()
13+
.pipe(source('main.js'))
14+
.pipe(gulp.dest('dist/js'));
15+
});
16+
17+
gulp.task('copy',function() {
18+
gulp.src('src/index.html')
19+
.pipe(gulp.dest('dist'));
20+
21+
gulp.src('src/assets/**/*.*')
22+
.pipe(gulp.dest('dist/assets'));
23+
});
24+
25+
gulp.task('css', function(){
26+
gulp.src('./src/css/*.css')
27+
.pipe(concat('style.css'))
28+
.pipe(minify({ keepBreaks: true }))
29+
.pipe(gulp.dest('dist/css/'));
30+
31+
});
32+
33+
gulp.task('default',['browserify', 'copy' , 'css'], function() {
34+
gulp.watch('src/**/*.*', ['browserify', 'copy','css'])
35+
});
36+
37+
//gulp

‎Section-07 React ES6 Flux Apps/GitHub NoteTaker App Flux/dist/main.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.cushion4,.cushion5,.cushion7{margin:10px 0}
2+
body,html{margin:0;padding:0;width:100%;height:100%}
3+
.inner-container{padding:60px 15px 0}
4+
.cushion2,.cushion3{margin:10px 0}

‎Section-07 React ES6 Flux Apps/GitHub NoteTaker App Flux/dist/style.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body,html{margin:0;padding:0;width:100%;height:100%}
2+
.inner-container{padding:60px 15px 0}
3+
.cushion{margin:10px 0}

‎Section-07 React ES6 Flux Apps/GitHub NoteTaker App Flux/dist/styles.css

+7
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,11 @@ html,body{
1111

1212
.cushion {
1313
margin: 10px 0;
14+
}
15+
.cushion1 {
16+
margin: 10px 0;
17+
}.cushion2 {
18+
margin: 10px 0;
19+
}.cushion3 {
20+
margin: 10px 0;
1421
}

‎Section-07 React ES6 Flux Apps/GitHub NoteTaker App Flux/gulpfile.js

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
var gulp = require('gulp');
22
var browserify = require('gulp-browserify');
33
var concat = require('gulp-concat');
4+
var uglify = require('gulp-uglify');
5+
var minify = require('gulp-minify-css');
46

57
var SRC = 'src/js/main.js';
8+
var CSS_SRC = './src/css/*.css'
69
var OUT = 'build.js';
710
var DEST = 'dist/js';
811

912
gulp.task('build', function(){
10-
gulp.src(SRC)
11-
.pipe(browserify({transform: 'reactify'}))
13+
gulp.src(SRC)
14+
15+
.pipe(browserify({transform: 'reactify'})) // bundeling & transforming
1216
.pipe(concat(OUT))
1317
.pipe(gulp.dest(DEST));
1418
});
@@ -19,12 +23,13 @@ gulp.task('copyIndex', function(){
1923
});
2024

2125
gulp.task('copyCSS', function(){
22-
gulp.src('src/styles.css')
26+
gulp.src('./src/css/*.css')
27+
.pipe(concat('main.css'))
28+
.pipe(minify({ keepBreaks: true }))
2329
.pipe(gulp.dest('dist'));
2430
});
2531

2632
gulp.task('default', ['build', 'copyIndex', 'copyCSS']);
27-
2833
gulp.task('watch', function(){
2934
gulp.watch('src/**/*.*', ['default']);
3035
});

‎Section-07 React ES6 Flux Apps/GitHub NoteTaker App Flux/package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@
3737
"firebase": "^2.0.6",
3838
"flux": "^2.0.1",
3939
"react": "^0.12.1",
40-
"react-router": "^0.11.6"
40+
"react-router": "^0.11.6",
41+
"gulp-uglify":"*",
42+
"gulp-minify-css":"*"
4143
}
4244
}

‎Section-07 React ES6 Flux Apps/GitHub NoteTaker App Flux/src/css/style1.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
margin: 10px 0;
3+
}.cushion4 {
4+
margin: 10px 0;
5+
}.cushion5 {
6+
margin: 10px 0;
7+
}
8+
9+
.cushion5 {
10+
margin: 10px 0;
11+
}
12+
.cushion7 {
13+
margin: 10px 0;
14+
}

‎Section-07 React ES6 Flux Apps/GitHub NoteTaker App Flux/src/css/style2.css

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
html,body{
2+
margin: 0;
3+
padding: 0;
4+
width: 100%;
5+
height: 100%;
6+
}
7+
8+
.inner-container {
9+
padding: 60px 15px 0;
10+
}
11+
12+
margin: 10px 0;
13+
}.cushion2 {
14+
margin: 10px 0;
15+
}.cushion3 {
16+
margin: 10px 0;
17+
}

0 commit comments

Comments
 (0)