clean up step 2-2

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> {
-  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>
+  );
+};

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