fixing up step 2-4 exercise

step2-04/exercise/src/components/TodoApp.tsx

@@ -20,13 +20,14 @@ export class TodoApp extends React.Component<any, Store> {
     return (
       <TodoContext.Provider
         value={{
-          ...this.state,
-          addTodo: this._addTodo,
-          remove: this._remove,
-          complete: this._complete,
-          clear: this._clear,
-          setFilter: this._setFilter,
-          edit: this._edit
+          ...this.state
+          // TODO: put the missing functions into the context value
+          // addTodo: this._addTodo,
+          // remove: this._remove,
+          // complete: this._complete,
+          // clear: this._clear,
+          // setFilter: this._setFilter,
+          // edit: this._edit
         }}
       >
         <Stack horizontalAlign="center">

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

@@ -3,15 +3,19 @@ import { DefaultButton, Stack, Text } from 'office-ui-fabric-react';
 import { TodoContext } from '../TodoContext';
 
 export const TodoFooter = () => {
-  const context = useContext(TodoContext);
-  const itemCount = Object.keys(context.todos).filter(id => !context.todos[id].completed).length;
+  // TODO: replace the following with a useContext(TodoContext) calls
+  const todos = {};
+  const clear = () => {};
+  // - end of exercise for this file -
+
+  const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length;
 
   return (
     <Stack horizontal horizontalAlign="space-between">
       <Text>
         {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>
-      <DefaultButton onClick={() => context.clear()}>Clear Completed</DefaultButton>
+      <DefaultButton onClick={() => clear()}>Clear Completed</DefaultButton>
     </Stack>
   );
 };

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

@@ -48,7 +48,8 @@ export class TodoHeader extends React.Component<{}, TodoHeaderState> {
   }
 
   private onAdd = () => {
-    this.context.addTodo(this.state.labelInput);
+    // TODO: insert a this.context.addTodo call
+    // HINT: this.context.addTodo(this.state.labelInput);
     this.setState({ labelInput: undefined });
   };
 
@@ -57,8 +58,9 @@ export class TodoHeader extends React.Component<{}, TodoHeaderState> {
   };
 
   private onFilter = (item: PivotItem) => {
-    this.context.setFilter(item.props.headerText as FilterTypes);
+    // TODO: insert a this.context.setFilter call
+    // HINT: this.context.setFilter(item.props.headerText as FilterTypes);
   };
 }
 
-TodoHeader.contextType = TodoContext;
+// TODO: TodoHeader.contextType = TodoContext;