From 2bac3b5245fed51775db884af4e77e2203b3133c Mon Sep 17 00:00:00 2001
From: Ken <kchau@microsoft.com>
Date: Fri, 15 Feb 2019 13:49:22 -0800
Subject: [PATCH] clean up step 2-2

---
 playground/src/components/TodoApp.tsx    |  2 +-
 playground/src/components/TodoList.tsx   |  2 +-
 step2-01/src/modules/index.ts            |  7 +++++-
 step2-01/src/modules/named.ts            |  3 +++
 step2-02/src/components/TodoApp.tsx      |  2 +-
 step2-02/src/components/TodoList.tsx     | 28 +++++++++++-------------
 step2-02/src/components/TodoListItem.tsx | 19 ++--------------
 webpack.config.js                        |  1 +
 8 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/playground/src/components/TodoApp.tsx b/playground/src/components/TodoApp.tsx
index c297d13..13fb83f 100644
--- a/playground/src/components/TodoApp.tsx
+++ b/playground/src/components/TodoApp.tsx
@@ -6,7 +6,7 @@ import { TodoList } from './TodoList';
 
 export const TodoApp = (props: {}) => (
   <Stack horizontalAlign="center">
-    <Stack style={{ width: 400 }} verticalGap={25}>
+    <Stack style={{ width: 400 }} gap={25}>
       <TodoHeader />
       <TodoList />
       <TodoFooter />
diff --git a/playground/src/components/TodoList.tsx b/playground/src/components/TodoList.tsx
index c80d9c0..3e4b05c 100644
--- a/playground/src/components/TodoList.tsx
+++ b/playground/src/components/TodoList.tsx
@@ -23,7 +23,7 @@ class TodoList extends React.Component<TodoListProps> {
     });
 
     return (
-      <Stack verticalGap={10}>
+      <Stack gap={10}>
         {filteredTodos.map(id => (
           <TodoListItem key={id} id={id} />
         ))}
diff --git a/step2-01/src/modules/index.ts b/step2-01/src/modules/index.ts
index cba0500..fb47500 100644
--- a/step2-01/src/modules/index.ts
+++ b/step2-01/src/modules/index.ts
@@ -1,13 +1,18 @@
-import { namedConst, namedFn, namedObj } from './named';
+import { namedConst, namedFn, namedObj, namedConstBracket, namedConst as c } from './named';
 import * as named from './named';
 
+// Print out the exports
 console.log(namedConst);
+console.log(c);
 console.log(namedFn());
 console.log(namedObj);
+console.log(namedConstBracket);
 
+// Print out exports through module level import
 console.log(named.namedConst);
 console.log(named.namedFn());
 console.log(named.namedObj);
+console.log(named.namedConstBracket);
 
 import DefaultClass from './default';
 
diff --git a/step2-01/src/modules/named.ts b/step2-01/src/modules/named.ts
index 149e31e..3560907 100644
--- a/step2-01/src/modules/named.ts
+++ b/step2-01/src/modules/named.ts
@@ -7,3 +7,6 @@ export function namedFn() {
 export const namedObj = {
   hello: 'world'
 };
+
+const namedConstBracket = 10;
+export { namedConstBracket };
diff --git a/step2-02/src/components/TodoApp.tsx b/step2-02/src/components/TodoApp.tsx
index 3d5a649..c6d13de 100644
--- a/step2-02/src/components/TodoApp.tsx
+++ b/step2-02/src/components/TodoApp.tsx
@@ -19,7 +19,7 @@ export class TodoApp extends React.Component<any, Store> {
     const { filter, todos } = this.state;
     return (
       <Stack horizontalAlign="center">
-        <Stack style={{ width: 400 }} verticalGap={25}>
+        <Stack style={{ width: 400 }} gap={25}>
           <TodoHeader addTodo={this._addTodo} setFilter={this._setFilter} filter={filter} />
           <TodoList complete={this._complete} todos={todos} filter={filter} remove={this._remove} edit={this._edit} />
           <TodoFooter clear={this._clear} todos={todos} />
diff --git a/step2-02/src/components/TodoList.tsx b/step2-02/src/components/TodoList.tsx
index c5d96d2..0b52f46 100644
--- a/step2-02/src/components/TodoList.tsx
+++ b/step2-02/src/components/TodoList.tsx
@@ -11,19 +11,17 @@ interface TodoListProps {
   edit: (id: string, label: string) => void;
 }
 
-export class TodoList extends React.Component<TodoListProps> {
-  render() {
-    const { filter, todos, complete, remove, edit } = this.props;
-    const filteredTodos = Object.keys(todos).filter(id => {
-      return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
-    });
+export const TodoList = (props: TodoListProps) => {
+  const { filter, todos, complete, remove, edit } = this.props;
+  const filteredTodos = Object.keys(todos).filter(id => {
+    return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
+  });
 
-    return (
-      <Stack verticalGap={10}>
-        {filteredTodos.map(id => (
-          <TodoListItem key={id} id={id} todos={todos} complete={complete} remove={remove} edit={edit} />
-        ))}
-      </Stack>
-    );
-  }
-}
+  return (
+    <Stack gap={10}>
+      {filteredTodos.map(id => (
+        <TodoListItem key={id} id={id} todos={todos} complete={complete} remove={remove} edit={edit} />
+      ))}
+    </Stack>
+  );
+};
diff --git a/step2-02/src/components/TodoListItem.tsx b/step2-02/src/components/TodoListItem.tsx
index 1944c37..9491028 100644
--- a/step2-02/src/components/TodoListItem.tsx
+++ b/step2-02/src/components/TodoListItem.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';
-import { mergeStyles } from '@uifabric/styling';
 import { Store } from '../store';
 
 interface TodoListItemProps {
@@ -16,21 +15,7 @@ interface TodoListItemState {
   editLabel: string;
 }
 
-const className = mergeStyles({
-  selectors: {
-    '.clearButton': {
-      visibility: 'hidden'
-    },
-    '&:hover .clearButton': {
-      visibility: 'visible'
-    }
-  }
-});
-
 export class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {
-  /**
-   *
-   */
   constructor(props: TodoListItemProps) {
     super(props);
     this.state = { editing: false, editLabel: undefined };
@@ -41,7 +26,7 @@ export class TodoListItem extends React.Component<TodoListItemProps, TodoListIte
     const item = todos[id];
 
     return (
-      <Stack horizontal className={className} verticalAlign="center" horizontalAlign="space-between">
+      <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
         {!this.state.editing && (
           <>
             <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />
@@ -53,7 +38,7 @@ export class TodoListItem extends React.Component<TodoListItemProps, TodoListIte
         )}
 
         {this.state.editing && (
-          <Stack.Item fillHorizontal>
+          <Stack.Item grow>
             <Stack horizontal>
               <Stack.Item grow>
                 <TextField value={this.state.editLabel} onChange={this.onChange} />
diff --git a/webpack.config.js b/webpack.config.js
index b10fdd7..b58d591 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -37,6 +37,7 @@ module.exports = Object.keys(entries).map(entryPoint => {
       }),
       new ForkTsCheckerWebpackPlugin({
         silent: true,
+        async: false,
         useTypescriptIncrementalApi: true
       })
     ],