made Exercise 2.7 actually boot up

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

@@ -10,7 +10,8 @@ interface TodoFooterProps {
 }
 
 const TodoFooter = (props: TodoFooterProps) => {
-  const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
+  const { todos } = props;
+  const itemCount = todos ? Object.keys(todos).filter(id => !props.todos[id].completed).length : 0;
 
   return (
     <Stack horizontal horizontalAlign="space-between">

step2-07/exercise/README.md

@@ -4,7 +4,7 @@
 
 If you still have `npm test` running from the last step, stop it using `ctrl+C`. Start the app by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 7 to see results.
 
-1. open up `exercise/src/index.tsx` and wrap `<TodoApp>` with `<Provider store={store}>` as instructed in the comment
+1. open up `exercise/src/index.tsx` and note the `<Provider store={store}>` - see how it wraps the components as the new root component.
 
 2. open up `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps`
 

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

@@ -11,7 +11,8 @@ interface TodoFooterProps {
 }
 
 export const TodoFooter = (props: TodoFooterProps) => {
-  const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
+  const { todos } = props;
+  const itemCount = todos ? Object.keys(todos).filter(id => !props.todos[id].completed).length : 0;
 
   return (
     <Stack horizontal horizontalAlign="space-between">

step2-07/exercise/src/index.tsx

@@ -15,5 +15,10 @@ store.dispatch(actions.addTodo('world'));
 
 initializeIcons();
 
-// TODO: wrap <TodoApp> with a <Provider store={store}> instance here
+// TODO: see how we added Provider is the root element
-ReactDOM.render(<TodoApp />, document.getElementById('app'));
+ReactDOM.render(
+  <Provider store={store}>
+    <TodoApp />
+  </Provider>,
+  document.getElementById('app')
+);

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

@@ -10,7 +10,8 @@ interface TodoFooterProps {
 }
 
 const TodoFooter = (props: TodoFooterProps) => {
-  const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
+  const { todos } = props;
+  const itemCount = todos ? Object.keys(todos).filter(id => !props.todos[id].completed).length : 0;
 
   return (
     <Stack horizontal horizontalAlign="space-between">