Merge branch 'master' into day2-7

step2-07/exercise/README.md

@@ -4,6 +4,8 @@
 
 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.
 
+At the beginning of this exercise, the "Add" and "Clear Completed" buttons do not work. We'll be fixing that in this step!
+
 1. Open `exercise/src/index.tsx` and wrap `<TodoApp>` with `<Provider>` as instructed in the comment
 
 2. Open `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
-ReactDOM.render(<TodoApp />, document.getElementById('app'));
+// TODO: see how we added Provider is the root element
+ReactDOM.render(
+  <Provider store={store}>
+    <TodoApp />
+  </Provider>,
+  document.getElementById('app')
+);