fixing up react-redux for all demo examples

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';
 import { actions } from '../actions';
-import { StoreContext } from 'redux-react-hook';
 import { Store } from '../store';
 import { connect } from 'react-redux';
 
@@ -69,7 +68,7 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
   };
 
   private onDoneEdit = () => {
-    this.context.dispatch(actions.edit(this.props.id, this.state.editLabel));
+    this.props.edit(this.props.id, this.state.editLabel);
     this.setState({
       editing: false,
       editLabel: undefined

step2-06/exercise/README.md

@@ -2,16 +2,20 @@
 
 [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
 
-## Bind Redux Store with Class Component
+If you haven't arStart the app by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 6 to see results.
 
-1. Open `exercise/src/components/TodoHeader.tsx`.
+At the beginning of this exercise, the "Add" and "Clear Completed" buttons do not work. We'll be fixing that in this step!
 
-2. Just like the 2.4 exercise, implement `onAdd` and `onFilter` using `this.context.dispatch()` calls to dispatch actions.
+1. Open `exercise/src/index.tsx` and wrap `<TodoApp>` with `<Provider>` as instructed in the comment
 
-## Bind Redux Store with Functional Component
+2. Open `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps`
 
-1. Open `exercise/src/components/TodoFooter.tsx`.
+3. Uncomment the bottom bits of code and fill in `connect()` arguments - feel free to use `TodoListItem.tsx` as a guide
 
-2. Follow the instructions in the file to replace the `todos` const using the `useMappedState()` hook.
+4. Repeat steps 2, 3 for the `TodoHeader.tsx` file
 
-3. Retrieve the dispatch function with `useDispatch()` hook.
+## Bonus exercise
+
+For further reading, go here to learn more about the `mergeProps` and `options` parameters to `connect()`:
+
+https://react-redux.js.org/api/connect

step2-06/exercise/src/components/TodoFooter.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
 import { DefaultButton, Stack, Text } from 'office-ui-fabric-react';
 import { actions } from '../actions';
-import { useMappedState, useDispatch } from 'redux-react-hook';
+import { connect } from 'react-redux';
+import { Store } from '../store';
 
-export const TodoFooter = () => {
-  // TODO: make use of useMappedState(state => state) and the useDispatch functions to get
-  // the Redux store and dispatching actions
-  // HINT: const { todos } = useMappedState(...);
-  // HINT: useDispatch() here too.
-  const todos = {};
-  const dispatch = (...args: any[]) => {};
+// TODO: these ?'s after the keys of an interface makes it optional
+// and can be removed when you finished connecting this component
+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;
 
@@ -18,7 +21,23 @@ export const TodoFooter = () => {
       <Text>
         {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>
-      <DefaultButton onClick={() => dispatch(actions.clear())}>Clear Completed</DefaultButton>
+      <DefaultButton onClick={() => clear()}>Clear Completed</DefaultButton>
     </Stack>
   );
 };
+
+// TODO: write out the mapping functions for state and dispatch functions
+/*
+  HINT: you can get started by copy pasting below code as arguments to connect()
+
+  (state: Store) => ({
+    // TODO: mapping for state
+    // HINT: look at what the component needed from the props interface
+  }),
+  dispatch => ({
+    // TODO: mapping for dispatch actions
+    // HINT: look at what the component needed from the props interface
+  })
+*/
+const ConnectedTodoFooter = connect()(TodoFooter);
+export { ConnectedTodoFooter as TodoFooter };

step2-06/exercise/src/components/TodoHeader.tsx

@@ -2,14 +2,21 @@ import React from 'react';
 import { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';
 import { FilterTypes } from '../store';
 import { actions } from '../actions';
-import { StoreContext } from 'redux-react-hook';
+import { connect } from 'react-redux';
+
+// TODO: these ?'s after the keys of an interface makes it optional
+// and can be removed when you finished connecting this component
+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,8 +56,7 @@ export class TodoHeader extends React.Component<{}, TodoHeaderState> {
   }
 
   private onAdd = () => {
-    // TODO: Fill in a dispatch call to add the todo item
-    // HINT: this.context.dispatch(...);
+    this.props.addTodo(this.state.labelInput);
     this.setState({ labelInput: undefined });
   };
 
@@ -59,9 +65,22 @@ export class TodoHeader extends React.Component<{}, TodoHeaderState> {
   };
 
   private onFilter = (item: PivotItem) => {
-    // TODO: Fill in the dispatch call to set the filter
-    // HINT: this.context.dispatch(...);
+    this.props.setFilter(item.props.headerText as FilterTypes);
   };
 }
 
-// TODO: set the context type of this Class to StoreContext
+// TODO: write out the mapping functions for state and dispatch functions
+/*
+  HINT: you can get started by copy pasting below code as arguments to connect()
+
+  (state: Store) => ({
+    // TODO: mapping for state
+    // HINT: look at what the component needed from the props interface
+  }),
+  dispatch => ({
+    // TODO: mapping for dispatch actions
+    // HINT: look at what the component needed from the props interface
+  })
+*/
+const ConnectedTodoHeader = connect()(TodoHeader);
+export { ConnectedTodoHeader as TodoHeader };

step2-06/exercise/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-06/exercise/src/components/TodoListItem.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';
 import { actions } from '../actions';
-import { StoreContext } from 'redux-react-hook';
+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 };
@@ -63,7 +68,7 @@ export class TodoListItem extends React.Component<TodoListItemProps, TodoListIte
   };
 
   private onDoneEdit = () => {
-    this.context.dispatch(actions.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 => ({
+    complete: label => dispatch(actions.addTodo(label)),
+    remove: label => dispatch(actions.addTodo(label)),
+    edit: filter => dispatch(actions.setFilter(filter))
+  })
+)(TodoListItem);
+
+export { ConnectedTodoListItem as TodoListItem };

step2-06/exercise/src/index.tsx

@@ -5,15 +5,11 @@ import { createStore } from 'redux';
 import { TodoApp } from './components/TodoApp';
 import { initializeIcons } from '@uifabric/icons';
 import { composeWithDevTools } from 'redux-devtools-extension';
-import { StoreContext } from 'redux-react-hook';
+// TODO: import { Provider } from 'react-redux';
 
 const store = createStore(reducer, {}, composeWithDevTools());
 
 initializeIcons();
 
-ReactDOM.render(
-  <StoreContext.Provider value={store}>
-    <TodoApp />
-  </StoreContext.Provider>,
-  document.getElementById('app')
-);
+// TODO: wrap the <TodoApp> component with a <Provider store={store}> component
+ReactDOM.render(<TodoApp />, document.getElementById('app'));