From e3e977a98df99cb69fdc6e5e914023bde09b01fb Mon Sep 17 00:00:00 2001
From: Ken <kchau@microsoft.com>
Date: Wed, 30 Jan 2019 15:06:03 -0800
Subject: [PATCH] immer'ified

---
 playground/src/components/TodoApp.tsx      |  5 +++--
 playground/src/components/TodoList.tsx     |  3 ++-
 playground/src/components/TodoListItem.tsx | 23 ++++++++++++++++++----
 playground/src/index.tsx                   |  5 ++++-
 playground/src/reducers/index.ts           |  5 +++++
 5 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/playground/src/components/TodoApp.tsx b/playground/src/components/TodoApp.tsx
index db15ffc..adc0cbd 100644
--- a/playground/src/components/TodoApp.tsx
+++ b/playground/src/components/TodoApp.tsx
@@ -10,18 +10,19 @@ export interface TodoAppProps {
   filter: FilterTypes;
   add: (label: string) => void;
   remove: (id: string) => void;
+  complete: (id: string) => void;
   setFilter: (filter: FilterTypes) => void;
 }
 
 export class TodoApp extends React.Component<TodoAppProps> {
   render() {
-    const { todos, filter, add, remove, setFilter } = this.props;
+    const { todos, filter, add, remove, setFilter, complete } = this.props;
 
     return (
       <Stack horizontalAlign="center">
         <Stack style={{ width: 650 }} verticalGap={25}>
           <TodoHeader {...{ add, remove, filter }} />
-          <TodoList {...{ todos, filter }} />
+          <TodoList {...{ todos, filter, complete }} />
           <TodoFooter {...{ todos, setFilter }} />
         </Stack>
       </Stack>
diff --git a/playground/src/components/TodoList.tsx b/playground/src/components/TodoList.tsx
index 50b2cb1..367b1af 100644
--- a/playground/src/components/TodoList.tsx
+++ b/playground/src/components/TodoList.tsx
@@ -6,6 +6,7 @@ import { TodoItem, FilterTypes } from '../store';
 export interface TodoListProps {
   todos: { [id: string]: TodoItem };
   filter: FilterTypes;
+  complete: (id: string) => void;
 }
 
 export class TodoList extends React.Component<TodoListProps> {
@@ -15,7 +16,7 @@ export class TodoList extends React.Component<TodoListProps> {
       <Stack verticalGap={10}>
         {Object.keys(todos).map(id => {
           const todo = todos[id];
-          return <TodoListItem key={id} checked={todo.completed} label={todo.label} />;
+          return <TodoListItem key={id} checked={todo.completed} label={todo.label} complete={this.props.complete} id={id} />;
         })}
       </Stack>
     );
diff --git a/playground/src/components/TodoListItem.tsx b/playground/src/components/TodoListItem.tsx
index 1ee2d25..340776c 100644
--- a/playground/src/components/TodoListItem.tsx
+++ b/playground/src/components/TodoListItem.tsx
@@ -1,16 +1,31 @@
 import React from 'react';
-import { Text, Stack } from '@uifabric/experiments';
-import { Checkbox } from 'office-ui-fabric-react';
+import { Stack } from '@uifabric/experiments';
+import { Checkbox, IconButton } from 'office-ui-fabric-react';
+import { mergeStyles } from '@uifabric/styling';
 
 export interface TodoListItemProps {
+  id: string;
   checked: boolean;
   label: string;
+  complete: (id: string) => void;
 }
 
 export const TodoListItem = (props: TodoListItemProps) => {
+  const className = mergeStyles({
+    selectors: {
+      ':global(.clearButton)': {
+        display: 'none'
+      },
+      '&:hover :global(.clearButton)': {
+        display: 'block'
+      }
+    }
+  });
+
   return (
-    <Stack horizontal>
-      <Checkbox label={props.label} checked={props.checked} />
+    <Stack horizontal className={className}>
+      <Checkbox label={props.label} checked={props.checked} onChange={() => props.complete(props.id)} />
+      <IconButton iconProps={{ iconName: 'Cancel' }} className="clearButton" />
     </Stack>
   );
 };
diff --git a/playground/src/index.tsx b/playground/src/index.tsx
index a36ffae..9c2ea1d 100644
--- a/playground/src/index.tsx
+++ b/playground/src/index.tsx
@@ -4,9 +4,12 @@ import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 import { reducer } from './reducers';
 import TodoAppContainer from './components/TodoAppContainer';
+import { initializeIcons } from '@uifabric/icons';
 
-const store = createStore(reducer);
+declare var window: any;
 
+const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
+initializeIcons();
 ReactDOM.render(
   <Provider store={store}>
     <TodoAppContainer />
diff --git a/playground/src/reducers/index.ts b/playground/src/reducers/index.ts
index e315da2..0749c38 100644
--- a/playground/src/reducers/index.ts
+++ b/playground/src/reducers/index.ts
@@ -17,6 +17,11 @@ export const reducer = combineReducers<Store>({
       remove(draft, action) {
         delete draft[action.id];
         return draft;
+      },
+
+      complete(draft, action) {
+        draft[action.id].completed = !draft[action.id].completed;
+        return draft;
       }
     }
   ),