editing begin

playground/src/components/TodoList.tsx

@@ -6,17 +6,47 @@ import { TodoItem, FilterTypes } from '../store';
 export interface TodoListProps {
   todos: { [id: string]: TodoItem };
   filter: FilterTypes;
+  edit: (id: string, label: string) => void;
   complete: (id: string) => void;
+  remove: (id: string) => void;
 }
 
 export class TodoList extends React.Component<TodoListProps> {
   render() {
     const { filter, todos } = this.props;
+    let filteredTodos = todos;
+
+    switch (filter) {
+      case 'completed':
+        filteredTodos = Object.keys(todos).reduce(
+          (collection, id) => (todos[id].completed ? { ...collection, id: todos[id] } : collection),
+          {}
+        );
+        break;
+
+      case 'active':
+        filteredTodos = Object.keys(todos).reduce(
+          (collection, id) => (!todos[id].completed ? { ...collection, id: todos[id] } : collection),
+          {}
+        );
+        break;
+    }
+
     return (
       <Stack verticalGap={10}>
-        {Object.keys(todos).map(id => {
-          const todo = todos[id];
-          return <TodoListItem key={id} checked={todo.completed} label={todo.label} complete={this.props.complete} id={id} />;
+        {Object.keys(filteredTodos).map(id => {
+          const todo = filteredTodos[id];
+          return (
+            <TodoListItem
+              key={id}
+              checked={todo.completed}
+              label={todo.label}
+              complete={this.props.complete}
+              id={id}
+              edit={this.props.edit}
+              remove={this.props.remove}
+            />
+          );
         })}
       </Stack>
     );