Skip to content

Commit 9cfb227

Browse files
neerajsingh0101neerajsingh0101
committed
Merge pull request #11 from bigbinary/use-dispatcher-2
Use dispatcher 2
2 parents 08d497c + 54e1aa4 commit 9cfb227

File tree

13 files changed

+699
-0
lines changed

13 files changed

+699
-0
lines changed

‎ep28-more-dispatcher-usage/README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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+
* `npm install random-key --save`
13+
* [Source code](...)

‎ep28-more-dispatcher-usage/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;

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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 = (todos) => {
20+
console.log("Store is telling us that data has change");
21+
this.setState({todos: todos});
22+
}
23+
TodoStore.addChangeListener(storeIsTellingUsThatDataHasChanged);
24+
}
25+
26+
getAllTodos () {
27+
api.getTodos()
28+
.then( (responseData) => {
29+
var todos = responseData.todos;
30+
this.setState({todos: todos });
31+
TodoStore.setTodos(todos);
32+
})
33+
}
34+
35+
handleSubmit (event) {
36+
event.preventDefault();
37+
38+
var newTodo = { title: this.state.title, done: false };
39+
40+
TodoActions.addTodo(newTodo);
41+
this.setState({ title: '' });
42+
}
43+
44+
handleChange (event) {
45+
var title = event.target.value;
46+
this.setState({ title: title });
47+
}
48+
49+
handleClearCompleted (event) {
50+
var newTodos = this.state.todos.filter((todo) => { return !todo.done});
51+
this.setState({ todos: newTodos });
52+
}
53+
54+
render () {
55+
return <div>
56+
<h1> TODO </h1>
57+
<form onSubmit={this.handleSubmit.bind(this)}>
58+
<input type="text"
59+
onChange={this.handleChange.bind(this)}
60+
value={this.state.title} />
61+
</form>
62+
63+
<DisplayList
64+
todos={this.state.todos} />
65+
66+
<footer>
67+
All: ({ this.state.todos.length }) |
68+
Completed: ({ this.state.todos.filter((todo) => { return todo.done }).length }) |
69+
Pending: ({ this.state.todos.filter((todo) => { return !todo.done }).length }) |
70+
<a href='#' onClick={this.handleClearCompleted.bind(this)}>Clear Completed</a>
71+
</footer>
72+
</div>;
73+
}
74+
}

‎ep28-more-dispatcher-usage/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+
}

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import DisplayItem from './DisplayItem';
3+
4+
export default class DisplayList extends React.Component {
5+
6+
render () {
7+
return <ul id="todo-list">
8+
{ this.props.todos.map((todo, i) => {
9+
return <section id="main" key={todo.id}>
10+
<DisplayItem
11+
todo={todo} />
12+
</section>
13+
}) }
14+
</ul>
15+
}
16+
17+
}
18+
19+
DisplayList.propTypes = {
20+
todos: React.PropTypes.array.isRequired
21+
}

‎ep28-more-dispatcher-usage/app/dispatcher/AppDispatcher.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
var Dispatcher = require('flux').Dispatcher;
2+
3+
module.exports = new Dispatcher();

‎ep28-more-dispatcher-usage/app/main.jsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import './stylesheets/main.css';
2+
3+
import React from 'react';
4+
import App from './components/App';
5+
6+
main();
7+
8+
function main() {
9+
var div = document.createElement('div');
10+
div.setAttribute("id", "todoapp");
11+
document.body.appendChild(div);
12+
13+
React.render(<App />, div);
14+
}

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
var AppDispatcher = require('../dispatcher/AppDispatcher');
2+
3+
AppDispatcher.register(function(action) {
4+
5+
switch(action.actionType) {
6+
case 'TODO_DONE':
7+
console.log("Handling TODO_DONE using dispatcher in store");
8+
TodoStore.markTodoDone(action.todo);
9+
break;
10+
11+
case 'TODO_UNDONE':
12+
console.log("Handling TODO_UNDONE using dispatcher in store");
13+
TodoStore.markTodoUnDone(action.todo);
14+
break;
15+
16+
case 'TODO_DELETE':
17+
console.log("Handling TODO_DELETE using dispatcher in store");
18+
TodoStore.deleteTodo(action.todo);
19+
break;
20+
21+
case 'TODO_ADD':
22+
console.log("Handling TODO_ADD using dispatcher in store");
23+
TodoStore.getTodos();
24+
break;
25+
}
26+
27+
});
28+
29+
var _todos = {};
30+
var _callback;
31+
32+
var TodoStore = {
33+
34+
deleteTodo: (todo) => {
35+
var newTodos = _todos.filter( (t) => {
36+
return t.id != todo.id
37+
} )
38+
_todos = newTodos;
39+
_callback(_todos);
40+
},
41+
42+
markTodoDone: (todo) => {
43+
var _todo = _todos.filter((t) => {
44+
return t.id === todo.id;
45+
})[0];
46+
47+
_todo.done = true;
48+
_callback(_todos);
49+
},
50+
51+
markTodoUnDone: (todo) => {
52+
var _todo = _todos.filter((t) => {
53+
return t.id === todo.id;
54+
})[0];
55+
56+
_todo.done = false;
57+
_callback(_todos);
58+
},
59+
60+
setTodos: (todos) => {
61+
_todos = todos;
62+
console.log("TodoStore", TodoStore.getTodos());
63+
_callback(todos);
64+
},
65+
66+
getTodos: () => {
67+
return _todos;
68+
_callback(todos);
69+
},
70+
71+
addChangeListener: function (callback) {
72+
console.log("registering callback for changelistener");
73+
_callback = callback;
74+
}
75+
}
76+
77+
module.exports = TodoStore;

0 commit comments

Comments
 (0)