combine containers

playground/src/actions/index.ts

@@ -10,7 +10,7 @@ export const actions = {
   edit: (id: string, label: string) => action('edit', { id, label }),
   complete: (id: string) => action('complete', { id }),
   clear: () => action('clear'),
-  filter: (filterTypes: string) => action('filter', { filter: filterTypes })
+  setFilter: (filter: string) => action('setFilter', { filter })
 };
 
 export const actionsWithService = {

playground/src/components/TodoApp.tsx

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

playground/src/components/TodoAppContainer.tsx

@@ -1,28 +0,0 @@
-import { actions, actionsWithService } from '../actions';
-import { Store, FilterTypes } 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: any) {
-  return {
-    add: (label: string) => dispatch(actionsWithService.add(label)),
-    remove: (id: string) => dispatch(actionsWithService.remove(id)),
-    complete: (id: string) => dispatch(actionsWithService.complete(id)),
-    edit: (id: string, label: string) => dispatch(actionsWithService.edit(id, label)),
-    clear: () => dispatch(actionsWithService.clear()),
-    setFilter: (filter: FilterTypes) => dispatch(actions.filter(filter))
-  };
-}
-
-export const TodoAppContainer = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(TodoApp);

playground/src/components/TodoFooter.tsx

@@ -1,14 +1,30 @@
 import React from 'react';
 import { Text, Stack } from '@uifabric/experiments';
-import { TodoItem } from '../store';
+import { TodoItem, Store } from '../store';
 import { DefaultButton } from 'office-ui-fabric-react';
+import { actionsWithService } from '../actions';
+import { connect } from 'react-redux';
 
-export interface TodoFooterProps {
+// Redux Container
-  todos: { [id: string]: TodoItem };
+export function mapStateToProps({ todos, filter }: Store) {
-  clear: () => void;
+  return {
+    todos,
+    filter
+  };
 }
 
-export const TodoFooter = (props: TodoFooterProps) => {
+export function mapDispatchToProps(dispatch: any) {
+  return {
+    clear: () => dispatch(actionsWithService.clear())
+  };
+}
+
+type TodoFooterProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;
+
+export const TodoFooter = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)((props: TodoFooterProps) => {
   const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
 
   return (
@@ -19,4 +35,4 @@ export const TodoFooter = (props: TodoFooterProps) => {
       <DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>
     </Stack>
   );
-};
+});

playground/src/components/TodoHeader.tsx

@@ -1,19 +1,32 @@
 import React from 'react';
 import { Text, Stack } from '@uifabric/experiments';
 import { Pivot, PivotItem, TextField } from 'office-ui-fabric-react';
-import { FilterTypes } from '../store';
+import { FilterTypes, Store } from '../store';
+import { actionsWithService, actions } from '../actions';
+import { connect } from 'react-redux';
 
-export interface TodoHeaderProps {
+function mapStateToProps({ todos, filter }: Store) {
-  add: (label: string) => void;
+  return {
-  remove: (id: string) => void;
+    todos,
-  filter: (filter: FilterTypes) => void;
+    filter
+  };
 }
 
-export interface TodoHeaderState {
+function mapDispatchToProps(dispatch: any) {
+  return {
+    add: (label: string) => dispatch(actionsWithService.add(label)),
+    remove: (id: string) => dispatch(actionsWithService.remove(id)),
+    setFilter: (filter: FilterTypes) => dispatch(actions.setFilter(filter))
+  };
+}
+
+type TodoHeaderProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;
+
+interface TodoHeaderState {
   labelInput: string;
 }
 
-export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
+class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
   constructor(props: TodoHeaderProps) {
     super(props);
     this.state = { labelInput: undefined };
@@ -31,7 +44,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
   };
 
   onFilter = (item: PivotItem) => {
-    this.props.filter(item.props.headerText as FilterTypes);
+    this.props.setFilter(item.props.headerText as FilterTypes);
   };
 
   render() {
@@ -57,3 +70,11 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
     );
   }
 }
+
+// Hook up the Redux state and dispatches
+const component = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TodoHeader);
+
+export { component as TodoHeader };

playground/src/components/TodoList.tsx

@@ -1,17 +1,21 @@
 import React from 'react';
 import { Stack } from '@uifabric/experiments';
 import { TodoListItem } from './TodoListItem';
-import { TodoItem, FilterTypes } from '../store';
+import { Store } from '../store';
+import { connect } from 'react-redux';
 
-export interface TodoListProps {
+function mapStateToProps({ todos, filter }: Store) {
-  todos: { [id: string]: TodoItem };
+  return {
-  filter: FilterTypes;
+    todos,
-  edit: (id: string, label: string) => void;
+    filter
-  complete: (id: string) => void;
+  };
-  remove: (id: string) => void;
 }
 
-export class TodoList extends React.Component<TodoListProps> {
+function mapDispatchToProps(dispatch: any) {}
+
+type TodoListProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;
+
+class TodoList extends React.Component<TodoListProps> {
   render() {
     const { filter, todos } = this.props;
     let filteredTodos: typeof todos = {};
@@ -42,19 +46,16 @@ export class TodoList extends React.Component<TodoListProps> {
       <Stack verticalGap={10}>
         {Object.keys(filteredTodos).map(id => {
           const todo = filteredTodos[id];
-          return (
+          return <TodoListItem key={id} id={id} />;
-            <TodoListItem
-              key={id}
-              checked={todo.completed}
-              label={todo.label}
-              complete={this.props.complete}
-              id={id}
-              edit={this.props.edit}
-              remove={this.props.remove}
-            />
-          );
         })}
       </Stack>
     );
   }
 }
+
+const component = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TodoList);
+
+export { component as TodoList };

playground/src/components/TodoListItem.tsx

@@ -2,17 +2,27 @@ import React from 'react';
 import { Stack, Text } from '@uifabric/experiments';
 import { Checkbox, IconButton, TextField } from 'office-ui-fabric-react';
 import { mergeStyles } from '@uifabric/styling';
+import { Store, FilterTypes } from '../store';
+import { actionsWithService, actions } from '../actions';
+import { connect } from 'react-redux';
 
-export interface TodoListItemProps {
+function mapStateToProps({ todos }: Store) {
-  id: string;
+  return {
-  checked: boolean;
+    todos
-  label: string;
+  };
-  edit: (id: string, label: string) => void;
-  complete: (id: string) => void;
-  remove: (id: string) => void;
 }
 
-export interface TodoListItemState {
+function mapDispatchToProps(dispatch: any) {
+  return {
+    remove: (id: string) => dispatch(actionsWithService.remove(id)),
+    complete: (id: string) => dispatch(actionsWithService.complete(id)),
+    edit: (id: string, label: string) => dispatch(actionsWithService.edit(id, label))
+  };
+}
+
+type TodoListItemProps = { id: string } & ReturnType<typeof mapDispatchToProps> & ReturnType<typeof mapStateToProps>;
+
+interface TodoListItemState {
   editing: boolean;
   editLabel: string;
 }
@@ -28,7 +38,7 @@ const className = mergeStyles({
   }
 });
 
-export class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {
+class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {
   /**
    *
    */
@@ -38,9 +48,12 @@ export class TodoListItem extends React.Component<TodoListItemProps, TodoListIte
   }
 
   onEdit = () => {
+    const { todos, id } = this.props;
+    const { label } = todos[id];
+
     this.setState(prevState => ({
       editing: true,
-      editLabel: prevState.editLabel || this.props.label
+      editLabel: prevState.editLabel || label
     }));
   };
 
@@ -63,13 +76,14 @@ export class TodoListItem extends React.Component<TodoListItemProps, TodoListIte
   };
 
   render() {
-    const { label, checked, complete, remove, id } = this.props;
+    const { todos, id, complete, remove } = this.props;
+    const item = todos[id];
 
     return (
       <Stack horizontal className={className} verticalAlign="center" horizontalAlign="space-between">
         {!this.state.editing && (
           <>
-            <Checkbox label={label} checked={checked} onChange={() => complete(id)} />
+            <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />
             <div>
               <IconButton iconProps={{ iconName: 'Edit' }} className="clearButton" onClick={this.onEdit} />
               <IconButton iconProps={{ iconName: 'Cancel' }} className="clearButton" onClick={() => remove(id)} />
@@ -82,3 +96,10 @@ export class TodoListItem extends React.Component<TodoListItemProps, TodoListIte
     );
   }
 }
+
+const component = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TodoListItem);
+
+export { component as TodoListItem };

playground/src/index.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { createStore, applyMiddleware, compose } from 'redux';
 import { Provider } from 'react-redux';
 import { reducer } from './reducers';
-import { TodoAppContainer } from './components/TodoAppContainer';
+import { TodoApp } from './components/TodoApp';
 import { initializeIcons } from '@uifabric/icons';
 import thunk from 'redux-thunk';
 import * as todosService from './service/todosService';
@@ -26,7 +26,7 @@ initializeIcons();
 
   ReactDOM.render(
     <Provider store={store}>
-      <TodoAppContainer />
+      <TodoApp />
     </Provider>,
     document.getElementById('app')
   );

playground/src/reducers/index.ts

@@ -36,7 +36,7 @@ export const reducer = combineReducers<Store>({
       }
     }
   ),
-  filter: createReducer<Store['filter'], 'filter'>('all', (draft, action) => {
+  filter: createReducer<Store['filter'], 'setFilter'>('all', (draft, action) => {
     return action.filter as FilterTypes;
   })
 });

server/index.js

@@ -26,7 +26,7 @@ app.post('/todos/:id', (req, res) => {
 });
 
 app.delete('/todos/:id', (req, res) => {
-  delete store.todos[req.body.id];
+  delete store.todos[req.params.id];
 });
 
 app.post('/todos', req => {

step06/src/App.tsx

@@ -3,28 +3,27 @@ import { TodoFooter } from './components/TodoFooter';
 import { TodoHeader } from './components/TodoHeader';
 import { TodoList } from './components/TodoList';
 
-
 export class TodoApp extends React.Component<any, any> {
   constructor(props) {
     super(props);
     this.state = {
       todos: [
-        {key: 1, text: 'Todo 1', completed: true},
+        { key: 1, text: 'Todo 1', completed: true },
-        {key: 2, text: 'Todo 2'},
+        { key: 2, text: 'Todo 2' },
-        {key: 3, text: 'Todo 3'},
+        { key: 3, text: 'Todo 3' },
-        {key: 4, text: 'Todo 4'},
+        { key: 4, text: 'Todo 4' }
       ],
       filter: 'all'
-    }
+    };
   }
   render() {
-    const {filter, todos} = this.state;
+    const { filter, todos } = this.state;
     return (
-        <div>
+      <div>
-          <TodoHeader filter={filter} />
+        <TodoHeader filter={filter} />
-          <TodoList todos={todos} filter={filter} />
+        <TodoList todos={todos} filter={filter} />
-          <TodoFooter todos={todos} />
+        <TodoFooter todos={todos} />
-        </div>
+      </div>
     );
   }
 }

webpack.config.js

@@ -55,6 +55,6 @@ module.exports = Object.keys(entries).map(entryPoint => {
     },
     stats: 'minimal',
     mode: 'development',
-    devtool: 'cheap-module-source-map'
+    devtool: 'eval'
   };
 });