Merge branch 'master' into day2-7

step2-07/demo/README.md

@@ -16,7 +16,7 @@ That's right, Redux doesn't just work with React. It can also be used with Vue.j
 
 The store doesn't magically get passed to the views. It has to be supplied by a `react-redux` component called [`<Provider>`](https://react-redux.js.org/api/provider). A `<Provider>` can be placed anywhere, but it's best to just make it available at the root the app:
 
-```tsx
+```js
 const store = createStore(reducers);
 
 const App = () => {
@@ -32,7 +32,7 @@ const App = () => {
 
 `react-redux` provides a [`connect()`](https://react-redux.js.org/api/connect) function that turns the Redux store and dispatch functions into props for React components. The state and action dispatchers are passed along with a `<Provider>` component.
 
-```ts
+```js
 const OldComponent = props => {
   return <div>{props.foo}</div>;
 };

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,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')
+);