Skip to content

Commit 6153ab4

Browse files
annapananaannapanana
committed
adding and removing todos is working
1 parent 5c1a89a commit 6153ab4

File tree

6 files changed

+62
-16
lines changed

6 files changed

+62
-16
lines changed

‎3-flux/src/js/actions/TodoActions.js

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,17 @@ export function reloadTodos() {
1818
// axios("http://someurl.com/somedataendpoint").then((data) => {
1919
// console.log("got the data!", data);
2020
// })
21-
dispatcher.dispatch({type: "FETCH_TODOS"});
22-
setTimeout(() => {
23-
dispatcher.dispatch({type: "RECEIVE_TODOS", todos: [
24-
{
25-
id: 8484848484,
26-
text: "Go Shopping Again",
27-
complete: false
28-
},
29-
{
30-
id: 6262627272,
31-
text: "Hug Wife",
32-
complete: true
33-
},
34-
]});
35-
}, 1000);
21+
// dispatcher.dispatch({type: "FETCH_TODOS"});
22+
dispatcher.dispatch({type: "RECEIVE_TODOS", todos: [
23+
{
24+
id: 8484848484,
25+
text: "Go Shopping Again",
26+
complete: false
27+
},
28+
{
29+
id: 6262627272,
30+
text: "Hug Wife",
31+
complete: true
32+
},
33+
]});
3634
}

‎3-flux/src/js/components/Todo.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
import React from "react";
22

3+
import * as TodoActions from "../actions/TodoActions";
4+
35
export default class Todo extends React.Component {
46
constructor(props) {
57
super();
68
}
79

10+
removeTodo(e) {
11+
// console.log(this.props.id);
12+
//REMOVE BY ID
13+
TodoActions.deleteTodo(this.props.id);
14+
}
15+
816
render() {
917
const { complete, edit, text } = this.props;
1018

@@ -20,8 +28,8 @@ export default class Todo extends React.Component {
2028

2129
return (
2230
<li>
31+
<button onClick={this.removeTodo.bind(this)}>{icon}</button>
2332
<span>{text}</span>
24-
<span>{icon}</span>
2533
</li>
2634
);
2735
}

‎3-flux/src/js/pages/Layout.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Nav from "../components/layout/Nav";
77
export default class Layout extends React.Component {
88
render() {
99
const { location } = this.props;
10+
1011
const containerStyle = {
1112
marginTop: "60px"
1213
};

‎3-flux/src/js/pages/Todos.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export default class Todos extends React.Component {
1111
this.getTodos = this.getTodos.bind(this);
1212
this.state = {
1313
todos: TodoStore.getAll(),
14+
newTodo: ""
1415
};
1516
}
1617

@@ -32,6 +33,18 @@ export default class Todos extends React.Component {
3233
TodoActions.reloadTodos();
3334
}
3435

36+
// Start Anna Code
37+
addTodo(e) {
38+
e.preventDefault();
39+
TodoActions.createTodo(this.state.newTodo);
40+
this.setState({newTodo: ""});
41+
}
42+
43+
handleChange(e) {
44+
this.setState({newTodo: e.target.value});
45+
}
46+
// End Anna Code
47+
3548
render() {
3649
const { todos } = this.state;
3750

@@ -43,6 +56,10 @@ export default class Todos extends React.Component {
4356
<div>
4457
<button onClick={this.reloadTodos.bind(this)}>Reload!</button>
4558
<h1>Todos</h1>
59+
<form>
60+
<input type="text" value={this.state.newTodo} onChange={this.handleChange.bind(this)}/>
61+
<button onClick={this.addTodo.bind(this)}>Add Todo</button>
62+
</form>
4663
<ul>{TodoComponents}</ul>
4764
</div>
4865
);

‎3-flux/src/js/stores/TodoStore.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,13 @@ class TodoStore extends EventEmitter {
2727
text,
2828
complete: false,
2929
});
30+
this.emit("change");
31+
}
3032

33+
deleteTodo(id) {
34+
this.todos = this.todos.filter((entry) => {
35+
return entry.id !== id;
36+
});
3137
this.emit("change");
3238
}
3339

@@ -39,13 +45,19 @@ class TodoStore extends EventEmitter {
3945
switch(action.type) {
4046
case "CREATE_TODO": {
4147
this.createTodo(action.text);
48+
this.emit("change");
4249
break;
4350
}
4451
case "RECEIVE_TODOS": {
4552
this.todos = action.todos;
4653
this.emit("change");
4754
break;
4855
}
56+
case "DELETE_TODO": {
57+
this.deleteTodo(action.id);
58+
this.emit("change");
59+
break;
60+
}
4961
}
5062
}
5163

‎3-flux/test.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Test</title>
6+
</head>
7+
<body>
8+
<input type="text" name="" value="">
9+
</body>
10+
</html>

0 commit comments

Comments
 (0)