Add a simple Todo as an example

Author: calvinl

common/js/actions/.gitkeep

@@ -0,0 +1,6 @@
+import { ADD_TODO, REMOVE_TODO, TOGGLE_TODO } from 'constants';
+import generateActionCreator from 'lib/generateActionCreator';
+
+export const addTodo = generateActionCreator(ADD_TODO, 'text');
+export const removeTodo = generateActionCreator(REMOVE_TODO, 'id');
+export const toggleTodo = generateActionCreator(TOGGLE_TODO, 'id');

common/js/actions/todos.js

@@ -8,8 +8,7 @@ export default class Header extends Component {
       <header>
         <ul className={css.headerLinks}>
           <li><Link to="/">Home</Link></li>
-          <li><Link to="/example">Example</Link></li>
-          <li><Link to="/example/2">Example 2</Link></li>
+          <li><Link to="/todos">Todos</Link></li>
         </ul>
       </header>
     );

common/js/components/Header.js

@@ -0,0 +1,3 @@
+export const ADD_TODO = 'ADD_TODO';
+export const REMOVE_TODO = 'REMOVE_TODO';
+export const TOGGLE_TODO = 'TOGGLE_TODO';

common/js/constants/index.js

@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { addTodo, toggleTodo, removeTodo } from 'actions/todos';
+import classnames from 'classnames';
+import css from './index.scss';
+
+const cx = classnames.bind(css);
+
+class TodosContainer extends Component {
+
+  static propTypes = {
+    todos: PropTypes.array.isRequired,
+    dispatch: PropTypes.func.isRequired
+  }
+
+  submitTodo = (ev) => {
+    const { dispatch } = this.props;
+    const { todoText } = this.refs;
+
+    ev.preventDefault();
+    dispatch(addTodo(todoText.value));
+    todoText.value = '';
+  }
+
+  checkTodo = (id) => {
+    const { dispatch } = this.props;
+
+    dispatch(toggleTodo(id));
+  }
+
+  removeTodo = (id) => {
+    const { dispatch } = this.props;
+
+    dispatch(removeTodo(id));
+  }
+
+  render() {
+    const { todos } = this.props;
+
+    return (
+      <div>
+        <h1>To-Dos</h1>
+        <div className={css.todos}>
+          {todos.map((todo, idx) => {
+            const { id, text, completed } = todo;
+
+            return (
+              <li key={idx} className={css.todo}>
+                <span className={css.completeInput}>
+                  <input type="checkbox" onChange={() => this.checkTodo(id)} />
+                </span>
+                <span className={cx(css.text, { [css.completed]: completed })}>{text}</span>
+                <a onClick={() => this.removeTodo(id)} className={css.delete}>Remove</a>
+              </li>
+            );
+          })}
+        </div>
+        <form className={css.todoForm} onSubmit={this.submitTodo}>
+          <input ref="todoText" type="text" placeholder="Add a todo..." />
+          <button type="submit">Add</button>
+        </form>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => ({
+  todos: state.todos
+});
+
+export default connect(mapStateToProps)(TodosContainer);

common/js/containers/Todos/index.js

@@ -0,0 +1,44 @@
+.todos {
+  width: 300px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  .todo {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0;
+    border-bottom: 1px solid #eee;
+  }
+  .todo .completeInput {
+    flex: 0;
+    width: 25px;
+  }
+  .todo .text {
+    flex: 1;
+    padding-left: 10px;
+
+    &.completed {
+      text-decoration: line-through;
+      color: #ccc;
+    }
+  }
+  .todo .delete {
+    flex: 0;
+    cursor: pointer;
+    color: blue;
+    text-decoration: underline
+  }
+}
+
+.todoForm {
+  width: 300px;
+  margin: 10px 0 0;
+  display: flex;
+
+  input, button {
+    padding: 5px 3px;
+  }
+
+  input { flex: 1; }
+}

common/js/containers/Todos/index.scss

@@ -2,11 +2,11 @@ import { combineReducers } from 'redux';
 import { routerReducer } from 'react-router-redux';
 
 // Import your reducers here
-import example from './example';
+import todos from './todos';
 
 const rootReducer = combineReducers({
   routing: routerReducer,
-  example
+  todos
 });
 
 export default rootReducer;

common/js/lib/.gitkeep

@@ -0,0 +1,26 @@
+import { ADD_TODO, REMOVE_TODO, TOGGLE_TODO } from 'constants';
+
+const defaultState = [];
+
+const todos = (state = defaultState, action) => {
+  switch (action.type) {
+    case ADD_TODO:
+      return [...state, { id: Date.now(), text: action.text, completed: false }];
+
+    case REMOVE_TODO:
+      return state.filter(todo => todo.id !== action.id);
+
+    case TOGGLE_TODO:
+      return state.map(todo => {
+        if (todo.id === action.id) {
+          return { ...todo, completed: !todo.completed };
+        }
+        return todo;
+      });
+
+    default:
+      return state;
+  }
+};
+
+export default todos;