Skip to content

Commit 60b2c94

Browse files
neerajsingh0101neerajsingh0101
committed
Merge pull request #12 from bigbinary/emit
ep 29 - Emit change work
2 parents 9cfb227 + d8e4e0d commit 60b2c94

File tree

18 files changed

+727
-25
lines changed

18 files changed

+727
-25
lines changed

‎ep28-more-dispatcher-usage/app/actions/TodoActions.js

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,55 @@
11
var api = require("../utils/api");
22
var TodoStore = require("../stores/TodoStore");
33
var AppDispatcher = require('../dispatcher/AppDispatcher');
4+
var Constants = require("../utils/constants");
45

56
var TodoActions = {
67

78
addTodo: (todo) => {
8-
console.log("adding TODO");
99
api.addTodo(todo)
1010
.then( () => {
11-
console.log("Added TODO successfully");
1211
TodoActions.getAllTodosAndUpdateStore();
1312
})
1413
},
1514

1615
deleteTodo: (todo) => {
17-
console.log("Deleting TODO");
1816
api.deleteTodo(todo.id)
1917
.then( () => {
20-
console.log("Deleted TODO successfully");
2118
AppDispatcher.dispatch({
22-
actionType: 'TODO_DELETE',
19+
actionType: Constants.TODO_DELETE,
2320
todo: todo
2421
});
2522
})
2623
},
2724

2825
markTodoDone: (todo) => {
29-
console.log("Marking TODO as done");
3026
api.markTodoDone(todo)
3127
.then( () => {
32-
console.log("marked TODO as done successfully");
3328
AppDispatcher.dispatch({
34-
actionType: 'TODO_DONE',
29+
actionType: Constants.TODO_DONE,
3530
todo: todo
3631
});
3732

3833
})
3934
},
4035

4136
markTodoUnDone: (todo) => {
42-
console.log("Marking TODO as undone");
4337
api.markTodoUnDone(todo)
4438
.then( () => {
45-
console.log("marked TODO as undone successfully");
4639
AppDispatcher.dispatch({
47-
actionType: 'TODO_UNDONE',
40+
actionType: Constants.TODO_UNDONE,
4841
todo: todo
4942
});
5043
})
5144
},
5245

5346
getAllTodosAndUpdateStore: () => {
54-
console.log("Performing getAllTodos");
5547
api.getTodos()
5648
.then( (responseData) => {
5749
var todos = responseData.todos;
58-
console.log("new todos", todos);
5950
TodoStore.setTodos(todos);
6051
AppDispatcher.dispatch({
61-
actionType: 'TODO_ADD'
52+
actionType: Constants.TODO_ADD
6253
});
6354
})
6455
}

‎ep28-more-dispatcher-usage/app/components/App.jsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ export default class App extends React.Component {
1111
constructor () {
1212
super();
1313
this.state = { title: '', todos: [] };
14-
1514
this.getAllTodos();
1615
}
1716

‎ep28-more-dispatcher-usage/app/components/DisplayList.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ export default class DisplayList extends React.Component {
1010
<DisplayItem
1111
todo={todo} />
1212
</section>
13-
}) }
13+
})
14+
}
1415
</ul>
1516
}
1617

‎ep28-more-dispatcher-usage/app/stores/TodoStore.js

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
11
var AppDispatcher = require('../dispatcher/AppDispatcher');
2+
var Constants = require("../utils/constants");
23

34
AppDispatcher.register(function(action) {
45

56
switch(action.actionType) {
6-
case 'TODO_DONE':
7-
console.log("Handling TODO_DONE using dispatcher in store");
7+
case Constants.TODO_DONE:
88
TodoStore.markTodoDone(action.todo);
99
break;
1010

11-
case 'TODO_UNDONE':
12-
console.log("Handling TODO_UNDONE using dispatcher in store");
11+
case Constants.TODO_UNDONE:
1312
TodoStore.markTodoUnDone(action.todo);
1413
break;
1514

16-
case 'TODO_DELETE':
17-
console.log("Handling TODO_DELETE using dispatcher in store");
15+
case Constants.TODO_DELETE:
1816
TodoStore.deleteTodo(action.todo);
1917
break;
2018

21-
case 'TODO_ADD':
22-
console.log("Handling TODO_ADD using dispatcher in store");
19+
case Constants.TODO_ADD:
2320
TodoStore.getTodos();
2421
break;
2522
}

‎ep28-more-dispatcher-usage/app/utils/constants.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
var Constants = {
22
BASE_URL: "http://lrjis-api-production.herokuapp.com/api/v1/",
3-
API_KEY: "4d5e466a-97a4-46ba-bb3d-3da6c4347965"
3+
API_KEY: "4d5e466a-97a4-46ba-bb3d-3da6c4347965",
4+
TODO_DONE: 'TODO_DONE',
5+
TODO_UNDONE: 'TODO_UNDONE',
6+
TODO_DELETE: 'TODO_DELETE',
7+
TODO_ADD: 'TODO_ADD'
48
};
9+
510
module.exports = Constants;

‎ep29-emit/README.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
#### Setting up the application
2+
3+
```
4+
npm install
5+
npm start
6+
```
7+
8+
Visit http://localhost:8080 in browser.
9+
10+
#### Notes
11+
12+
* [Nodejs Events](https://nodejs.org/api/events.html)
13+
* [object-assign](https://www.npmjs.com/package/object-assign)
14+
* `npm install --save object-assign`
15+
* [Source code](...)

‎ep29-emit/app/actions/TodoActions.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
var api = require("../utils/api");
2+
var TodoStore = require("../stores/TodoStore");
3+
var AppDispatcher = require('../dispatcher/AppDispatcher');
4+
5+
var TodoActions = {
6+
7+
addTodo: (todo) => {
8+
console.log("adding TODO");
9+
api.addTodo(todo)
10+
.then( () => {
11+
console.log("Added TODO successfully");
12+
TodoActions.getAllTodosAndUpdateStore();
13+
})
14+
},
15+
16+
deleteTodo: (todo) => {
17+
console.log("Deleting TODO");
18+
api.deleteTodo(todo.id)
19+
.then( () => {
20+
console.log("Deleted TODO successfully");
21+
AppDispatcher.dispatch({
22+
actionType: 'TODO_DELETE',
23+
todo: todo
24+
});
25+
})
26+
},
27+
28+
markTodoDone: (todo) => {
29+
console.log("Marking TODO as done");
30+
api.markTodoDone(todo)
31+
.then( () => {
32+
console.log("marked TODO as done successfully");
33+
AppDispatcher.dispatch({
34+
actionType: 'TODO_DONE',
35+
todo: todo
36+
});
37+
38+
})
39+
},
40+
41+
markTodoUnDone: (todo) => {
42+
console.log("Marking TODO as undone");
43+
api.markTodoUnDone(todo)
44+
.then( () => {
45+
console.log("marked TODO as undone successfully");
46+
AppDispatcher.dispatch({
47+
actionType: 'TODO_UNDONE',
48+
todo: todo
49+
});
50+
})
51+
},
52+
53+
getAllTodosAndUpdateStore: () => {
54+
console.log("Performing getAllTodos");
55+
api.getTodos()
56+
.then( (responseData) => {
57+
var todos = responseData.todos;
58+
console.log("new todos", todos);
59+
TodoStore.setTodos(todos);
60+
AppDispatcher.dispatch({
61+
actionType: 'TODO_ADD'
62+
});
63+
})
64+
}
65+
66+
}
67+
68+
module.exports = TodoActions;

‎ep29-emit/app/components/App.jsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React from 'react';
2+
import DisplayList from './DisplayList';
3+
4+
var rand = require('random-key');
5+
var api = require("../utils/api");
6+
var TodoActions = require("../actions/TodoActions");
7+
var TodoStore = require("../stores/TodoStore");
8+
9+
export default class App extends React.Component {
10+
11+
constructor () {
12+
super();
13+
this.state = { title: '', todos: [] };
14+
15+
this.getAllTodos();
16+
}
17+
18+
componentDidMount () {
19+
var storeIsTellingUsThatDataHasChanged = () => {
20+
console.log("Store is telling us that data has change");
21+
var todos = TodoStore.getTodos();
22+
console.log("todos is");
23+
console.log(todos);
24+
this.setState({todos: todos});
25+
}
26+
TodoStore.addChangeListener(storeIsTellingUsThatDataHasChanged);
27+
}
28+
29+
getAllTodos () {
30+
api.getTodos()
31+
.then( (responseData) => {
32+
var todos = responseData.todos;
33+
this.setState({todos: todos });
34+
TodoStore.setTodos(todos);
35+
})
36+
}
37+
38+
handleSubmit (event) {
39+
event.preventDefault();
40+
41+
var newTodo = { title: this.state.title, done: false };
42+
43+
TodoActions.addTodo(newTodo);
44+
this.setState({ title: '' });
45+
}
46+
47+
handleChange (event) {
48+
var title = event.target.value;
49+
this.setState({ title: title });
50+
}
51+
52+
handleClearCompleted (event) {
53+
var newTodos = this.state.todos.filter((todo) => { return !todo.done});
54+
this.setState({ todos: newTodos });
55+
}
56+
57+
render () {
58+
return <div>
59+
<h1> TODO </h1>
60+
<form onSubmit={this.handleSubmit.bind(this)}>
61+
<input type="text"
62+
onChange={this.handleChange.bind(this)}
63+
value={this.state.title} />
64+
</form>
65+
66+
<DisplayList
67+
todos={this.state.todos} />
68+
69+
<footer>
70+
All: ({ this.state.todos.length }) |
71+
Completed: ({ this.state.todos.filter((todo) => { return todo.done }).length }) |
72+
Pending: ({ this.state.todos.filter((todo) => { return !todo.done }).length }) |
73+
<a href='#' onClick={this.handleClearCompleted.bind(this)}>Clear Completed</a>
74+
</footer>
75+
</div>;
76+
}
77+
}

‎ep29-emit/app/components/DisplayItem.jsx

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React from 'react';
2+
3+
var TodoActions = require('../actions/TodoActions');
4+
5+
export default class DisplayItem extends React.Component {
6+
7+
constructor () {
8+
super();
9+
this.state = { editing: false }
10+
}
11+
12+
componentDidMount () {
13+
this.setState({ changedText: this.props.todo.title });
14+
}
15+
16+
handleEditing (event) {
17+
this.setState({ editing: true, changedText: this.props.todo.title });
18+
}
19+
20+
handleEditingDone (event) {
21+
if (event.keyCode === 13 ) { // submit
22+
this.setState({ editing: false });
23+
}
24+
}
25+
26+
handleEditingChange (event) {
27+
var _changedText = event.target.value;
28+
this.setState({ changedText: _changedText });
29+
}
30+
31+
toggleDone (todo) {
32+
if (todo.done) {
33+
TodoActions.markTodoUnDone(todo);
34+
} else {
35+
TodoActions.markTodoDone(todo);
36+
}
37+
}
38+
39+
handleDeleteTodoClick (todo) {
40+
TodoActions.deleteTodo(todo);
41+
}
42+
43+
render () {
44+
var todo = this.props.todo;
45+
46+
var viewStyle = {};
47+
var editStyle = {};
48+
49+
if (this.state.editing) {
50+
viewStyle.display = 'none';
51+
} else {
52+
editStyle.display = 'none';
53+
}
54+
55+
return <li className={ todo.done ? 'done' : '' }>
56+
<div style={viewStyle} onDoubleClick={this.handleEditing.bind(this)}>
57+
<input
58+
checked={todo.done}
59+
onChange={this.toggleDone.bind(this, todo)}
60+
type="checkbox"
61+
style={{ fontSize: 'x-large' }} />
62+
63+
<label>
64+
{ this.state.changedText }
65+
</label>
66+
67+
<a href='#'
68+
className="destroy"
69+
onClick={ this.handleDeleteTodoClick.bind(this, todo) }>
70+
[x]
71+
</a>
72+
</div>
73+
74+
<input type="text"
75+
onKeyDown={this.handleEditingDone.bind(this)}
76+
onChange={this.handleEditingChange.bind(this)}
77+
style={editStyle}
78+
value={this.state.changedText} />
79+
</li>
80+
}
81+
82+
}
83+
84+
DisplayItem.propTypes = {
85+
todo: React.PropTypes.object.isRequired
86+
}

0 commit comments

Comments
 (0)