adding exercies for steps 2-1 and 2-2

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

@@ -0,0 +1,20 @@
+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';
+
+export class TodoApp extends React.Component<any, Store> {
+  render() {
+    return (
+      <Stack horizontalAlign="center">
+        <Stack style={{ width: 400 }} gap={25}>
+          <TodoHeader />
+          <TodoList />
+          <TodoFooter />
+        </Stack>
+      </Stack>
+    );
+  }
+}

step2-02/exercise/src/components/TodoFooter.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const TodoFooter = (props: any) => {
+  const itemCount = 3;
+
+  return (
+    <footer>
+      <span>
+        {itemCount} item{itemCount > 1 ? 's' : ''} left
+      </span>
+      <button onClick={() => props.clear()} className="button">
+        Clear Completed
+      </button>
+    </footer>
+  );
+};

step2-02/exercise/src/components/TodoHeader.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { FilterTypes } from '../store';
+
+export class TodoHeader extends React.Component<{}, {}> {
+  render() {
+    return (
+      <div>
+        <h1>todos</h1>
+        <input className="textfield" placeholder="add todo" />
+        <button className="button add">Add</button>
+        <div className="filter">
+          <button>all</button>
+          <button>active</button>
+          <button>completed</button>
+        </div>
+      </div>
+    );
+  }
+}

step2-02/exercise/src/components/TodoList.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Stack } from 'office-ui-fabric-react';
+import { TodoListItem } from './TodoListItem';
+
+export const TodoList = (props: any) => {
+  return (
+    <ul className="todos">
+      <TodoListItem />
+      <TodoListItem />
+      <TodoListItem />
+    </ul>
+  );
+};

step2-02/exercise/src/components/TodoListItem.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export class TodoListItem extends React.Component<any, any> {
+  render() {
+    return (
+      <li className="todo">
+        <label>
+          <input type="checkbox" defaultChecked={false} /> test item
+        </label>
+      </li>
+    );
+  }
+}

step2-02/exercise/src/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { TodoApp } from './components/TodoApp';
+import { initializeIcons } from '@uifabric/icons';
+
+// Initializes the UI Fabric icons that we can use
+// Choose one from this list: https://developer.microsoft.com/en-us/fabric#/styles/icons
+initializeIcons();
+
+ReactDOM.render(<TodoApp />, document.getElementById('app'));

step2-02/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;
+}