Step 0 - With solutions

src/components/todo/index.js

@@ -1 +1,2 @@
-export { default } from './todo.container'
+// CODELAB: from container
+export { default } from './todo'

src/components/todo/todo.container.js

@@ -1,10 +1 @@
-import { inject } from 'k-simple-state/react'
-import Component from './todo'
-
-export default inject((store, { id }) => ({
-  // data
-  ...store.data.todos.all.get(id),
-  // callbacks
-  onRemove: () => store.dispatch({ type: '@@ui/TODO_ON_REMOVE', payload: id }),
-  onComplete: () => store.dispatch({ type: '@@ui/TODO_ON_COMPLETE', payload: id }),
-}))(Component)
+// CODELAB: write a container that retrieve the specified todo from its id

src/components/todo/todo.jsx

@@ -1,79 +1,7 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import { onlyUpdateForPropTypes } from 'recompose'
-import cn from 'classnames'
 
-const Todo = ({
-  // style
-  style,
-  className,
-  // data
-  label,
-  completed,
-  editing,
-  // callbacks
-  onComplete,
-  onEdit,
-  onRemove,
-  onUpdate,
-  onChange,
-  onKeyDown,
-}) => (
-  <li style={style} className={cn(className, { completed, editing })}>
-    <div className="view">
-      <input
-        className="toggle"
-        type="checkbox"
-        checked={completed}
-        onChange={onComplete}
-      />
-      <label htmlFor="editField" onDoubleClick={onEdit}>
-        {label}
-      </label>
-      <button className="destroy" onClick={onRemove} />
-    </div>
-    <input
-      className="edit"
-      value={editing}
-      onBlur={onUpdate}
-      onChange={onChange}
-      onKeyDown={onKeyDown}
-    />
-  </li>
+const Todo = () => (
+  <li />
 )
 
-Todo.propTypes = {
-  // style
-  style: PropTypes.object,
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  // data
-  label: PropTypes.string,
-  completed: PropTypes.bool,
-  editing: PropTypes.bool,
-  // callbacks
-  onComplete: PropTypes.func,
-  onEdit: PropTypes.func,
-  onRemove: PropTypes.func,
-  onUpdate: PropTypes.func,
-  onChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-}
-
-Todo.defaultProps = {
-  // style
-  style: undefined,
-  className: undefined,
-  // data
-  label: undefined,
-  completed: false,
-  editing: false,
-  // callbacks
-  onComplete: undefined,
-  onEdit: undefined,
-  onRemove: undefined,
-  onUpdate: undefined,
-  onChange: undefined,
-  onKeyDown: undefined,
-}
-
-export default onlyUpdateForPropTypes(Todo)
+export default Todo

src/components/todos/todos.container.js

@@ -3,6 +3,6 @@ import Component from './todos'
 
 export default inject(store => ({
   todos: store.data.todos[store.ui.footer.get().filter].getKeys(),
-  allCompleted: store.data.todos.all.getLength() === store.data.todos.completed.getLength(),
+  allCompleted: store.ui.footer.todosLeft === 0,
   onCompleteAll: () => store.dispatch({ type: '@@ui/HEADER_ON_COMPLETE_ALL' }),
 }))(Component)

src/components/todos/todos.jsx

@@ -26,7 +26,8 @@ const Todos = ({
       </Fragment>
     }
     <ul style={style} className={cn('todo-list', className)}>
-      {todos.map(id => <Todo key={id} id={id} />)}
+      {/* CODELAB: Make it from container */}
+      <Todo label="My hardcoded todo" />
     </ul>
   </section>
 )

src/store/index.js

@@ -5,7 +5,7 @@ export default createStore(
   {
     data: {
       todos: {
-        all: { type: 'keyValue', key: 'id' },
+        // CODELAB: add a sub store 'all'
         completed: keyValue({ key: 'id' }),
         active: keyValue({ key: 'id' }),
       },
@@ -16,7 +16,7 @@ export default createStore(
           todos: 0,
           todosLeft: 0,
           todosCompleted: 0,
-          filter: 'all',
+          filter: 'active',
         },
       }),
       newTodo: { type: 'simpleObject', defaultData: '' },

src/store/listeners/index.js

@@ -2,7 +2,7 @@ import { when } from 'k-simple-state'
 import { todos, footer } from './reactions'
 
 export default [
-  when('@@ui/APP_LOADED')(todos.load),
+  // CODELAB: add an event that call 'todos.load' reaction on application init
   when('@@ui/ADD_TODO_KEYDOWN', action => action.payload === 13)(todos.add),
   when('@@ui/ADD_TODO_KEYDOWN', action => action.payload === 27)(todos.clearNew),
   when('@@ui/ADD_TODO_CHANGE')(todos.setNew),

src/store/listeners/reactions/todos.js

@@ -1,11 +1,6 @@
 import { reaction } from 'k-simple-state'
 
-export const load = reaction((action, store) => {
-  store.data.todos.all.set([
-    { id: 1, label: 'write README.md', completed: false },
-    { id: 2, label: 'write other examples', completed: false },
-  ])
-})
+// CODELAB: Add the 'load' reaction that add two TODOs
 
 export const add = reaction((action, store) => {
   const label = store.ui.newTodo.get()