integrating immer

playground/src/components/TodoApp.tsx

@@ -8,18 +8,21 @@ import { TodoItem, FilterTypes } from '../store';
 export interface TodoAppProps {
   todos: { [id: string]: TodoItem };
   filter: FilterTypes;
+  add: (label: string) => void;
+  remove: (id: string) => void;
+  setFilter: (filter: FilterTypes) => void;
 }
 
 export class TodoApp extends React.Component<TodoAppProps> {
   render() {
-    const { todos, filter } = this.props;
+    const { todos, filter, add, remove, setFilter } = this.props;
 
     return (
       <Stack horizontalAlign="center">
         <Stack style={{ width: 650 }} verticalGap={25}>
-          <TodoHeader />
+          <TodoHeader {...{ add, remove, filter }} />
           <TodoList {...{ todos, filter }} />
-          <TodoFooter />
+          <TodoFooter {...{ todos, setFilter }} />
         </Stack>
       </Stack>
     );

playground/src/components/TodoAppContainer.tsx

@@ -1,5 +1,5 @@
 import * as actions from '../actions';
-import { Store } from '../store';
+import { Store, FilterTypes } from '../store';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 import { TodoApp } from './TodoApp';
@@ -14,7 +14,11 @@ export function mapStateToProps({ todos, filter }: Store) {
 export function mapDispatchToProps(dispatch: Dispatch<actions.TodoAction>) {
   return {
     add: (label: string) => dispatch(actions.add(label)),
-    remove: (id: string) => dispatch(actions.remove(id))
+    remove: (id: string) => dispatch(actions.remove(id)),
+    complete: (id: string) => dispatch(actions.complete(id)),
+    completeAll: () => dispatch(actions.completeAll()),
+    clear: () => dispatch(actions.clear()),
+    setFilter: (filter: FilterTypes) => dispatch(actions.filter(filter))
   };
 }
 

playground/src/components/TodoHeader.tsx

@@ -1,23 +1,54 @@
 import React from 'react';
 import { Text, Stack } from '@uifabric/experiments';
-import { Checkbox, Button, Pivot, PivotItem, TextField } from 'office-ui-fabric-react';
+import { Pivot, PivotItem, TextField } from 'office-ui-fabric-react';
+import { add } from '../actions';
 
-export interface TodoFooterProps {}
+export interface TodoHeaderProps {
+  add: (label: string) => void;
+  remove: (id: string) => void;
+}
 
-export const TodoHeader = (props: TodoFooterProps) => {
-  return (
-    <Stack>
-      <Stack horizontal horizontalAlign="center">
-        <Text variant="xxLarge">todos</Text>
+export interface TodoHeaderState {
+  labelInput: string;
+}
+
+export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
+  constructor(props: TodoHeaderProps) {
+    super(props);
+    this.state = { labelInput: undefined };
+  }
+
+  onKeyPress = (evt: React.KeyboardEvent) => {
+    if (evt.charCode === 13) {
+      this.props.add(this.state.labelInput);
+      this.setState({ labelInput: undefined });
+    }
+  };
+
+  onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {
+    this.setState({ labelInput: newValue });
+  };
+
+  render() {
+    return (
+      <Stack>
+        <Stack horizontal horizontalAlign="center">
+          <Text variant="xxLarge">todos</Text>
+        </Stack>
+
+        <TextField
+          placeholder="What needs to be done?"
+          value={this.state.labelInput}
+          onChange={this.onChange}
+          onKeyPress={this.onKeyPress}
+        />
+
+        <Pivot>
+          <PivotItem headerText="all" />
+          <PivotItem headerText="active" />
+          <PivotItem headerText="completed" />
+        </Pivot>
       </Stack>
-
-      <TextField placeholder="What needs to be done?" />
-
-      <Pivot>
-        <PivotItem headerText="all" />
-        <PivotItem headerText="active" />
-        <PivotItem headerText="completed" />
-      </Pivot>
-    </Stack>
-  );
-};
+    );
+  }
+}