migrated new todo to separate component

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

@@ -1,16 +1,16 @@
 import dispatcher from "../dispatcher";
 
-export function createTodo(text) {
+export function deleteTodo(id) {
   dispatcher.dispatch({
-    type: "CREATE_TODO",
-    text,
+    type: "DELETE_TODO",
+    id,
   });
 }
 
-export function deleteTodo(id) {
+export function createTodo(text) {
   dispatcher.dispatch({
-    type: "DELETE_TODO",
-    id,
+    type: "CREATE_TODO",
+    text,
   });
 }
 

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

@@ -5,12 +5,51 @@ import * as TodoActions from "../actions/TodoActions";
 export default class NewTodo extends React.Component {
   constructor(props) {
     super();
+    this.state = {
+      newTodo: ""
+    };
+  }
+
+  addTodo(e) {
+    e.preventDefault();
+    TodoActions.createTodo(this.state.newTodo);
+    this.setState({newTodo: ""});
+  }
+
+  handleChange(e) {
+    this.setState({newTodo: e.target.value});
   }
 
   render() {
+    const inputStyling = {
+      borderRadius: "10px",
+      borderStyle: "solid",
+      borderWidth: "1px",
+      borderColor: "#B19FBA",
+      marginRight: "20px",
+      minWidth: "200px",
+      backgroundColor: "#D8CFDD",
+      padding: "3px 15px 3px 15px"
+    };
 
-    return (
+    const formStyling = {
+      paddingBottom: "10px"
+    };
+
+    const standardButton = {
+      borderRadius: "10px",
+      borderStyle: "none",
+      padding: "3px 15px 3px 15px",
+      fontFamily: "Roboto",
+      backgroundColor: "#765786",
+      color: "#FFF"
+    };
 
+    return (
+      <form style={formStyling}>
+        <input style={inputStyling} type="text" value={this.state.newTodo} onChange={this.handleChange.bind(this)}/>
+        <button style={standardButton} onClick={this.addTodo.bind(this)}>Add New</button>
+      </form>
     );
   }
 }

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

@@ -7,12 +7,10 @@ export default class Todo extends React.Component {
     super();
   }
 
-// Anna Code Start
-  removeTodo(e) {
+  deleteTodo(e) {
     TodoActions.deleteTodo(this.props.id);
   }
-// Anna Code End
-  // const icon = complete ? "\u2714" : "\u2716"
+
   render() {
     const { complete, edit, text } = this.props;
 
@@ -23,6 +21,11 @@ export default class Todo extends React.Component {
       padding: "5px"
     };
 
+    const checkboxStyle = {
+      maxWidth: "50px",
+      padding: "10px"
+    }
+
     if (edit) {
       return (
         <li>
@@ -33,8 +36,8 @@ export default class Todo extends React.Component {
 
     return (
       <li>
-        <span><img style={iconStyle} src={icon} /></span>
-        <span onClick={this.removeTodo.bind(this)}><img style={iconStyle} src={trash} /></span>
+        <span><img style={checkboxStyle} src={icon} /></span>
+        <span onClick={this.deleteTodo.bind(this)}><img style={iconStyle} src={trash} /></span>
         <span>{text}</span>
       </li>
     );

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

@@ -1,7 +1,7 @@
 import React from "react";
 
 import Todo from "../components/Todo";
-import NewTodo from "../components/Todo";
+import NewTodo from "../components/NewTodo";
 import * as TodoActions from "../actions/TodoActions";
 import TodoStore from "../stores/TodoStore";
 
@@ -10,8 +10,7 @@ export default class Todos extends React.Component {
     super();
     this.getTodos = this.getTodos.bind(this);
     this.state = {
-      todos: TodoStore.getAll(),
-      newTodo: ""
+      todos: TodoStore.getAll()
     };
   }
 
@@ -33,19 +32,6 @@ export default class Todos extends React.Component {
     TodoActions.reloadTodos();
   }
 
-  // Start Anna Code
-  addTodo(e) {
-    console.log("??");
-    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;
 
@@ -64,37 +50,10 @@ export default class Todos extends React.Component {
       marginBottom: "20px"
     };
 
-    const inputStyling = {
-      borderRadius: "10px",
-      borderStyle: "solid",
-      borderWidth: "1px",
-      borderColor: "#B19FBA",
-      marginRight: "20px",
-      minWidth: "200px",
-      backgroundColor: "#D8CFDD",
-      padding: "3px 15px 3px 15px"
-    }
-
-    const formStyling = {
-      paddingBottom: "10px"
-    }
-
-    const standardButton = {
-      borderRadius: "10px",
-      borderStyle: "none",
-      padding: "3px 15px 3px 15px",
-      fontFamily: "Roboto",
-      backgroundColor: "#765786",
-      color: "#FFF"
-    }
-
     return (
       <div>
         <h1 style={headerStyling}>A List of things To Do</h1>
-        <form style={formStyling}>
-          <input style={inputStyling} type="text" value={this.state.newTodo} onChange={this.handleChange.bind(this)}/>
-          <button style={standardButton} onClick={this.addTodo.bind(this)}>Add New</button>
-        </form>
+        <NewTodo />
         <ul style={customUl}>{TodoComponents}</ul>
       </div>
     );