learncodeacademy · annapanana · Mar 22, 2017 · Mar 22, 2017 · Mar 22, 2017 · Mar 22, 2017
diff --git a/3-flux/documentation/data-flow.graffle b/3-flux/documentation/data-flow.graffle
diff --git a/3-flux/documentation/data-flow.pdf b/3-flux/documentation/data-flow.pdf
diff --git a/3-flux/package.json b/3-flux/package.json
@@ -21,7 +21,6 @@
     "webpack": "^1.12.9",
     "webpack-dev-server": "^1.14.1"
   },
-  "devDependencies": {},
   "scripts": {
     "dev": "webpack-dev-server --content-base src --inline --hot"
   },

diff --git a/3-flux/src/assets/icon_done.svg b/3-flux/src/assets/icon_done.svg
diff --git a/3-flux/src/assets/icon_not_done.svg b/3-flux/src/assets/icon_not_done.svg
diff --git a/3-flux/src/assets/icon_trash.svg b/3-flux/src/assets/icon_trash.svg
diff --git a/3-flux/src/index.html b/3-flux/src/index.html
@@ -14,6 +14,7 @@
   <!-- Custom Fonts -->
   <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
   <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 </head>
 
 <body>

diff --git a/3-flux/src/js/actions/TodoActions.js b/3-flux/src/js/actions/TodoActions.js
@@ -1,36 +1,34 @@
 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,
   });
 }
 
 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/NewTodo.js b/3-flux/src/js/components/NewTodo.js
@@ -0,0 +1,55 @@
+import React from "react";
+
+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"
+    };
+
+    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>
+    );
+  }
+}
diff --git a/3-flux/src/js/components/Todo.js b/3-flux/src/js/components/Todo.js
@@ -1,14 +1,30 @@
 import React from "react";
 
+import * as TodoActions from "../actions/TodoActions";
+
 export default class Todo extends React.Component {
   constructor(props) {
     super();
   }
 
+  deleteTodo(e) {
+    TodoActions.deleteTodo(this.props.id);
+  }
+
   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"
+    };
+
+    const checkboxStyle = {
+      maxWidth: "50px",
+      padding: "10px"
+    }
 
     if (edit) {
       return (
@@ -20,8 +36,9 @@ export default class Todo extends React.Component {
 
     return (
       <li>
+        <span><img style={checkboxStyle} src={icon} /></span>
+        <span onClick={this.deleteTodo.bind(this)}><img style={iconStyle} src={trash} /></span>
         <span>{text}</span>
-        <span>{icon}</span>
       </li>
     );
   }

diff --git a/3-flux/src/js/components/layout/Nav.js b/3-flux/src/js/components/layout/Nav.js
@@ -22,8 +22,13 @@ export default class Nav extends React.Component {
     const settingsClass = location.pathname.match(/^\/settings/) ? "active" : "";
     const navClass = collapsed ? "collapse" : "";
 
+    const navStyle = {
+      backgroundColor: "#3C1053",
+      backgroundImage: "none"
+    };
+
     return (
-      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+      <nav style={navStyle} class="navbar navbar-inverse navbar-fixed-top" role="navigation">
         <div class="container">
           <div class="navbar-header">
             <button type="button" class="navbar-toggle" onClick={this.toggleCollapse.bind(this)} >

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
@@ -1,16 +1,16 @@
 import React from "react";
 
 import Todo from "../components/Todo";
+import NewTodo from "../components/NewTodo";
 import * as TodoActions from "../actions/TodoActions";
 import TodoStore from "../stores/TodoStore";
 
-
 export default class Todos extends React.Component {
   constructor() {
     super();
     this.getTodos = this.getTodos.bind(this);
     this.state = {
-      todos: TodoStore.getAll(),
+      todos: TodoStore.getAll()
     };
   }
 
@@ -39,11 +39,22 @@ export default class Todos extends React.Component {
         return <Todo key={todo.id} {...todo}/>;
     });
 
+    const customUl = {
+      listStyle: "none",
+      paddingLeft: "0"
+    };
+
+    const headerStyling = {
+      fontFamily: "Roboto",
+      color: "#3C1053",
+      marginBottom: "20px"
+    };
+
     return (
       <div>
-        <button onClick={this.reloadTodos.bind(this)}>Reload!</button>
-        <h1>Todos</h1>
-        <ul>{TodoComponents}</ul>
+        <h1 style={headerStyling}>A List of things To Do</h1>
+        <NewTodo />
+        <ul style={customUl}>{TodoComponents}</ul>
       </div>
     );
   }

diff --git a/3-flux/src/js/stores/TodoStore.js b/3-flux/src/js/stores/TodoStore.js
@@ -9,7 +9,7 @@ class TodoStore extends EventEmitter {
       {
         id: 113464613,
         text: "Go Shopping",
-        complete: false
+        complete: true
       },
       {
         id: 235684679,
@@ -27,10 +27,16 @@ 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");
+  }
+
   getAll() {
     return this.todos;
   }
@@ -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>
diff --git a/3-flux/test.js b/3-flux/test.js
@@ -0,0 +1,4 @@
+'use strict';
+playNice() {
+
+}
diff --git a/3-flux/webpack.config.js b/3-flux/webpack.config.js
@@ -16,7 +16,8 @@ module.exports = {
           presets: ['react', 'es2015', 'stage-0'],
           plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
         }
-      }
+      },
+        { test: /\.css$/, loader: "style-loader!css-loader" }
     ]
   },
   output: {