fixing up react-redux for all demo examples

step2-07/demo/src/components/TodoFooter.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
 import { DefaultButton, Stack, Text } from 'office-ui-fabric-react';
 import { actionsWithService } from '../actions';
-import { useMappedState, useDispatch } from 'redux-react-hook';
+import { connect } from 'react-redux';
+import { Store } from '../store';
 
-export const TodoFooter = () => {
-  const { todos } = useMappedState(state => state);
-  const dispatch = useDispatch();
+interface TodoFooterProps {
+  todos: Store['todos'];
+  clear: () => void;
+}
+
+const TodoFooter = (props: TodoFooterProps) => {
+  const { todos, clear } = props;
 
   const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length;
 
@@ -14,7 +19,18 @@ export const TodoFooter = () => {
       <Text>
         {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>
-      <DefaultButton onClick={() => dispatch(actionsWithService.clear())}>Clear Completed</DefaultButton>
+      <DefaultButton onClick={() => clear()}>Clear Completed</DefaultButton>
     </Stack>
   );
 };
+
+const ConnectedTodoFooter = connect(
+  (state: Store) => ({
+    todos: state.todos
+  }),
+  (dispatch: any) => ({
+    clear: () => dispatch(actionsWithService.clear())
+  })
+)(TodoFooter);
+
+export { ConnectedTodoFooter as TodoFooter };

step2-07/demo/src/components/TodoHeader.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';
 import { FilterTypes } from '../store';
-import { actionsWithService, actions } from '../actions';
-import { StoreContext } from 'redux-react-hook';
+import { actions, actionsWithService } from '../actions';
+import { connect } from 'react-redux';
+
+interface TodoHeaderProps {
+  addTodo: (label: string) => void;
+  setFilter: (filter: FilterTypes) => void;
+}
 
 interface TodoHeaderState {
   labelInput: string;
 }
 
-export class TodoHeader extends React.Component<{}, TodoHeaderState> {
-  constructor(props: {}) {
+class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
+  constructor(props: TodoHeaderProps) {
     super(props);
     this.state = { labelInput: undefined };
   }
@@ -49,7 +54,7 @@ export class TodoHeader extends React.Component<{}, TodoHeaderState> {
   }
 
   private onAdd = () => {
-    this.context.dispatch(actionsWithService.addTodo(this.state.labelInput));
+    this.props.addTodo(this.state.labelInput);
     this.setState({ labelInput: undefined });
   };
 
@@ -58,8 +63,16 @@ export class TodoHeader extends React.Component<{}, TodoHeaderState> {
   };
 
   private onFilter = (item: PivotItem) => {
-    this.context.dispatch(actions.setFilter(item.props.headerText as FilterTypes));
+    this.props.setFilter(item.props.headerText as FilterTypes);
   };
 }
 
-TodoHeader.contextType = StoreContext;
+const ConnectedTodoHeader = connect(
+  state => {},
+  (dispatch: any) => ({
+    addTodo: label => dispatch(actionsWithService.addTodo(label)),
+    setFilter: filter => dispatch(actions.setFilter(filter))
+  })
+)(TodoHeader);
+
+export { ConnectedTodoHeader as TodoHeader };

step2-07/demo/src/components/TodoList.tsx

@@ -1,10 +1,16 @@
 import React from 'react';
 import { Stack } from 'office-ui-fabric-react';
 import { TodoListItem } from './TodoListItem';
-import { useMappedState } from 'redux-react-hook';
+import { connect } from 'react-redux';
+import { Store } from '../store';
 
-export const TodoList = () => {
-  const { filter, todos } = useMappedState(state => state);
+interface TodoListProps {
+  todos: Store['todos'];
+  filter: Store['filter'];
+}
+
+const TodoList = (props: TodoListProps) => {
+  const { filter, todos } = props;
   const filteredTodos = Object.keys(todos).filter(id => {
     return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
   });
@@ -17,3 +23,6 @@ export const TodoList = () => {
     </Stack>
   );
 };
+
+const ConnectedTodoList = connect((state: Store) => ({ ...state }))(TodoList);
+export { ConnectedTodoList as TodoList };

step2-07/demo/src/components/TodoListItem.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';
-import { actionsWithService } from '../actions';
-import { StoreContext } from 'redux-react-hook';
+import { actions, actionsWithService } from '../actions';
+import { Store } from '../store';
+import { connect } from 'react-redux';
 
 interface TodoListItemProps {
   id: string;
+  todos: Store['todos'];
+  complete: (id: string) => void;
+  remove: (id: string) => void;
+  edit: (id: string, label: string) => void;
 }
 
 interface TodoListItemState {
@@ -12,7 +17,7 @@ interface TodoListItemState {
   editLabel: string;
 }
 
-export class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {
+class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {
   constructor(props: TodoListItemProps) {
     super(props);
     this.state = { editing: false, editLabel: undefined };
@@ -29,10 +34,10 @@ export class TodoListItem extends React.Component<TodoListItemProps, TodoListIte
       <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
         {!this.state.editing && (
           <>
-            <Checkbox label={item.label} checked={item.completed} onChange={() => dispatch(actionsWithService.complete(id))} />
+            <Checkbox label={item.label} checked={item.completed} onChange={() => dispatch(actions.complete(id))} />
             <div>
               <IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />
-              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => dispatch(actionsWithService.remove(id))} />
+              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => dispatch(actions.remove(id))} />
             </div>
           </>
         )}
@@ -63,7 +68,7 @@ export class TodoListItem extends React.Component<TodoListItemProps, TodoListIte
   };
 
   private onDoneEdit = () => {
-    this.context.dispatch(actionsWithService.edit(this.props.id, this.state.editLabel));
+    this.props.edit(this.props.id, this.state.editLabel);
     this.setState({
       editing: false,
       editLabel: undefined
@@ -75,4 +80,13 @@ export class TodoListItem extends React.Component<TodoListItemProps, TodoListIte
   };
 }
 
-TodoListItem.contextType = StoreContext;
+const ConnectedTodoListItem = connect(
+  (state: Store) => ({ todos: state.todos }),
+  (dispatch: any) => ({
+    complete: label => dispatch(actionsWithService.addTodo(label)),
+    remove: label => dispatch(actionsWithService.addTodo(label)),
+    edit: filter => dispatch(actions.setFilter(filter))
+  })
+)(TodoListItem);
+
+export { ConnectedTodoListItem as TodoListItem };

step2-07/demo/src/index.tsx

@@ -3,9 +3,9 @@ import ReactDOM from 'react-dom';
 import { reducer } from './reducers';
 import { createStore, applyMiddleware } from 'redux';
 import { TodoApp } from './components/TodoApp';
+import { Provider } from 'react-redux';
 import { initializeIcons } from '@uifabric/icons';
 import { composeWithDevTools } from 'redux-devtools-extension';
-import { StoreContext } from 'redux-react-hook';
 import thunk from 'redux-thunk';
 import { FilterTypes } from './store';
 
@@ -22,9 +22,9 @@ import { FilterTypes } from './store';
   initializeIcons();
 
   ReactDOM.render(
-    <StoreContext.Provider value={store}>
+    <Provider store={store}>
       <TodoApp />
-    </StoreContext.Provider>,
+    </Provider>,
     document.getElementById('app')
   );
 })();