adding a redux todo list to playground

playground/src/components/TodoApp.tsx

@@ -1,17 +1,24 @@
 import React from 'react';
-import { Stack, Text } from '@uifabric/experiments';
-import { TodoList } from './TodoList';
+import { Stack } from '@uifabric/experiments';
 import { TodoFooter } from './TodoFooter';
-import { Pivot, PivotItem } from 'office-ui-fabric-react';
 import { TodoHeader } from './TodoHeader';
+import { TodoList } from './TodoList';
+import { TodoItem, FilterTypes } from '../store';
 
-export class TodoApp extends React.Component {
+export interface TodoAppProps {
+  todos: { [id: string]: TodoItem };
+  filter: FilterTypes;
+}
+
+export class TodoApp extends React.Component<TodoAppProps> {
   render() {
+    const { todos, filter } = this.props;
+
     return (
       <Stack horizontalAlign="center">
         <Stack style={{ width: 650 }} verticalGap={25}>
           <TodoHeader />
-          <TodoList />
+          <TodoList {...{ todos, filter }} />
           <TodoFooter />
         </Stack>
       </Stack>

playground/src/components/TodoAppContainer.tsx

@@ -0,0 +1,24 @@
+import * as actions from '../actions';
+import { Store } from '../store';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { TodoApp } from './TodoApp';
+
+export function mapStateToProps({ todos, filter }: Store) {
+  return {
+    todos,
+    filter
+  };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<actions.TodoAction>) {
+  return {
+    add: (label: string) => dispatch(actions.add(label)),
+    remove: (id: string) => dispatch(actions.remove(id))
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TodoApp);

playground/src/components/TodoFooter.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Text, Stack } from '@uifabric/experiments';
-import { Checkbox, Button, Pivot, PivotItem } from 'office-ui-fabric-react';
 
 export interface TodoFooterProps {}
 

playground/src/components/TodoHeader.tsx

@@ -8,7 +8,7 @@ export const TodoHeader = (props: TodoFooterProps) => {
   return (
     <Stack>
       <Stack horizontal horizontalAlign="center">
-        <Text variant="large">Yet Another To Do Example Application</Text>
+        <Text variant="xxLarge">todos</Text>
       </Stack>
 
       <TextField placeholder="What needs to be done?" />

playground/src/components/TodoList.tsx

@@ -1,16 +1,22 @@
 import React from 'react';
 import { Stack } from '@uifabric/experiments';
 import { TodoListItem } from './TodoListItem';
-import { Pivot, PivotItem } from 'office-ui-fabric-react';
+import { TodoItem, FilterTypes } from '../store';
 
-export class TodoList extends React.Component {
+export interface TodoListProps {
+  todos: { [id: string]: TodoItem };
+  filter: FilterTypes;
+}
+
+export class TodoList extends React.Component<TodoListProps> {
   render() {
+    const { filter, todos } = this.props;
     return (
       <Stack verticalGap={10}>
-        <TodoListItem checked={false} label="nothing" />
-        <TodoListItem checked={false} label="nothing" />
-        <TodoListItem checked={false} label="nothing" />
-        <TodoListItem checked={false} label="nothing" />
+        {Object.keys(todos).map(id => {
+          const todo = todos[id];
+          return <TodoListItem key={id} checked={todo.completed} label={todo.label} />;
+        })}
       </Stack>
     );
   }