added custom todo icons

Author: annapanana

3-flux/src/assets/icon_done.svg

@@ -7,16 +7,21 @@ export default class Todo extends React.Component {
     super();
   }
 
+// Anna Code Start
   removeTodo(e) {
-    // console.log(this.props.id);
-    //REMOVE BY ID
     TodoActions.deleteTodo(this.props.id);
   }
-
+// Anna Code End
+  // const icon = complete ? "\u2714" : "\u2716"
   render() {
     const { complete, edit, text } = this.props;
 
-    const icon = complete ? "\u2714" : "\u2716"
+    const icon = complete ? "../../assets/icon_done.svg" : "../../assets/icon_not_done.svg";
+    const trash = "../../assets/icon_trash.svg";
+    const iconStyle = {
+      maxWidth: "50px",
+      padding: "5px"
+    };
 
     if (edit) {
       return (
@@ -28,7 +33,8 @@ export default class Todo extends React.Component {
 
     return (
       <li>
-        <button onClick={this.removeTodo.bind(this)}>{icon}</button>
+        <span><img style={iconStyle} src={icon} /></span>
+        <span onClick={this.removeTodo.bind(this)}><img style={iconStyle} src={trash} /></span>
         <span>{text}</span>
       </li>
     );

3-flux/src/assets/icon_not_done.svg

@@ -52,6 +52,11 @@ export default class Todos extends React.Component {
         return <Todo key={todo.id} {...todo}/>;
     });
 
+    const customUl = {
+      listStyle: "none",
+      paddingLeft: "0"
+    };
+
     return (
       <div>
         <button onClick={this.reloadTodos.bind(this)}>Reload!</button>
@@ -60,7 +65,7 @@ export default class Todos extends React.Component {
           <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>
+        <ul style={customUl}>{TodoComponents}</ul>
       </div>
     );
   }

3-flux/src/assets/icon_trash.svg

@@ -9,7 +9,7 @@ class TodoStore extends EventEmitter {
       {
         id: 113464613,
         text: "Go Shopping",
-        complete: false
+        complete: true
       },
       {
         id: 235684679,
@@ -27,14 +27,14 @@ class TodoStore extends EventEmitter {
       text,
       complete: false,
     });
-    this.emit("change");
+    // this.emit("change");
   }
 
   deleteTodo(id) {
     this.todos = this.todos.filter((entry) => {
       return entry.id !== id;
     });
-    this.emit("change");
+    // this.emit("change");
   }
 
   getAll() {

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

@@ -0,0 +1,4 @@
+'use strict';
+playNice() {
+
+}