diff --git a/3-flux/documentation/data-flow.graffle b/3-flux/documentation/data-flow.graffle new file mode 100644 index 00000000..c671be1b Binary files /dev/null and b/3-flux/documentation/data-flow.graffle differ diff --git a/3-flux/documentation/data-flow.pdf b/3-flux/documentation/data-flow.pdf new file mode 100644 index 00000000..33da260d Binary files /dev/null and b/3-flux/documentation/data-flow.pdf differ diff --git a/3-flux/package.json b/3-flux/package.json index 61aab93e..69deb4cf 100644 --- 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 new file mode 100644 index 00000000..43410f27 --- /dev/null +++ b/3-flux/src/assets/icon_done.svg @@ -0,0 +1,25 @@ + + + + + icon_done + + + + + + + + + + + + diff --git a/3-flux/src/assets/icon_not_done.svg b/3-flux/src/assets/icon_not_done.svg new file mode 100644 index 00000000..f9e29e72 --- /dev/null +++ b/3-flux/src/assets/icon_not_done.svg @@ -0,0 +1,22 @@ + + + + + icon_not_done + + + + + + + + + diff --git a/3-flux/src/assets/icon_trash.svg b/3-flux/src/assets/icon_trash.svg new file mode 100644 index 00000000..0e5267cf --- /dev/null +++ b/3-flux/src/assets/icon_trash.svg @@ -0,0 +1,18 @@ + + + + + icon_trash + + + + + + + + + diff --git a/3-flux/src/index.html b/3-flux/src/index.html index b1e5930e..e8c05956 100644 --- a/3-flux/src/index.html +++ b/3-flux/src/index.html @@ -14,6 +14,7 @@ + diff --git a/3-flux/src/js/actions/TodoActions.js b/3-flux/src/js/actions/TodoActions.js index 054cc614..4586c14b 100644 --- a/3-flux/src/js/actions/TodoActions.js +++ b/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, }); } @@ -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/NewTodo.js b/3-flux/src/js/components/NewTodo.js new file mode 100644 index 00000000..b6397f8b --- /dev/null +++ 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 ( +
+ + +
+ ); + } +} diff --git a/3-flux/src/js/components/Todo.js b/3-flux/src/js/components/Todo.js index c75bbd11..6a7043a2 100644 --- 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 (
  • + + {text} - {icon}
    • ); } diff --git a/3-flux/src/js/components/layout/Nav.js b/3-flux/src/js/components/layout/Nav.js index 3e6211ac..159e58a5 100644 --- 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 ( -