From 74aeb5ad4b9efd52efb55050e6b24537bb1bbb3a Mon Sep 17 00:00:00 2001
From: Ken <kchau@microsoft.com>
Date: Sun, 3 Mar 2019 20:14:51 -0800
Subject: [PATCH] fixing up step 2.7 demo

---
 assets/step.css                               |  7 ++++++-
 step2-06/demo/src/components/TodoHeader.tsx   |  2 +-
 step2-06/demo/src/components/TodoListItem.tsx | 17 +++++++----------
 .../exercise/src/components/TodoListItem.tsx  | 17 +++++++----------
 step2-07/demo/src/actions/index.ts            |  2 +-
 step2-07/demo/src/components/TodoHeader.tsx   |  2 +-
 step2-07/demo/src/components/TodoListItem.tsx | 19 ++++++++-----------
 step2-07/demo/src/index.tsx                   |  7 +++----
 8 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/assets/step.css b/assets/step.css
index cd23ac3..db9feca 100644
--- a/assets/step.css
+++ b/assets/step.css
@@ -7,6 +7,11 @@ body {
   padding: 0;
 }
 
+body.ms-Fabric {
+  font-size: 14px;
+  line-height: 20px;
+}
+
 #app {
   flex: 1 1 40%;
   padding: 50px;
@@ -41,7 +46,7 @@ body {
 }
 
 #markdownReadme code {
-  font-family: Consolas,Menlo,Monaco,monospace;
+  font-family: Consolas, Menlo, Monaco, monospace;
   font-size: 0.9em;
   background-color: white;
   padding: 0.2em 0.4em;
diff --git a/step2-06/demo/src/components/TodoHeader.tsx b/step2-06/demo/src/components/TodoHeader.tsx
index c0cc75e..33bc31a 100644
--- a/step2-06/demo/src/components/TodoHeader.tsx
+++ b/step2-06/demo/src/components/TodoHeader.tsx
@@ -68,7 +68,7 @@ class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
 }
 
 const ConnectedTodoHeader = connect(
-  state => {},
+  state => ({}),
   dispatch => ({
     addTodo: label => dispatch(actions.addTodo(label)),
     setFilter: filter => dispatch(actions.setFilter(filter))
diff --git a/step2-06/demo/src/components/TodoListItem.tsx b/step2-06/demo/src/components/TodoListItem.tsx
index 2ac0ec7..b338ed9 100644
--- a/step2-06/demo/src/components/TodoListItem.tsx
+++ b/step2-06/demo/src/components/TodoListItem.tsx
@@ -24,9 +24,7 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
   }
 
   render() {
-    const { id } = this.props;
-    const { todos } = this.context.getState();
-    const dispatch = this.context.dispatch;
+    const { id, todos, complete, remove } = this.props;
 
     const item = todos[id];
 
@@ -34,10 +32,10 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
       <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
         {!this.state.editing && (
           <>
-            <Checkbox label={item.label} checked={item.completed} onChange={() => dispatch(actions.complete(id))} />
+            <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />
             <div>
               <IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />
-              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => dispatch(actions.remove(id))} />
+              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />
             </div>
           </>
         )}
@@ -57,8 +55,7 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
   }
 
   private onEdit = () => {
-    const { id } = this.props;
-    const { todos } = this.context.getState();
+    const { id, todos } = this.props;
     const { label } = todos[id];
 
     this.setState({
@@ -83,9 +80,9 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
 const ConnectedTodoListItem = connect(
   (state: Store) => ({ todos: state.todos }),
   dispatch => ({
-    complete: label => dispatch(actions.addTodo(label)),
-    remove: label => dispatch(actions.addTodo(label)),
-    edit: filter => dispatch(actions.setFilter(filter))
+    complete: id => dispatch(actions.complete(id)),
+    remove: id => dispatch(actions.remove(id)),
+    edit: (id, label) => dispatch(actions.edit(id, label))
   })
 )(TodoListItem);
 
diff --git a/step2-06/exercise/src/components/TodoListItem.tsx b/step2-06/exercise/src/components/TodoListItem.tsx
index 2ac0ec7..b338ed9 100644
--- a/step2-06/exercise/src/components/TodoListItem.tsx
+++ b/step2-06/exercise/src/components/TodoListItem.tsx
@@ -24,9 +24,7 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
   }
 
   render() {
-    const { id } = this.props;
-    const { todos } = this.context.getState();
-    const dispatch = this.context.dispatch;
+    const { id, todos, complete, remove } = this.props;
 
     const item = todos[id];
 
@@ -34,10 +32,10 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
       <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
         {!this.state.editing && (
           <>
-            <Checkbox label={item.label} checked={item.completed} onChange={() => dispatch(actions.complete(id))} />
+            <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />
             <div>
               <IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />
-              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => dispatch(actions.remove(id))} />
+              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />
             </div>
           </>
         )}
@@ -57,8 +55,7 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
   }
 
   private onEdit = () => {
-    const { id } = this.props;
-    const { todos } = this.context.getState();
+    const { id, todos } = this.props;
     const { label } = todos[id];
 
     this.setState({
@@ -83,9 +80,9 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
 const ConnectedTodoListItem = connect(
   (state: Store) => ({ todos: state.todos }),
   dispatch => ({
-    complete: label => dispatch(actions.addTodo(label)),
-    remove: label => dispatch(actions.addTodo(label)),
-    edit: filter => dispatch(actions.setFilter(filter))
+    complete: id => dispatch(actions.complete(id)),
+    remove: id => dispatch(actions.remove(id)),
+    edit: (id, label) => dispatch(actions.edit(id, label))
   })
 )(TodoListItem);
 
diff --git a/step2-07/demo/src/actions/index.ts b/step2-07/demo/src/actions/index.ts
index c88015d..9e2a8c7 100644
--- a/step2-07/demo/src/actions/index.ts
+++ b/step2-07/demo/src/actions/index.ts
@@ -44,7 +44,7 @@ export const actionsWithService = {
 
   edit: (id: string, label: string) => {
     return async (dispatch: any, getState: () => Store) => {
-      dispatch(actions.complete(id));
+      dispatch(actions.edit(id, label));
       await service.update(id, getState().todos[id]);
     };
   }
diff --git a/step2-07/demo/src/components/TodoHeader.tsx b/step2-07/demo/src/components/TodoHeader.tsx
index 997b4db..f4add99 100644
--- a/step2-07/demo/src/components/TodoHeader.tsx
+++ b/step2-07/demo/src/components/TodoHeader.tsx
@@ -68,7 +68,7 @@ class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
 }
 
 const ConnectedTodoHeader = connect(
-  state => {},
+  state => ({}),
   (dispatch: any) => ({
     addTodo: label => dispatch(actionsWithService.addTodo(label)),
     setFilter: filter => dispatch(actions.setFilter(filter))
diff --git a/step2-07/demo/src/components/TodoListItem.tsx b/step2-07/demo/src/components/TodoListItem.tsx
index 947feaa..6b8b674 100644
--- a/step2-07/demo/src/components/TodoListItem.tsx
+++ b/step2-07/demo/src/components/TodoListItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';
-import { actions, actionsWithService } from '../actions';
+import { actionsWithService } from '../actions';
 import { Store } from '../store';
 import { connect } from 'react-redux';
 
@@ -24,9 +24,7 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
   }
 
   render() {
-    const { id } = this.props;
-    const { todos } = this.context.getState();
-    const dispatch = this.context.dispatch;
+    const { id, todos, complete, remove } = this.props;
 
     const item = todos[id];
 
@@ -34,10 +32,10 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
       <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
         {!this.state.editing && (
           <>
-            <Checkbox label={item.label} checked={item.completed} onChange={() => dispatch(actions.complete(id))} />
+            <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />
             <div>
               <IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />
-              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => dispatch(actions.remove(id))} />
+              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />
             </div>
           </>
         )}
@@ -57,8 +55,7 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
   }
 
   private onEdit = () => {
-    const { id } = this.props;
-    const { todos } = this.context.getState();
+    const { id, todos } = this.props;
     const { label } = todos[id];
 
     this.setState({
@@ -83,9 +80,9 @@ class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState>
 const ConnectedTodoListItem = connect(
   (state: Store) => ({ todos: state.todos }),
   (dispatch: any) => ({
-    complete: label => dispatch(actionsWithService.addTodo(label)),
-    remove: label => dispatch(actionsWithService.addTodo(label)),
-    edit: filter => dispatch(actions.setFilter(filter))
+    complete: id => dispatch(actionsWithService.complete(id)),
+    remove: id => dispatch(actionsWithService.remove(id)),
+    edit: (id, label) => dispatch(actionsWithService.edit(id, label))
   })
 )(TodoListItem);
 
diff --git a/step2-07/demo/src/index.tsx b/step2-07/demo/src/index.tsx
index 4cc9e8c..4ddbf60 100644
--- a/step2-07/demo/src/index.tsx
+++ b/step2-07/demo/src/index.tsx
@@ -7,13 +7,12 @@ import { Provider } from 'react-redux';
 import { initializeIcons } from '@uifabric/icons';
 import { composeWithDevTools } from 'redux-devtools-extension';
 import thunk from 'redux-thunk';
-import { FilterTypes } from './store';
+import * as service from './service';
+import { Store, FilterTypes } from './store';
 
 (async () => {
-  // TODO: to make the store pre-populate with data from the service,
-  // replace the todos value below with a call to "await service.getAll()"
   const preloadStore = {
-    todos: {},
+    todos: (await service.getAll()) as Store['todos'],
     filter: 'all' as FilterTypes
   };