Todo list

src/actions/app.js

@@ -1,5 +1,3 @@
 import {createAction} from 'redux-actions';
 
 export const setCheckbox = createAction('SET_CHECKBOX');
-
-export default {setCheckbox};

src/actions/todo.js

@@ -0,0 +1,4 @@
+import {createAction} from 'redux-actions';
+
+export const createTodo = createAction('CREATE_TODO');
+export const toggleTodoStatus = createAction('TOGGLE_TODO_STATUS');

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 => {
@@ -20,12 +22,7 @@ class App extends Component {
   render() {
     return (
       <div>
-        <Title>Hello World</Title>
-        <input
-          type="checkbox"
-          checked={this.props.checked}
-          onChange={this.handleCheckChange}
-        />
+        <Todo />
       </div>
     );
   }

src/containers/Todo.js

@@ -0,0 +1,62 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+
+import {createTodo, toggleTodoStatus} from '../actions/todo';
+import {
+  InputWrapper,
+  Item,
+  StatusIndicatior,
+  SubmitButton,
+} from './Todo.styles';
+
+const mapStateToProps = state => ({
+  items: state.todo.items,
+});
+
+class Todo extends Component {
+  static propTypes = {
+    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 key={item.text}>
+              <StatusIndicatior
+                complete={item.status}
+                onClick={() => this.props.dispatch(toggleTodoStatus(item))}
+              />
+              {item.text}
+            </Item>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+export default connect(mapStateToProps)(Todo);

src/containers/Todo.styles.js

@@ -0,0 +1,26 @@
+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;
+`;

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';
 

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});

src/reducers/todo.js

@@ -0,0 +1,32 @@
+import {handleActions} from 'redux-actions';
+import {createTodo, toggleTodoStatus} from '../actions/todo';
+
+const initialState = {
+  items: [
+    {
+      text: 'Complete this assignment',
+      status: false,
+    },
+  ],
+};
+
+const todoReducer = handleActions(
+  {
+    [createTodo]: (state, action) => ({
+      ...state,
+      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
+);
+
+export default todoReducer;