adding and removing todos is working

learncodeacademy · annapanana · Mar 22, 2017 · Mar 22, 2017 · Mar 22, 2017 · Mar 22, 2017
commit 6153ab4be1b9f235ba94cad2196bd098f56c3efe
diff --git a/3-flux/src/js/actions/TodoActions.js b/3-flux/src/js/actions/TodoActions.js
@@ -18,19 +18,17 @@ export function reloadTodos() {
   // axios("http://someurl.com/somedataendpoint").then((data) => {
   //   console.log("got the data!", data);
   // })
-  dispatcher.dispatch({type: "FETCH_TODOS"});
-  setTimeout(() => {
-    dispatcher.dispatch({type: "RECEIVE_TODOS", todos: [
-      {
-        id: 8484848484,
-        text: "Go Shopping Again",
-        complete: false
-      },
-      {
-        id: 6262627272,
-        text: "Hug Wife",
-        complete: true
-      },
-    ]});
-  }, 1000);
+  // dispatcher.dispatch({type: "FETCH_TODOS"});
+  dispatcher.dispatch({type: "RECEIVE_TODOS", todos: [
+    {
+      id: 8484848484,
+      text: "Go Shopping Again",
+      complete: false
+    },
+    {
+      id: 6262627272,
+      text: "Hug Wife",
+      complete: true
+    },
+  ]});
 }
diff --git a/3-flux/src/js/components/Todo.js b/3-flux/src/js/components/Todo.js
@@ -1,10 +1,18 @@
 import React from "react";
 
+import * as TodoActions from "../actions/TodoActions";
+
 export default class Todo extends React.Component {
   constructor(props) {
     super();
   }
 
+  removeTodo(e) {
+    // console.log(this.props.id);
+    //REMOVE BY ID
+    TodoActions.deleteTodo(this.props.id);
+  }
+
   render() {
     const { complete, edit, text } = this.props;
 
@@ -20,8 +28,8 @@ export default class Todo extends React.Component {
 
     return (
       <li>
+        <button onClick={this.removeTodo.bind(this)}>{icon}</button>
         <span>{text}</span>
-        <span>{icon}</span>
       </li>
     );
   }

diff --git a/3-flux/src/js/pages/Layout.js b/3-flux/src/js/pages/Layout.js
@@ -7,6 +7,7 @@ import Nav from "../components/layout/Nav";
 export default class Layout extends React.Component {
   render() {
     const { location } = this.props;
+
     const containerStyle = {
       marginTop: "60px"
     };

diff --git a/3-flux/src/js/pages/Todos.js b/3-flux/src/js/pages/Todos.js
@@ -11,6 +11,7 @@ export default class Todos extends React.Component {
     this.getTodos = this.getTodos.bind(this);
     this.state = {
       todos: TodoStore.getAll(),
+      newTodo: ""
     };
   }
 
@@ -32,6 +33,18 @@ export default class Todos extends React.Component {
     TodoActions.reloadTodos();
   }
 
+  // Start Anna Code
+  addTodo(e) {
+    e.preventDefault();
+    TodoActions.createTodo(this.state.newTodo);
+    this.setState({newTodo: ""});
+  }
+
+  handleChange(e) {
+    this.setState({newTodo: e.target.value});
+  }
+  // End Anna Code
+
   render() {
     const { todos } = this.state;
 
@@ -43,6 +56,10 @@ export default class Todos extends React.Component {
       <div>
         <button onClick={this.reloadTodos.bind(this)}>Reload!</button>
         <h1>Todos</h1>
+        <form>
+          <input type="text" value={this.state.newTodo} onChange={this.handleChange.bind(this)}/>
+          <button onClick={this.addTodo.bind(this)}>Add Todo</button>
+        </form>
         <ul>{TodoComponents}</ul>
       </div>
     );

diff --git a/3-flux/src/js/stores/TodoStore.js b/3-flux/src/js/stores/TodoStore.js
@@ -27,7 +27,13 @@ class TodoStore extends EventEmitter {
       text,
       complete: false,
     });
+    this.emit("change");
+  }
 
+  deleteTodo(id) {
+    this.todos = this.todos.filter((entry) => {
+      return entry.id !== id;
+    });
     this.emit("change");
   }
 
@@ -39,13 +45,19 @@ class TodoStore extends EventEmitter {
     switch(action.type) {
       case "CREATE_TODO": {
         this.createTodo(action.text);
+        this.emit("change");
         break;
       }
       case "RECEIVE_TODOS": {
         this.todos = action.todos;
         this.emit("change");
         break;
       }
+      case "DELETE_TODO": {
+        this.deleteTodo(action.id);
+        this.emit("change");
+        break;
+      }
     }
   }
 

diff --git a/3-flux/test.html b/3-flux/test.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Test</title>
+  </head>
+  <body>
+    <input type="text" name="" value="">
+  </body>
+</html>