adding a step 9 to call services

step2-07/src/actions/index.ts

@@ -1,4 +1,8 @@
-export const addTodo = (label: string) => ({ type: 'addTodo', label });
-export const remove = (id: string) => ({ type: 'remove', id });
-export const complete = (id: string) => ({ type: 'complete', id });
-export const clear = () => ({ type: 'clear' });
+import uuid from 'uuid/v4';
+
+export const actions = {
+  addTodo: (label: string) => ({ type: 'addTodo', id: uuid(), label }),
+  remove: (id: string) => ({ type: 'remove', id }),
+  complete: (id: string) => ({ type: 'complete', id }),
+  clear: () => ({ type: 'clear' })
+};

step2-07/src/components/TodoFooter.tsx

@@ -4,7 +4,7 @@ import { Stack } from 'office-ui-fabric-react';
 import { Store } from '../store';
 import { DefaultButton } from 'office-ui-fabric-react';
 import { connect } from 'react-redux';
-import * as actions from '../actions';
+import { actions } from '../actions';
 
 interface TodoFooterProps {
   clear: () => void;

step2-07/src/components/TodoHeader.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Text } from '@uifabric/experiments';
 import { Stack } from 'office-ui-fabric-react';
-import { Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';
-import { FilterTypes, Store } from '../store';
-import * as actions from '../actions';
+import { TextField, PrimaryButton } from 'office-ui-fabric-react';
+import { Store } from '../store';
 import { connect } from 'react-redux';
+import { actions } from '../actions';
 
 interface TodoHeaderProps {
   addTodo: (label: string) => void;

step2-07/src/components/TodoList.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Stack } from 'office-ui-fabric-react';
 import { TodoListItem } from './TodoListItem';
-import { Store, FilterTypes } from '../store';
+import { Store } from '../store';
 import { connect } from 'react-redux';
-import * as actions from '../actions';
 
 interface TodoListProps {
   todos: Store['todos'];

step2-07/src/components/TodoListItem.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';
+import { Stack, Checkbox, IconButton } from 'office-ui-fabric-react';
 import { Store } from '../store';
 import { connect } from 'react-redux';
-import * as actions from '../actions';
+import { actions } from '../actions';
 
 interface TodoListItemProps {
   id: string;

step2-07/src/index.tsx

@@ -4,7 +4,7 @@ import { reducer } from './reducers';
 import { createStore, compose } from 'redux';
 import { Provider } from 'react-redux';
 import { TodoApp } from './components/TodoApp';
-import { addTodo } from './actions';
+import { actions } from './actions';
 import { initializeIcons } from '@uifabric/icons';
 
 /* Goop for making the Redux dev tool to work */
@@ -16,8 +16,8 @@ function createStoreWithDevTool(reducer, initialStore) {
 
 const store = createStoreWithDevTool(reducer, {});
 
-store.dispatch(addTodo('hello'));
-store.dispatch(addTodo('world'));
+store.dispatch(actions.addTodo('hello'));
+store.dispatch(actions.addTodo('world'));
 
 initializeIcons();
 

step2-07/src/reducers/index.ts

@@ -1,10 +1,10 @@
 import { Store } from '../store';
 import { addTodo, remove, complete, clear } from './pureFunctions';
 
-export function reducer(state: Store, action: any): Store {
+function todoReducer(state: Store['todos'] = {}, action: any): Store['todos'] {
   switch (action.type) {
     case 'addTodo':
-      return addTodo(state, action.label);
+      return addTodo(state, action.id, action.label);
 
     case 'remove':
       return remove(state, action.id);
@@ -18,3 +18,10 @@ export function reducer(state: Store, action: any): Store {
 
   return state;
 }
+
+export function reducer(state: Store, action: any): Store {
+  return {
+    todos: todoReducer(state.todos, action),
+    filter: 'all'
+  };
+}

step2-07/src/reducers/pureFunctions.spec.ts

@@ -3,33 +3,27 @@ import { Store } from '../store';
 
 describe('TodoApp reducers', () => {
   it('can add an item', () => {
-    const state = <Store>{
-      todos: {},
-      filter: 'all'
-    };
+    const state = <Store['todos']>{};
 
-    const newState = addTodo(state, 'item1');
+    const newState = addTodo(state, '0', 'item1');
 
-    const keys = Object.keys(newState.todos);
+    const keys = Object.keys(newState);
 
     expect(newState).not.toBe(state);
     expect(keys.length).toBe(1);
-    expect(newState.todos[keys[0]].label).toBe('item1');
-    expect(newState.todos[keys[0]].completed).toBeFalsy();
+    expect(newState[keys[0]].label).toBe('item1');
+    expect(newState[keys[0]].completed).toBeFalsy();
   });
 
   it('can complete an item', () => {
-    const state = <Store>{
-      todos: {},
-      filter: 'all'
-    };
+    const state = <Store['todos']>{};
 
-    let newState = addTodo(state, 'item1');
+    let newState = addTodo(state, '0', 'item1');
 
-    const key = Object.keys(newState.todos)[0];
+    const key = Object.keys(newState)[0];
 
     newState = complete(newState, key);
 
-    expect(newState.todos[key].completed).toBeTruthy();
+    expect(newState[key].completed).toBeTruthy();
   });
 });

step2-07/src/reducers/pureFunctions.ts

@@ -1,49 +1,36 @@
-import { Store } from '../store';
+import { Store, FilterTypes } from '../store';
 
-let index = 0;
-
-export function addTodo(state: Store, label: string): Store {
-  const { todos } = state;
-  const id = index++;
-
-  return {
-    ...state,
-    todos: { ...todos, [id]: { label, completed: false } }
-  };
+export function addTodo(state: Store['todos'], id: string, label: string): Store['todos'] {
+  return { ...state, [id]: { label, completed: false } };
 }
 
-export function remove(state: Store, id: string) {
-  const newTodos = { ...state.todos };
+export function remove(state: Store['todos'], id: string) {
+  const newTodos = { ...state };
 
   delete newTodos[id];
 
-  return {
-    ...state,
-    todos: newTodos
-  };
+  return newTodos;
 }
 
-export function complete(state: Store, id: string) {
-  const newTodos = { ...state.todos };
+export function complete(state: Store['todos'], id: string) {
+  const newTodos = { ...state };
   newTodos[id].completed = !newTodos[id].completed;
 
-  return {
-    ...state,
-    todos: newTodos
-  };
+  return newTodos;
 }
 
-export function clear(state: Store) {
-  const newTodos = {};
+export function clear(state: Store['todos']) {
+  const newTodos = { ...state };
 
   Object.keys(state.todos).forEach(key => {
-    if (!state.todos[key].completed) {
-      newTodos[key] = state.todos[key];
+    if (state.todos[key].completed) {
+      delete newTodos[key];
     }
   });
 
-  return {
-    ...state,
-    todos: newTodos
-  };
+  return newTodos;
+}
+
+export function setFilter(state: Store['filter'], filter: FilterTypes) {
+  return filter;
 }