fixing up react-redux for all demo examples

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 };