adding step 2.4 and 2.5 exercises

step2-04/exercise/src/components/TodoApp.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Stack } from 'office-ui-fabric-react';
+import { TodoFooter } from './TodoFooter';
+import { TodoHeader } from './TodoHeader';
+import { TodoList } from './TodoList';
+import { Store } from '../store';
+import { TodoContext } from '../TodoContext';
+
+let index = 0;
+
+export class TodoApp extends React.Component<any, Store> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      todos: {},
+      filter: 'all'
+    };
+  }
+  render() {
+    return (
+      <TodoContext.Provider
+        value={{
+          ...this.state,
+          addTodo: this._addTodo,
+          remove: this._remove,
+          complete: this._complete,
+          clear: this._clear,
+          setFilter: this._setFilter,
+          edit: this._edit
+        }}
+      >
+        <Stack horizontalAlign="center">
+          <Stack style={{ width: 400 }} gap={25}>
+            <TodoHeader />
+            <TodoList />
+            <TodoFooter />
+          </Stack>
+        </Stack>
+      </TodoContext.Provider>
+    );
+  }
+
+  private _addTodo = label => {
+    const { todos } = this.state;
+    const id = index++;
+
+    this.setState({
+      todos: { ...todos, [id]: { label } }
+    });
+  };
+
+  private _remove = id => {
+    const newTodos = { ...this.state.todos };
+    delete newTodos[id];
+
+    this.setState({
+      todos: newTodos
+    });
+  };
+
+  private _complete = id => {
+    const newTodos = { ...this.state.todos };
+    newTodos[id].completed = !newTodos[id].completed;
+
+    this.setState({
+      todos: newTodos
+    });
+  };
+
+  private _edit = (id, label) => {
+    const newTodos = { ...this.state.todos };
+    newTodos[id] = { ...newTodos[id], label };
+
+    this.setState({
+      todos: newTodos
+    });
+  };
+
+  private _clear = () => {
+    const { todos } = this.state;
+    const newTodos = {};
+
+    Object.keys(this.state.todos).forEach(id => {
+      if (!todos[id].completed) {
+        newTodos[id] = todos[id];
+      }
+    });
+
+    this.setState({
+      todos: newTodos
+    });
+  };
+
+  private _setFilter = filter => {
+    this.setState({
+      filter: filter
+    });
+  };
+}