adding docs subtree

docs/step1-07/demo/README.md

@@ -0,0 +1,167 @@
+# Creating a UI Driven State
+
+Now that we have a UI that is purely driven by the state of our app, we need to add functionality to allow the UI to drive the state. This is often done by creating functions that call `setState` like we saw in the `todoHeader`, that are passed down to the UI as props.
+
+> We'll be learning in part 2 of this workshop how we can expose these functions without explicitly passing them down via props
+
+This is our core 'business logic' and handles everything our basic 'CRUD' operations of "Create, Read, Update, Delete". We don't have time to walk through writing all of those functions, but you can see that they are already provided in the demo's `TodoApp` and passed into our components.
+
+## Intro to Typescript
+
+Taking a look at our components in `TodoApp` you can see that our list of props is not just getting longer, but is getting much more complex! We're passing through functions with various signatures, complex `todos` objects as well as filter strings which are always one of three values.
+
+As applications grow, it becomes increasing difficult to remember what each function does, or what each todo contains. Also, as JavaScript is a loosly type language, if I wanted to change the value of `todos` to an array inside my `TodoList`, javascript wouldn't care. But if `TodoListItems` was expecting an object, our application would break.
+
+It is because of these two reasons that the entire industry is shifting to writing applications that are strongly typed, and are using Typescript to accomplish that.
+
+As [their website](https://www.typescriptlang.org/) state:
+
+> Typescript is a superset of JavaScript that compiles to plain JavaScript
+
+If you've ever used [Sass](https://sass-lang.com/) you are familiar with this concept. In the same say that all valid CSS is valid Sass, all valid JavaScript is valid Typescript. That's why most of this project has been writting in `ts` and `tsx` files instead of `js` and `jsx` files.
+
+Let's dive into the demo and see how Typescript can help us better understand our component props, and guard against future regressions.
+
+## Demo
+
+Let's start off in the TodoList, as that has the most data flow, up and down. There isn't any actionable UI in this component as we're simply passing `completed` down to each `TodoListItem`, but we can write a component interface to make sure that everything gets passed down properly.
+
+### Writing TodoListProps
+
+Looking at our `TodoApp` we know that `TodoList` has three props, `filter`, `todos`, and `filter`. We'll start by creating and interface that represents this component's props called `TodoListProps`.
+
+```tsx
+interface TodoListProps {
+  filter: any;
+  todos: any;
+  complete: any;
+}
+```
+
+> Note that we're using the `any` keyword for now. This won't give us any type safety, but it does innumerate the valid props we can pass to this component.
+
+With that interface written, we'll add it to our component class.
+
+```tsx
+export class TodoList extends React.Component<TodoListProps, any>
+```
+
+> Note that the first value in `<>` is for a props interface, and the second for state
+
+Now that we have a typed component, let's go back to our `TodoApp` and see what happens if we try to change the name of a prop.
+
+### Adding type safety
+
+So far we've only established what our prop names are, not the values inside of them. Let's first look at `filter`, and see how we can improve that prop's type safety.
+
+#### Filter Type
+
+We know that filter shouldn't be an object, array or function, so we can specify it should always be a string like this:
+
+```tsx
+interface TodoListProps {
+  filter: string;
+  todos: any;
+  complete: any;
+}
+```
+
+But since we know that the filter can be only one of three values, we can explicitly write it that way with [union types](https://www.typescriptlang.org/docs/handbook/advanced-types.html#union-types):
+
+```tsx
+interface TodoListProps {
+  filter: 'all' | 'active' | 'completed';
+  todos: any;
+  complete: any;
+}
+```
+
+Now try going back to `TodoApp` and changing the `filter` attribute in `TodoList` to something else.
+
+#### Complete Type
+
+The `complete` props isn't data, but rather a function. Fortunatly, Typescript can handle function types just as well as data.
+
+```tsx
+interface TodoListProps {
+  filter: 'all' | 'active' | 'completed';
+  todos: any;
+  complete: (id: string) => void;
+}
+```
+
+For functions we are only concerned with the parameters passed in and the return value. You can see in the example above that the function takes in an `id` of type string, and returns `void`, which means it has no return.
+
+### Todos Type
+
+The `todos` prop is interesting in that `todos` is an object with a bunch of unknown keys. So here's what that interface would look like.
+
+```tsx
+interface TodoListProps {
+  filter: 'all' | 'active' | 'completed';
+  todos: {
+    [id: string]: {
+      label: string;
+      completed: boolean;
+    };
+  };
+  complete: (id: string) => void;
+}
+```
+
+> Note that the `[]` notation does not mean an array, it is a [computed property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) notation.
+
+Now that our interface is complete, try changing the word 'all' in `filter === all` and see that VS Code will tell you this condition will always be false. Imagine you had a typo in that line and you couldn't understand why your filter wasn't working.
+
+### Abstracting types
+
+Most of our components are going to need to add types for `todos` and `filter`, so it's a good thing that Typescript allows us to abstract those. I've already written up and exported those shared types in the file `TodoApp.types.ts`, so we just need to import them and pull them into our interface.
+
+```tsx
+import { FilterTypes, Todos } from '../TodoApp.types';
+
+interface TodoListProps {
+  complete: (id: string) => void;
+  todos: Todos;
+  filter: FilterTypes;
+}
+```
+
+### Updating TodoApp
+
+Our `TodoApp` doesn't take any props, but it does have state. We can use Typescript to define that as well.
+
+I've already imported `Todos`, and `FilterTypes` into the `TodoApp`, so we just need to add them to our class. We can even skip the 'interface', if we want to, and add them directly to the class.
+
+```tsx
+export class TodoApp extends React.Component<{}, { todos: Todos; filter: FilterTypes }>
+```
+
+> Note that the first value in `<>` always refers to props. Since `TodoApp` takes none, we'll set it to an empty object.
+
+### Writing TodoListItemProps
+
+Jumping down to the TodoListItem, as we start to write the TodoListItemProps we realize that two of the props, `label` and `completed` have already been defined in the `TodoItem` interface in `TodoApp.types`. So in the same way we can reuse individual types (`FilterTypes`), we can reuse, and extend upon entire interfaces.
+
+```tsx
+interface TodoListItemProps extends TodoItem {
+  id: string;
+  complete: (id: string) => void;
+}
+```
+
+The end result of this is an interface with all 4 properties, `id`, `complete`, `completed` and `label`.
+
+Next we can pull in the remaining props:
+
+```jsx
+const { label, completed, complete, id } = this.props;
+```
+
+And then use the input's `onChange` event to fire our `complete` callback. We can see in the signature that we expect and `id` of type string, so we'll pass our `id` prop in.
+
+```tsx
+<input type="checkbox" checked={completed} onChange={() => complete(id)} />
+```
+
+> Note that the function param and prop name just happen to be the same. This isn't required.

docs/step1-07/demo/index.html

@@ -0,0 +1 @@
+<!doctype html><html><link rel="stylesheet" href="./src/style.css"><body><div id="app"></div><script src="../../step1-07/demo/step1-07/demo.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body></html>

docs/step1-07/demo/src/TodoApp.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { TodoFooter } from './components/TodoFooter';
+import { TodoHeader } from './components/TodoHeader';
+import { TodoList } from './components/TodoList';
+import { Todos, FilterTypes } from './TodoApp.types';
+
+let index = 0;
+
+export class TodoApp extends React.Component<any, any> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      todos: {},
+      filter: 'all'
+    };
+  }
+
+  render() {
+    const { filter, todos } = this.state;
+    return (
+      <div>
+        <TodoHeader addTodo={this._addTodo} setFilter={this._setFilter} filter={filter} />
+        <TodoList complete={this._complete} todos={todos} filter={filter} />
+        <TodoFooter clear={this._clear} todos={todos} />
+      </div>
+    );
+  }
+
+  private _addTodo = label => {
+    const { todos } = this.state;
+    const id = index++;
+
+    this.setState({
+      todos: { ...todos, [id]: { label, completed: false } }
+    });
+  };
+
+  private _complete = id => {
+    const newTodos = { ...this.state.todos };
+    newTodos[id].completed = !newTodos[id].completed;
+
+    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
+    });
+  };
+}

docs/step1-07/demo/src/TodoApp.types.ts

@@ -0,0 +1,10 @@
+export type FilterTypes = 'all' | 'active' | 'completed';
+
+export interface TodoItem {
+  label: string;
+  completed: boolean;
+}
+
+export interface Todos {
+  [id: string]: TodoItem;
+}

docs/step1-07/demo/src/components/TodoFooter.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Todos } from '../TodoApp.types';
+
+export const TodoFooter = (props: any) => {
+  const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
+  return (
+    <footer>
+      <span>
+        {itemCount} item{itemCount > 1 ? 's' : ''} left
+      </span>
+      <button className="submit">Clear Completed</button>
+    </footer>
+  );
+};

docs/step1-07/demo/src/components/TodoHeader.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FilterTypes } from '../TodoApp.types';
+
+export class TodoHeader extends React.Component<any, any> {
+  constructor(props) {
+    super(props);
+    this.state = { labelInput: '' };
+  }
+
+  render() {
+    const { filter } = this.props;
+    return (
+      <header>
+        <h1>todos</h1>
+        <div className="addTodo">
+          <input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
+          <button className="submit">Add</button>
+        </div>
+        <nav className="filter">
+          <button className={filter == 'all' ? 'selected' : ''}>all</button>
+          <button className={filter == 'active' ? 'selected' : ''}>active</button>
+          <button className={filter == 'completed' ? 'selected' : ''}>completed</button>
+        </nav>
+      </header>
+    );
+  }
+
+  _onChange = evt => {
+    this.setState({ labelInput: evt.target.value });
+  };
+}

docs/step1-07/demo/src/components/TodoList.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TodoListItem } from './TodoListItem';
+import { FilterTypes, Todos } from '../TodoApp.types';
+
+export class TodoList extends React.Component<any, any> {
+  render() {
+    const { filter, todos, complete } = this.props;
+
+    const filteredTodos = Object.keys(todos).filter(id => {
+      return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
+    });
+
+    return (
+      <ul className="todos">
+        {filteredTodos.map(id => (
+          <TodoListItem key={id} id={id} complete={complete} {...todos[id]} />
+        ))}
+      </ul>
+    );
+  }
+}

docs/step1-07/demo/src/components/TodoListItem.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TodoItem } from '../TodoApp.types';
+
+export class TodoListItem extends React.Component<any, any> {
+  render() {
+    const { label, completed } = this.props;
+
+    return (
+      <li className="todo">
+        <label>
+          <input type="checkbox" checked={completed} /> {label}
+        </label>
+      </li>
+    );
+  }
+}

docs/step1-07/demo/src/index.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { TodoApp } from './TodoApp';
+ReactDOM.render(<TodoApp />, document.getElementById('app'));

docs/step1-07/demo/src/style.css

@@ -0,0 +1,49 @@
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  width: 400px;
+  margin: 20px auto;
+}
+
+h1 {
+  text-align: center;
+}
+
+.addTodo {
+  display: flex;
+}
+
+.textfield {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.submit {
+  border: none;
+  padding: 5px 10px;
+}
+
+.filter {
+  margin: 10px 0 0;
+}
+
+.filter button {
+  background: transparent;
+  border: none;
+}
+
+.filter .selected {
+  border-bottom: 2px solid blue;
+}
+
+.todos {
+  list-style: none;
+  padding: 0;
+}
+
+footer {
+  display: flex;
+}
+
+footer span {
+  flex-grow: 1;
+}

docs/step1-07/exercise/README.md

@@ -0,0 +1,20 @@
+## Exercise
+
+### TodoFooter
+
+1. Open TodoFooter and write a TodoFooterProps interface. It should include two values, a function and an object. Assign this interface to props like this: `(props: TodoFooterProps)`
+2. Write an `_onClick` function that calls `props.clear`.
+   > Since TodoFooter is not a class the `_onClick` needs to be declared as a const, and placed before the `return`.
+3. Add `_onClick` to the button's `onClick`. You won't need to use `this` since this isn't a class.
+   > We can't assign our `clear` function directly to `onClick`. We always need to create a function that calls our callbacks. `() => props.clear()`
+4. Test out this functionality. Check a few todos complete and click the `Clear Completed` button
+
+### TodoHeader
+
+1. Open TodoHeader and write TodoHeaderProps which will include 3 values. Replace the first `any` with this interface.
+2. This component also has state. Write TodoHeaderState (there's just one item), and add this where the second `any` was.
+3. Add `_onFilter` to each of the filter buttons
+   > Note that we can't add new parameters to onClick, but we can pull information from the event target!
+4. Write an `_onAdd` method that calls `addTodo` on the current `labelInput`, then sets the `labelInput` in state to an empty string
+5. Call `_onAdd` from the submit button
+6. Check out this new functionality! We can now add and filter todos!

docs/step1-07/exercise/index.html

@@ -0,0 +1 @@
+<!doctype html><html><link rel="stylesheet" href="./src/style.css"><body><div id="app"></div><script src="../../step1-07/exercise/step1-07/exercise.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body></html>

docs/step1-07/exercise/src/TodoApp.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { TodoFooter } from './components/TodoFooter';
+import { TodoHeader } from './components/TodoHeader';
+import { TodoList } from './components/TodoList';
+import { Todos, FilterTypes } from './TodoApp.types';
+
+let index = 0;
+
+export class TodoApp extends React.Component<any, { todos: Todos; filter: FilterTypes }> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      todos: {},
+      filter: 'all'
+    };
+  }
+
+  render() {
+    const { filter, todos } = this.state;
+    return (
+      <div>
+        <TodoHeader addTodo={this._addTodo} setFilter={this._setFilter} filter={filter} />
+        <TodoList complete={this._complete} todos={todos} filter={filter} />
+        <TodoFooter clear={this._clear} todos={todos} />
+      </div>
+    );
+  }
+
+  // business logic
+
+  private _addTodo = label => {
+    const { todos } = this.state;
+    const id = index++;
+
+    this.setState({
+      todos: { ...todos, [id]: { label, completed: false } }
+    });
+  };
+
+  private _complete = id => {
+    const newTodos = { ...this.state.todos };
+    newTodos[id].completed = !newTodos[id].completed;
+
+    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
+    });
+  };
+}

docs/step1-07/exercise/src/TodoApp.types.ts

@@ -0,0 +1,10 @@
+export type FilterTypes = 'all' | 'active' | 'completed';
+
+export interface TodoItem {
+  label: string;
+  completed: boolean;
+}
+
+export interface Todos {
+  [id: string]: TodoItem;
+}

docs/step1-07/exercise/src/components/TodoFooter.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Todos } from '../TodoApp.types';
+
+export const TodoFooter = props => {
+  const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
+  return (
+    <footer>
+      <span>
+        {itemCount} item{itemCount > 1 ? 's' : ''} left
+      </span>
+      <button className="submit">Clear Completed</button>
+    </footer>
+  );
+};

docs/step1-07/exercise/src/components/TodoHeader.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { FilterTypes } from '../TodoApp.types';
+
+export class TodoHeader extends React.Component<any, any> {
+  constructor(props) {
+    super(props);
+    this.state = { labelInput: '' };
+  }
+
+  render() {
+    const { filter } = this.props;
+    return (
+      <header>
+        <h1>todos</h1>
+        <div className="addTodo">
+          <input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
+          <button className="submit">Add</button>
+        </div>
+        <nav className="filter">
+          <button className={filter == 'all' ? 'selected' : ''}>all</button>
+          <button className={filter == 'active' ? 'selected' : ''}>active</button>
+          <button className={filter == 'completed' ? 'selected' : ''}>completed</button>
+        </nav>
+      </header>
+    );
+  }
+
+  _onFilter = evt => {
+    this.props.setFilter(evt.target.textContet);
+  };
+
+  _onChange = evt => {
+    this.setState({ labelInput: evt.target.value });
+  };
+}

docs/step1-07/exercise/src/components/TodoList.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { TodoListItem } from './TodoListItem';
+import { FilterTypes, Todos } from '../TodoApp.types';
+
+interface TodoListProps {
+  complete: (id: string) => void;
+  todos: Todos;
+  filter: FilterTypes;
+}
+
+export class TodoList extends React.Component<TodoListProps, any> {
+  render() {
+    const { filter, todos, complete } = this.props;
+
+    const filteredTodos = Object.keys(todos).filter(id => {
+      return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
+    });
+
+    return (
+      <ul className="todos">
+        {filteredTodos.map(id => (
+          <TodoListItem key={id} id={id} complete={complete} {...todos[id]} />
+        ))}
+      </ul>
+    );
+  }
+}

docs/step1-07/exercise/src/components/TodoListItem.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TodoItem } from '../TodoApp.types';
+
+interface TodoListItemProps extends TodoItem {
+  id: string;
+  complete: (id: string) => void;
+}
+
+export class TodoListItem extends React.Component<TodoListItemProps, any> {
+  render() {
+    const { label, completed, complete, id } = this.props;
+
+    return (
+      <li className="todo">
+        <label>
+          <input type="checkbox" checked={completed} onChange={() => complete(id)} /> {label}
+        </label>
+      </li>
+    );
+  }
+}

docs/step1-07/exercise/src/index.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { TodoApp } from './TodoApp';
+ReactDOM.render(<TodoApp />, document.getElementById('app'));

docs/step1-07/exercise/src/style.css

@@ -0,0 +1,49 @@
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  width: 400px;
+  margin: 20px auto;
+}
+
+h1 {
+  text-align: center;
+}
+
+.addTodo {
+  display: flex;
+}
+
+.textfield {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.submit {
+  border: none;
+  padding: 5px 10px;
+}
+
+.filter {
+  margin: 10px 0 0;
+}
+
+.filter button {
+  background: transparent;
+  border: none;
+}
+
+.filter .selected {
+  border-bottom: 2px solid blue;
+}
+
+.todos {
+  list-style: none;
+  padding: 0;
+}
+
+footer {
+  display: flex;
+}
+
+footer span {
+  flex-grow: 1;
+}

docs/step1-07/final/index.html

@@ -0,0 +1 @@
+<!doctype html><html><link rel="stylesheet" href="./src/style.css"><body><div id="app"></div><script src="../../step1-07/final/step1-07/final.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body></html>

docs/step1-07/final/src/TodoApp.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { TodoFooter } from './components/TodoFooter';
+import { TodoHeader } from './components/TodoHeader';
+import { TodoList } from './components/TodoList';
+import { Todos, FilterTypes } from './TodoApp.types';
+
+let index = 0;
+
+export class TodoApp extends React.Component<{}, { todos: Todos; filter: FilterTypes }> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      todos: {},
+      filter: 'all'
+    };
+  }
+
+  render() {
+    const { filter, todos } = this.state;
+    return (
+      <div>
+        <TodoHeader addTodo={this._addTodo} setFilter={this._setFilter} filter={filter} />
+        <TodoList complete={this._complete} todos={todos} filter={filter} />
+        <TodoFooter clear={this._clear} todos={todos} />
+      </div>
+    );
+  }
+
+  private _addTodo = label => {
+    const { todos } = this.state;
+    const id = index++;
+
+    this.setState({
+      todos: { ...todos, [id]: { label, completed: false } }
+    });
+  };
+
+  private _complete = id => {
+    const newTodos = { ...this.state.todos };
+    newTodos[id].completed = !newTodos[id].completed;
+
+    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
+    });
+  };
+}

docs/step1-07/final/src/TodoApp.types.ts

@@ -0,0 +1,10 @@
+export type FilterTypes = 'all' | 'active' | 'completed';
+
+export interface TodoItem {
+  label: string;
+  completed: boolean;
+}
+
+export interface Todos {
+  [id: string]: TodoItem;
+}

docs/step1-07/final/src/components/TodoFooter.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Todos } from '../TodoApp.types';
+interface TodoFooterProps {
+  clear: () => void;
+  todos: Todos;
+}
+
+export const TodoFooter = (props: TodoFooterProps) => {
+  const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
+  const _onClick = () => {
+    props.clear();
+  };
+
+  return (
+    <footer>
+      <span>
+        {itemCount} item{itemCount > 1 ? 's' : ''} left
+      </span>
+      <button onClick={_onClick} className="submit">
+        Clear Completed
+      </button>
+    </footer>
+  );
+};

docs/step1-07/final/src/components/TodoHeader.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { FilterTypes } from '../TodoApp.types';
+
+interface TodoHeaderProps {
+  addTodo: (label: string) => void;
+  setFilter: (filter: FilterTypes) => void;
+  filter: FilterTypes;
+}
+
+interface TodoHeaderState {
+  labelInput: string;
+}
+
+export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
+  constructor(props) {
+    super(props);
+    this.state = { labelInput: '' };
+  }
+
+  render() {
+    const { filter, setFilter } = this.props;
+    return (
+      <header>
+        <h1>todos</h1>
+        <div className="addTodo">
+          <input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
+          <button onClick={this._onAdd} className="submit">
+            Add
+          </button>
+        </div>
+        <nav className="filter">
+          <button onClick={this._onFilter} className={filter == 'all' ? 'selected' : ''}>
+            all
+          </button>
+          <button onClick={this._onFilter} className={filter == 'active' ? 'selected' : ''}>
+            active
+          </button>
+          <button onClick={this._onFilter} className={filter == 'completed' ? 'selected' : ''}>
+            completed
+          </button>
+        </nav>
+      </header>
+    );
+  }
+
+  _onFilter = evt => {
+    this.props.setFilter(evt.target.textContet);
+  };
+
+  _onChange = evt => {
+    this.setState({ labelInput: evt.target.value });
+  };
+
+  _onAdd = () => {
+    this.props.addTodo(this.state.labelInput);
+    this.setState({ labelInput: '' });
+  };
+}

docs/step1-07/final/src/components/TodoList.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { TodoListItem } from './TodoListItem';
+import { FilterTypes, Todos } from '../TodoApp.types';
+
+interface TodoListProps {
+  complete: (id: string) => void;
+  todos: Todos;
+  filter: FilterTypes;
+}
+
+export class TodoList extends React.Component<TodoListProps, any> {
+  render() {
+    const { filter, todos, complete } = this.props;
+
+    const filteredTodos = Object.keys(todos).filter(id => {
+      return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
+    });
+
+    return (
+      <ul className="todos">
+        {filteredTodos.map(id => (
+          <TodoListItem key={id} id={id} complete={complete} {...todos[id]} />
+        ))}
+      </ul>
+    );
+  }
+}

docs/step1-07/final/src/components/TodoListItem.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TodoItem } from '../TodoApp.types';
+
+interface TodoListItemProps extends TodoItem {
+  id: string;
+  complete: (id: string) => void;
+}
+
+export class TodoListItem extends React.Component<TodoListItemProps, any> {
+  render() {
+    const { label, completed, complete, id } = this.props;
+
+    return (
+      <li className="todo">
+        <label>
+          <input type="checkbox" checked={completed} onChange={() => complete(id)} /> {label}
+        </label>
+      </li>
+    );
+  }
+}

docs/step1-07/final/src/index.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { TodoApp } from './TodoApp';
+ReactDOM.render(<TodoApp />, document.getElementById('app'));

docs/step1-07/final/src/style.css

@@ -0,0 +1,49 @@
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  width: 400px;
+  margin: 20px auto;
+}
+
+h1 {
+  text-align: center;
+}
+
+.addTodo {
+  display: flex;
+}
+
+.textfield {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.submit {
+  border: none;
+  padding: 5px 10px;
+}
+
+.filter {
+  margin: 10px 0 0;
+}
+
+.filter button {
+  background: transparent;
+  border: none;
+}
+
+.filter .selected {
+  border-bottom: 2px solid blue;
+}
+
+.todos {
+  list-style: none;
+  padding: 0;
+}
+
+footer {
+  display: flex;
+}
+
+footer span {
+  flex-grow: 1;
+}

docs/step1-07/index.html

@@ -0,0 +1,15 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="../assets/shared.css" />
+    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />
+  </head>
+
+  <body class="ms-Fabric">
+    <div class="Container">
+      <ul class="Tiles">
+        <li class="Tile"><a href="./demo/index.html" class="Tile-link">Demo Start</a></li>
+        <li class="Tile"><a href="./final/index.html" class="Tile-link">Final</a></li>
+      </ul>
+    </div>
+  </body>
+</html>