clean up step 2-2

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 />

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} />
         ))}

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';
 

step2-01/src/modules/named.ts

@@ -7,3 +7,6 @@ export function namedFn() {
 export const namedObj = {
   hello: 'world'
 };
+
+const namedConstBracket = 10;
+export { namedConstBracket };

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} />

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> {
+export const TodoList = (props: TodoListProps) => {
-  render() {
+  const { filter, todos, complete, remove, edit } = this.props;
-    const { filter, todos, complete, remove, edit } = this.props;
+  const filteredTodos = Object.keys(todos).filter(id => {
-    const filteredTodos = Object.keys(todos).filter(id => {
+    return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
-      return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
+  });
-    });
 
-    return (
+  return (
-      <Stack verticalGap={10}>
+    <Stack gap={10}>
-        {filteredTodos.map(id => (
+      {filteredTodos.map(id => (
-          <TodoListItem key={id} id={id} todos={todos} complete={complete} remove={remove} edit={edit} />
+        <TodoListItem key={id} id={id} todos={todos} complete={complete} remove={remove} edit={edit} />
-        ))}
+      ))}
-      </Stack>
+    </Stack>
-    );
+  );
-  }
+};
-}

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} />

webpack.config.js

@@ -37,6 +37,7 @@ module.exports = Object.keys(entries).map(entryPoint => {
       }),
       new ForkTsCheckerWebpackPlugin({
         silent: true,
+        async: false,
         useTypescriptIncrementalApi: true
       })
     ],