diff --git a/index.html b/index.html
index 606889d..72436b4 100644
--- a/index.html
+++ b/index.html
@@ -115,10 +115,11 @@
-
+
Step 7
Redux: Connect to UI
-
+
+
+ remove(id)} />
+
+
+ );
+ }
+}
+
+function mapStateToProps({ todos }: Store) {
+ return {
+ todos
+ };
+}
+
+function mapDispatchToProps(dispatch: any) {
+ return {
+ remove: (id: string) => dispatch(actions.remove(id)),
+ complete: (id: string) => dispatch(actions.complete(id))
+ };
+}
+
+const component = connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(TodoListItem);
+
+export { component as TodoListItem };
diff --git a/step2-07/exercise/src/index.tsx b/step2-07/exercise/src/index.tsx
new file mode 100644
index 0000000..d9f8f08
--- /dev/null
+++ b/step2-07/exercise/src/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { reducer } from './reducers';
+import { createStore, compose } from 'redux';
+import { Provider } from 'react-redux';
+import { TodoApp } from './components/TodoApp';
+import { actions } from './actions';
+import { initializeIcons } from '@uifabric/icons';
+
+/* Goop for making the Redux dev tool to work */
+declare var window: any;
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+function createStoreWithDevTool(reducer, initialStore) {
+ return createStore(reducer, initialStore, composeEnhancers());
+}
+
+const store = createStoreWithDevTool(reducer, {});
+
+store.dispatch(actions.addTodo('hello'));
+store.dispatch(actions.addTodo('world'));
+
+initializeIcons();
+
+// TODO: wrap with a instance here
+ReactDOM.render(, document.getElementById('app'));
diff --git a/step2-07/exercise/src/reducers/index.ts b/step2-07/exercise/src/reducers/index.ts
new file mode 100644
index 0000000..6eed3c5
--- /dev/null
+++ b/step2-07/exercise/src/reducers/index.ts
@@ -0,0 +1,27 @@
+import { Store } from '../store';
+import { addTodo, remove, complete, clear } from './pureFunctions';
+
+function todoReducer(state: Store['todos'] = {}, action: any): Store['todos'] {
+ switch (action.type) {
+ case 'addTodo':
+ return addTodo(state, action.id, action.label);
+
+ case 'remove':
+ return remove(state, action.id);
+
+ case 'clear':
+ return clear(state);
+
+ case 'complete':
+ return complete(state, action.id);
+ }
+
+ return state;
+}
+
+export function reducer(state: Store, action: any): Store {
+ return {
+ todos: todoReducer(state.todos, action),
+ filter: 'all'
+ };
+}
diff --git a/step2-07/exercise/src/reducers/pureFunctions.spec.ts b/step2-07/exercise/src/reducers/pureFunctions.spec.ts
new file mode 100644
index 0000000..b3815cf
--- /dev/null
+++ b/step2-07/exercise/src/reducers/pureFunctions.spec.ts
@@ -0,0 +1,29 @@
+import { addTodo, complete } from './pureFunctions';
+import { Store } from '../store';
+
+describe('TodoApp reducers', () => {
+ it('can add an item', () => {
+ const state = {};
+
+ const newState = addTodo(state, '0', 'item1');
+
+ const keys = Object.keys(newState);
+
+ expect(newState).not.toBe(state);
+ expect(keys.length).toBe(1);
+ expect(newState[keys[0]].label).toBe('item1');
+ expect(newState[keys[0]].completed).toBeFalsy();
+ });
+
+ it('can complete an item', () => {
+ const state = {};
+
+ let newState = addTodo(state, '0', 'item1');
+
+ const key = Object.keys(newState)[0];
+
+ newState = complete(newState, key);
+
+ expect(newState[key].completed).toBeTruthy();
+ });
+});
diff --git a/step2-07/exercise/src/reducers/pureFunctions.ts b/step2-07/exercise/src/reducers/pureFunctions.ts
new file mode 100644
index 0000000..69e492a
--- /dev/null
+++ b/step2-07/exercise/src/reducers/pureFunctions.ts
@@ -0,0 +1,36 @@
+import { Store, FilterTypes } from '../store';
+
+export function addTodo(state: Store['todos'], id: string, label: string): Store['todos'] {
+ return { ...state, [id]: { label, completed: false } };
+}
+
+export function remove(state: Store['todos'], id: string) {
+ const newTodos = { ...state };
+
+ delete newTodos[id];
+
+ return newTodos;
+}
+
+export function complete(state: Store['todos'], id: string) {
+ const newTodos = { ...state };
+ newTodos[id].completed = !newTodos[id].completed;
+
+ return newTodos;
+}
+
+export function clear(state: Store['todos']) {
+ const newTodos = { ...state };
+
+ Object.keys(state.todos).forEach(key => {
+ if (state.todos[key].completed) {
+ delete newTodos[key];
+ }
+ });
+
+ return newTodos;
+}
+
+export function setFilter(state: Store['filter'], filter: FilterTypes) {
+ return filter;
+}
diff --git a/step2-07/exercise/src/store/index.ts b/step2-07/exercise/src/store/index.ts
new file mode 100644
index 0000000..221b5f4
--- /dev/null
+++ b/step2-07/exercise/src/store/index.ts
@@ -0,0 +1,14 @@
+export type FilterTypes = 'all' | 'active' | 'completed';
+
+export interface TodoItem {
+ label: string;
+ completed: boolean;
+}
+
+export interface Store {
+ todos: {
+ [id: string]: TodoItem;
+ };
+
+ filter: FilterTypes;
+}
diff --git a/step2-07/src/components/TodoApp.tsx b/step2-07/src/components/TodoApp.tsx
deleted file mode 100644
index ef8f05b..0000000
--- a/step2-07/src/components/TodoApp.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import { Stack, Customizer, mergeStyles, getTheme } from 'office-ui-fabric-react';
-import { TodoFooter } from './TodoFooter';
-import { TodoHeader } from './TodoHeader';
-import { TodoList } from './TodoList';
-import { Store } from '../store';
-import { FluentCustomizations } from '@uifabric/fluent-theme';
-
-const className = mergeStyles({
- padding: 25,
- ...getTheme().effects.elevation4
-});
-
-export class TodoApp extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- todos: {},
- filter: 'all'
- };
- }
- render() {
- const { filter, todos } = this.state;
- return (
-
-
-
-
-
-
-
-
-
- );
- }
-}
diff --git a/step2-08/src/components/TodoApp.tsx b/step2-08/src/components/TodoApp.tsx
index ef8f05b..83464c0 100644
--- a/step2-08/src/components/TodoApp.tsx
+++ b/step2-08/src/components/TodoApp.tsx
@@ -11,26 +11,16 @@ const className = mergeStyles({
...getTheme().effects.elevation4
});
-export class TodoApp extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- todos: {},
- filter: 'all'
- };
- }
- render() {
- const { filter, todos } = this.state;
- return (
-
-
-
-
-
-
-
+export const TodoApp = () => {
+ return (
+
+
+
+
+
+
-
- );
- }
-}
+
+
+ );
+};