combine containers

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 {
-  todos: { [id: string]: TodoItem };
-  filter: FilterTypes;
-  add: (label: string) => void;
-  remove: (id: string) => void;
-  edit: (id: string, label: string) => void;
-  complete: (id: string) => void;
-  clear: () => void;
-  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>
-    );
-  }
-}
+export const TodoApp = (props: {}) => (
+  <Stack horizontalAlign="center">
+    <Stack style={{ width: 400 }} verticalGap={25}>
+      <TodoHeader />
+      <TodoList />
+      <TodoFooter />
+    </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 {
-  todos: { [id: string]: TodoItem };
-  clear: () => void;
+// Redux Container
+export function mapStateToProps({ todos, filter }: Store) {
+  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 {
-  add: (label: string) => void;
-  remove: (id: string) => void;
-  filter: (filter: FilterTypes) => void;
+function mapStateToProps({ todos, filter }: Store) {
+  return {
+    todos,
+    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 {
-  todos: { [id: string]: TodoItem };
-  filter: FilterTypes;
-  edit: (id: string, label: string) => void;
-  complete: (id: string) => void;
-  remove: (id: string) => void;
+function mapStateToProps({ todos, filter }: Store) {
+  return {
+    todos,
+    filter
+  };
 }
 
-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 (
-            <TodoListItem
-              key={id}
-              checked={todo.completed}
-              label={todo.label}
-              complete={this.props.complete}
-              id={id}
-              edit={this.props.edit}
-              remove={this.props.remove}
-            />
-          );
+          return <TodoListItem key={id} id={id} />;
         })}
       </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 {
-  id: string;
-  checked: boolean;
-  label: string;
-  edit: (id: string, label: string) => void;
-  complete: (id: string) => void;
-  remove: (id: string) => void;
+function mapStateToProps({ todos }: Store) {
+  return {
+    todos
+  };
 }
 
-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 };