From c1cac333d889a27119e7d8968a5d39cd7fa88a43 Mon Sep 17 00:00:00 2001
From: Micah Godbolt <mgodbolt@microsoft.com>
Date: Thu, 14 Feb 2019 15:02:36 -0800
Subject: [PATCH] adding types to 7

---
 step1-07/src/TodoApp.types.ts            | 10 ++++++++++
 step1-07/src/components/TodoFooter.tsx   |  7 ++++++-
 step1-07/src/components/TodoHeader.tsx   | 21 ++++++++++++---------
 step1-07/src/components/TodoList.tsx     | 11 +++++++++--
 step1-07/src/components/TodoListItem.tsx |  8 +++++++-
 step2-01/src/components/TodoHeader.tsx   |  2 +-
 6 files changed, 45 insertions(+), 14 deletions(-)
 create mode 100644 step1-07/src/TodoApp.types.ts

diff --git a/step1-07/src/TodoApp.types.ts b/step1-07/src/TodoApp.types.ts
new file mode 100644
index 0000000..eb5437e
--- /dev/null
+++ b/step1-07/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;
+}
diff --git a/step1-07/src/components/TodoFooter.tsx b/step1-07/src/components/TodoFooter.tsx
index b36b788..29534a9 100644
--- a/step1-07/src/components/TodoFooter.tsx
+++ b/step1-07/src/components/TodoFooter.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
+import { Todos } from '../TodoApp.types';
+interface TodoFooterProps {
+  clear: () => void;
+  todos: Todos;
+}
 
-export const TodoFooter = (props: any) => {
+export const TodoFooter = (props: TodoFooterProps) => {
   const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
   return (
     <footer>
diff --git a/step1-07/src/components/TodoHeader.tsx b/step1-07/src/components/TodoHeader.tsx
index f3b2b35..30ef324 100644
--- a/step1-07/src/components/TodoHeader.tsx
+++ b/step1-07/src/components/TodoHeader.tsx
@@ -1,13 +1,20 @@
 import React from 'react';
+import { FilterTypes } from '../TodoApp.types';
 
-export class TodoHeader extends React.Component<any, any> {
+interface TodoHeaderProps {
+  addTodo: (label: string) => void;
+  setFilter: (filter: FilterTypes) => void;
+  filter: FilterTypes;
+}
+
+export class TodoHeader extends React.Component<TodoHeaderProps, any> {
   constructor(props) {
     super(props);
     this.state = { labelInput: '' };
   }
 
   render() {
-    const { filter } = this.props;
+    const { filter, setFilter } = this.props;
     return (
       <div>
         <h1>todos</h1>
@@ -16,13 +23,13 @@ export class TodoHeader extends React.Component<any, any> {
           Add
         </button>
         <div className="filter">
-          <button onClick={() => this._onFilter('all')} className={filter == 'all' ? 'active' : ''}>
+          <button onClick={() => setFilter('all')} className={filter == 'all' ? 'active' : ''}>
             all
           </button>
-          <button onClick={() => this._onFilter('active')} className={filter == 'active' ? 'active' : ''}>
+          <button onClick={() => setFilter('active')} className={filter == 'active' ? 'active' : ''}>
             active
           </button>
-          <button onClick={() => this._onFilter('completed')} className={filter == 'completed' ? 'active' : ''}>
+          <button onClick={() => setFilter('completed')} className={filter == 'completed' ? 'active' : ''}>
             completed
           </button>
         </div>
@@ -30,10 +37,6 @@ export class TodoHeader extends React.Component<any, any> {
     );
   }
 
-  _onFilter = filter => {
-    this.props.setFilter(filter);
-  };
-
   _onChange = evt => {
     this.setState({ labelInput: evt.target.value });
   };
diff --git a/step1-07/src/components/TodoList.tsx b/step1-07/src/components/TodoList.tsx
index d5c83a2..e6419e9 100644
--- a/step1-07/src/components/TodoList.tsx
+++ b/step1-07/src/components/TodoList.tsx
@@ -1,7 +1,14 @@
 import React from 'react';
 import { TodoListItem } from './TodoListItem';
+import { FilterTypes, Todos } from '../TodoApp.types';
 
-export class TodoList extends React.Component<any, any> {
+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;
 
@@ -12,7 +19,7 @@ export class TodoList extends React.Component<any, any> {
     return (
       <ul className="todos">
         {filteredTodos.map(id => (
-          <TodoListItem key={id} id={id} {...todos[id]} complete={complete} />
+          <TodoListItem key={id} id={id} complete={complete} {...todos[id]} />
         ))}
       </ul>
     );
diff --git a/step1-07/src/components/TodoListItem.tsx b/step1-07/src/components/TodoListItem.tsx
index a927e63..3f359ce 100644
--- a/step1-07/src/components/TodoListItem.tsx
+++ b/step1-07/src/components/TodoListItem.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
+import { TodoItem } from '../TodoApp.types';
 
-export class TodoListItem extends React.Component<any, any> {
+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;
 
diff --git a/step2-01/src/components/TodoHeader.tsx b/step2-01/src/components/TodoHeader.tsx
index 960777a..45c4507 100644
--- a/step2-01/src/components/TodoHeader.tsx
+++ b/step2-01/src/components/TodoHeader.tsx
@@ -6,7 +6,7 @@ import { FilterTypes } from '../store';
 interface TodoHeaderProps {
   addTodo: (label: string) => void;
   setFilter: (filter: FilterTypes) => void;
-  filter: string;
+  filter: FilterTypes;
 }
 
 interface TodoHeaderState {