editing begin

playground/src/components/TodoApp.tsx

@@ -10,20 +10,22 @@ export interface TodoAppProps {
   filter: FilterTypes;
   add: (label: string) => void;
   remove: (id: string) => void;
+  edit: (id: string, label: string) => void;
   complete: (id: string) => void;
+  clear: () => void;
   setFilter: (filter: FilterTypes) => void;
 }
 
 export class TodoApp extends React.Component<TodoAppProps> {
   render() {
-    const { todos, filter, add, remove, setFilter, complete } = this.props;
+    const { todos, filter, add, remove, setFilter, complete, clear, edit } = this.props;
 
     return (
       <Stack horizontalAlign="center">
-        <Stack style={{ width: 650 }} verticalGap={25}>
-          <TodoHeader {...{ add, remove, filter }} />
-          <TodoList {...{ todos, filter, complete }} />
-          <TodoFooter {...{ todos, setFilter }} />
+        <Stack style={{ width: 400 }} verticalGap={25}>
+          <TodoHeader {...{ add, remove, filter: setFilter }} />
+          <TodoList {...{ todos, filter, complete, remove, edit }} />
+          <TodoFooter {...{ todos, setFilter, clear }} />
         </Stack>
       </Stack>
     );

playground/src/components/TodoAppContainer.tsx

@@ -17,6 +17,7 @@ export function mapDispatchToProps(dispatch: Dispatch<actions.TodoAction>) {
     remove: (id: string) => dispatch(actions.remove(id)),
     complete: (id: string) => dispatch(actions.complete(id)),
     completeAll: () => dispatch(actions.completeAll()),
+    edit: (id: string, label: string) => dispatch(actions.edit(id, label)),
     clear: () => dispatch(actions.clear()),
     setFilter: (filter: FilterTypes) => dispatch(actions.filter(filter))
   };

playground/src/components/TodoFooter.tsx

@@ -1,12 +1,22 @@
 import React from 'react';
 import { Text, Stack } from '@uifabric/experiments';
+import { TodoItem } from '../store';
+import { DefaultButton } from 'office-ui-fabric-react';
 
-export interface TodoFooterProps {}
+export interface TodoFooterProps {
+  todos: { [id: string]: TodoItem };
+  clear: () => void;
+}
 
 export const TodoFooter = (props: TodoFooterProps) => {
+  const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
+
   return (
-    <Stack horizontal horizontalAlign="center">
-      <Text>1 item left</Text>
+    <Stack horizontal horizontalAlign="space-between">
+      <Text>
+        {itemCount} item{itemCount > 1 ? 's' : ''} left
+      </Text>
+      <DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>
     </Stack>
   );
 };

playground/src/components/TodoHeader.tsx

@@ -2,10 +2,12 @@ import React from 'react';
 import { Text, Stack } from '@uifabric/experiments';
 import { Pivot, PivotItem, TextField } from 'office-ui-fabric-react';
 import { add } from '../actions';
+import { FilterTypes } from '../store';
 
 export interface TodoHeaderProps {
   add: (label: string) => void;
   remove: (id: string) => void;
+  filter: (filter: FilterTypes) => void;
 }
 
 export interface TodoHeaderState {
@@ -29,6 +31,10 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
     this.setState({ labelInput: newValue });
   };
 
+  onFilter = (item: PivotItem) => {
+    this.props.filter(item.props.headerText as FilterTypes);
+  };
+
   render() {
     return (
       <Stack>
@@ -43,7 +49,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
           onKeyPress={this.onKeyPress}
         />
 
-        <Pivot>
+        <Pivot onLinkClick={this.onFilter}>
           <PivotItem headerText="all" />
           <PivotItem headerText="active" />
           <PivotItem headerText="completed" />

playground/src/components/TodoList.tsx

@@ -6,17 +6,47 @@ import { TodoItem, FilterTypes } from '../store';
 export interface TodoListProps {
   todos: { [id: string]: TodoItem };
   filter: FilterTypes;
+  edit: (id: string, label: string) => void;
   complete: (id: string) => void;
+  remove: (id: string) => void;
 }
 
 export class TodoList extends React.Component<TodoListProps> {
   render() {
     const { filter, todos } = this.props;
+    let filteredTodos = todos;
+
+    switch (filter) {
+      case 'completed':
+        filteredTodos = Object.keys(todos).reduce(
+          (collection, id) => (todos[id].completed ? { ...collection, id: todos[id] } : collection),
+          {}
+        );
+        break;
+
+      case 'active':
+        filteredTodos = Object.keys(todos).reduce(
+          (collection, id) => (!todos[id].completed ? { ...collection, id: todos[id] } : collection),
+          {}
+        );
+        break;
+    }
+
     return (
       <Stack verticalGap={10}>
-        {Object.keys(todos).map(id => {
-          const todo = todos[id];
-          return <TodoListItem key={id} checked={todo.completed} label={todo.label} complete={this.props.complete} id={id} />;
+        {Object.keys(filteredTodos).map(id => {
+          const todo = filteredTodos[id];
+          return (
+            <TodoListItem
+              key={id}
+              checked={todo.completed}
+              label={todo.label}
+              complete={this.props.complete}
+              id={id}
+              edit={this.props.edit}
+              remove={this.props.remove}
+            />
+          );
         })}
       </Stack>
     );

playground/src/components/TodoListItem.tsx

@@ -1,31 +1,84 @@
 import React from 'react';
-import { Stack } from '@uifabric/experiments';
-import { Checkbox, IconButton } from 'office-ui-fabric-react';
+import { Stack, Text } from '@uifabric/experiments';
+import { Checkbox, IconButton, TextField } from 'office-ui-fabric-react';
 import { mergeStyles } from '@uifabric/styling';
 
 export interface TodoListItemProps {
   id: string;
   checked: boolean;
   label: string;
+  edit: (id: string, label: string) => void;
   complete: (id: string) => void;
+  remove: (id: string) => void;
 }
 
-export const TodoListItem = (props: TodoListItemProps) => {
-  const className = mergeStyles({
-    selectors: {
-      ':global(.clearButton)': {
-        display: 'none'
-      },
-      '&:hover :global(.clearButton)': {
-        display: 'block'
-      }
-    }
-  });
+export interface TodoListItemState {
+  editing: boolean;
+  editLabel: string;
+}
 
-  return (
-    <Stack horizontal className={className}>
-      <Checkbox label={props.label} checked={props.checked} onChange={() => props.complete(props.id)} />
-      <IconButton iconProps={{ iconName: 'Cancel' }} className="clearButton" />
-    </Stack>
-  );
-};
+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 };
+  }
+
+  onEdit = () => {
+    this.setState(prevState => ({
+      editing: true,
+      editLabel: prevState.editLabel || this.props.label
+    }));
+  };
+
+  onDoneEdit = () => {
+    this.props.edit(this.props.id, this.state.editLabel);
+    this.setState(prevState => ({
+      editing: false,
+      editLabel: undefined
+    }));
+  };
+
+  onKeyDown = (evt: React.KeyboardEvent) => {
+    if (evt.which === 13) {
+      this.onDoneEdit();
+    }
+  };
+
+  onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {
+    this.setState({ editLabel: newValue });
+  };
+
+  render() {
+    const { label, checked, complete, remove, id } = this.props;
+
+    return (
+      <Stack horizontal className={className} verticalAlign="center" horizontalAlign="space-between">
+        {!this.state.editing && (
+          <>
+            <Checkbox label={label} checked={checked} onChange={() => complete(id)} />
+            <div>
+              <IconButton iconProps={{ iconName: 'Edit' }} className="clearButton" onClick={this.onEdit} />
+              <IconButton iconProps={{ iconName: 'Cancel' }} className="clearButton" onClick={() => remove(id)} />
+            </div>
+          </>
+        )}
+
+        {this.state.editing && <TextField value={this.state.editLabel} onChange={this.onChange} onKeyPress={this.onKeyDown} />}
+      </Stack>
+    );
+  }
+}