From c7d6fa0f2d0fbaaff9bc7ad3c896073ed3b843c2 Mon Sep 17 00:00:00 2001
From: Kyle Howell <mrkylehowell@gmail.com>
Date: Mon, 30 Jul 2018 23:41:04 -0700
Subject: [PATCH 1/2] Add todo container

---
 src/actions/app.js            |  2 --
 src/actions/todo.js           |  3 +++
 src/containers/App.js         | 16 ++++++++++------
 src/containers/Todo.js        | 32 ++++++++++++++++++++++++++++++++
 src/containers/Todo.styles.js | 11 +++++++++++
 src/main.js                   |  2 +-
 src/reducers/index.js         |  3 ++-
 src/reducers/todo.js          | 23 +++++++++++++++++++++++
 8 files changed, 82 insertions(+), 10 deletions(-)
 create mode 100644 src/actions/todo.js
 create mode 100644 src/containers/Todo.js
 create mode 100644 src/containers/Todo.styles.js
 create mode 100644 src/reducers/todo.js

diff --git a/src/actions/app.js b/src/actions/app.js
index dcff58c..e3c15c2 100644
--- a/src/actions/app.js
+++ b/src/actions/app.js
@@ -1,5 +1,3 @@
 import {createAction} from 'redux-actions';
 
 export const setCheckbox = createAction('SET_CHECKBOX');
-
-export default {setCheckbox};
diff --git a/src/actions/todo.js b/src/actions/todo.js
new file mode 100644
index 0000000..07af600
--- /dev/null
+++ b/src/actions/todo.js
@@ -0,0 +1,3 @@
+import {createAction} from 'redux-actions';
+
+export const createTodo = createAction('CREATE_TODO');
diff --git a/src/containers/App.js b/src/containers/App.js
index a56b849..59b9573 100644
--- a/src/containers/App.js
+++ b/src/containers/App.js
@@ -1,16 +1,18 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { setCheckbox } from '../actions/app';
-import { Title } from './App.styles';
+import {connect} from 'react-redux';
+
+import Todo from './Todo';
+import {setCheckbox} from '../actions/app';
+import {Title} from './App.styles';
 
 const mapStateToProps = state => ({
-  checked: state.app.checkbox
+  checked: state.app.checkbox,
 });
 
 class App extends Component {
   static propTypes = {
-    checked: PropTypes.bool
+    checked: PropTypes.bool,
   };
 
   handleCheckChange = event => {
@@ -26,6 +28,8 @@ class App extends Component {
           checked={this.props.checked}
           onChange={this.handleCheckChange}
         />
+
+        <Todo />
       </div>
     );
   }
diff --git a/src/containers/Todo.js b/src/containers/Todo.js
new file mode 100644
index 0000000..ebe0db6
--- /dev/null
+++ b/src/containers/Todo.js
@@ -0,0 +1,32 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+
+import {Item, StatusIndicatior} from './Todo.styles';
+
+const mapStateToProps = state => ({
+  items: state.todo.items,
+});
+
+class Todo extends Component {
+  static propTypes = {
+    items: PropTypes.array,
+  };
+
+  render() {
+    return (
+      <div>
+        {this.props.items.map(item => {
+          return (
+            <Item>
+              <StatusIndicatior complete={item.status} />
+              {item.text}
+            </Item>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+export default connect(mapStateToProps)(Todo);
diff --git a/src/containers/Todo.styles.js b/src/containers/Todo.styles.js
new file mode 100644
index 0000000..69ff3f7
--- /dev/null
+++ b/src/containers/Todo.styles.js
@@ -0,0 +1,11 @@
+import styled from 'react-emotion';
+
+export const Item = styled.div`
+  display: flex;
+`;
+
+export const StatusIndicatior = styled.div`
+  height: 20px;
+  width: 20px;
+  background-color: ${props => (props.complete ? 'green' : 'red')};
+`;
diff --git a/src/main.js b/src/main.js
index 43ca089..555aaea 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
+import {Provider} from 'react-redux';
 import store from './store';
 import App from './containers/App';
 
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 49bc663..d58a15d 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,4 +1,5 @@
 import appReducer from './app';
+import todoReducer from './todo';
 import {combineReducers} from 'redux';
 
-export default combineReducers({app: appReducer});
+export default combineReducers({app: appReducer, todo: todoReducer});
diff --git a/src/reducers/todo.js b/src/reducers/todo.js
new file mode 100644
index 0000000..f4289ad
--- /dev/null
+++ b/src/reducers/todo.js
@@ -0,0 +1,23 @@
+import {handleActions} from 'redux-actions';
+import {createTodo} from '../actions/todo';
+
+const initialState = {
+  items: [
+    {
+      text: 'Complete this assignment',
+      status: false,
+    },
+  ],
+};
+
+const todoReducer = handleActions(
+  {
+    [createTodo]: (state, action) => ({
+      ...state,
+      items: state.items.push(action.payload),
+    }),
+  },
+  initialState
+);
+
+export default todoReducer;

From 4bde1f402b261810ffd88f6e590d3738fb8f4c49 Mon Sep 17 00:00:00 2001
From: Kyle Howell <mrkylehowell@gmail.com>
Date: Tue, 31 Jul 2018 00:27:42 -0700
Subject: [PATCH 2/2] Add toggle status action

---
 src/actions/todo.js           |  1 +
 src/containers/App.js         |  7 -------
 src/containers/Todo.js        | 36 ++++++++++++++++++++++++++++++++---
 src/containers/Todo.styles.js | 15 +++++++++++++++
 src/reducers/todo.js          | 13 +++++++++++--
 5 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/src/actions/todo.js b/src/actions/todo.js
index 07af600..8a179ef 100644
--- a/src/actions/todo.js
+++ b/src/actions/todo.js
@@ -1,3 +1,4 @@
 import {createAction} from 'redux-actions';
 
 export const createTodo = createAction('CREATE_TODO');
+export const toggleTodoStatus = createAction('TOGGLE_TODO_STATUS');
diff --git a/src/containers/App.js b/src/containers/App.js
index 59b9573..91ae1de 100644
--- a/src/containers/App.js
+++ b/src/containers/App.js
@@ -22,13 +22,6 @@ class App extends Component {
   render() {
     return (
       <div>
-        <Title>Hello World</Title>
-        <input
-          type="checkbox"
-          checked={this.props.checked}
-          onChange={this.handleCheckChange}
-        />
-
         <Todo />
       </div>
     );
diff --git a/src/containers/Todo.js b/src/containers/Todo.js
index ebe0db6..7cad557 100644
--- a/src/containers/Todo.js
+++ b/src/containers/Todo.js
@@ -2,7 +2,13 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 
-import {Item, StatusIndicatior} from './Todo.styles';
+import {createTodo, toggleTodoStatus} from '../actions/todo';
+import {
+  InputWrapper,
+  Item,
+  StatusIndicatior,
+  SubmitButton,
+} from './Todo.styles';
 
 const mapStateToProps = state => ({
   items: state.todo.items,
@@ -13,13 +19,37 @@ class Todo extends Component {
     items: PropTypes.array,
   };
 
+  state = {inputText: ''};
+
+  onInputChange = event => {
+    this.setState({inputText: event.target.value});
+  };
+
+  onInputSubmit = () => {
+    this.props.dispatch(
+      createTodo({text: this.state.inputText, status: false})
+    );
+    this.setState({inputText: ''});
+  };
+
   render() {
     return (
       <div>
+        <InputWrapper>
+          <SubmitButton onClick={this.onInputSubmit}> Submit </SubmitButton>
+          <input
+            type="text"
+            value={this.state.inputText}
+            onChange={this.onInputChange}
+          />
+        </InputWrapper>
         {this.props.items.map(item => {
           return (
-            <Item>
-              <StatusIndicatior complete={item.status} />
+            <Item key={item.text}>
+              <StatusIndicatior
+                complete={item.status}
+                onClick={() => this.props.dispatch(toggleTodoStatus(item))}
+              />
               {item.text}
             </Item>
           );
diff --git a/src/containers/Todo.styles.js b/src/containers/Todo.styles.js
index 69ff3f7..412d841 100644
--- a/src/containers/Todo.styles.js
+++ b/src/containers/Todo.styles.js
@@ -2,10 +2,25 @@ import styled from 'react-emotion';
 
 export const Item = styled.div`
   display: flex;
+  margin-bottom: 5px;
 `;
 
 export const StatusIndicatior = styled.div`
   height: 20px;
   width: 20px;
   background-color: ${props => (props.complete ? 'green' : 'red')};
+  margin-right: 5px;
+  cursor: pointer;
+`;
+
+export const InputWrapper = styled.div`
+  display: flex;
+  margin-bottom: 20px;
+`;
+
+export const SubmitButton = styled.div`
+  height: 20px;
+  margin-right: 10px;
+  background-color: grey;
+  border: 1px solid black;
 `;
diff --git a/src/reducers/todo.js b/src/reducers/todo.js
index f4289ad..25ee4de 100644
--- a/src/reducers/todo.js
+++ b/src/reducers/todo.js
@@ -1,5 +1,5 @@
 import {handleActions} from 'redux-actions';
-import {createTodo} from '../actions/todo';
+import {createTodo, toggleTodoStatus} from '../actions/todo';
 
 const initialState = {
   items: [
@@ -14,7 +14,16 @@ const todoReducer = handleActions(
   {
     [createTodo]: (state, action) => ({
       ...state,
-      items: state.items.push(action.payload),
+      items: [...state.items, action.payload],
+    }),
+    [toggleTodoStatus]: (state, action) => ({
+      ...state,
+      items: state.items.map(
+        item =>
+          item.text === action.payload.text
+            ? {text: item.text, status: !item.status}
+            : item
+      ),
     }),
   },
   initialState