immer'ified

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>

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

playground/src/components/TodoListItem.tsx

@@ -1,16 +1,31 @@
 import React from 'react';
-import { Text, Stack } from '@uifabric/experiments';
+import { Stack } from '@uifabric/experiments';
-import { Checkbox } from 'office-ui-fabric-react';
+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>
+    <Stack horizontal className={className}>
-      <Checkbox label={props.label} checked={props.checked} />
+      <Checkbox label={props.label} checked={props.checked} onChange={() => props.complete(props.id)} />
+      <IconButton iconProps={{ iconName: 'Cancel' }} className="clearButton" />
     </Stack>
   );
 };

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

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;
       }
     }
   ),