finished step 7 docs

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

@@ -7,12 +7,16 @@ interface TodoFooterProps {
 
 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={() => props.clear()} className="submit">
+      <button onClick={_onClick} className="submit">
         Clear Completed
       </button>
     </footer>

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

@@ -7,7 +7,11 @@ interface TodoHeaderProps {
   filter: FilterTypes;
 }
 
-export class TodoHeader extends React.Component<TodoHeaderProps, any> {
+interface TodoHeaderState {
+  labelInput: string;
+}
+
+export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
   constructor(props) {
     super(props);
     this.state = { labelInput: '' };
@@ -25,13 +29,13 @@ export class TodoHeader extends React.Component<TodoHeaderProps, any> {
           </button>
         </div>
         <nav className="filter">
-          <button onClick={() => setFilter('all')} className={filter == 'all' ? 'completed' : ''}>
+          <button onClick={this._onFilter} className={filter == 'all' ? 'selected' : ''}>
             all
           </button>
-          <button onClick={() => setFilter('active')} className={filter == 'active' ? 'completed' : ''}>
+          <button onClick={this._onFilter} className={filter == 'active' ? 'selected' : ''}>
             active
           </button>
-          <button onClick={() => setFilter('completed')} className={filter == 'completed' ? 'completed' : ''}>
+          <button onClick={this._onFilter} className={filter == 'completed' ? 'selected' : ''}>
             completed
           </button>
         </nav>
@@ -39,6 +43,10 @@ export class TodoHeader extends React.Component<TodoHeaderProps, any> {
     );
   }
 
+  _onFilter = evt => {
+    this.props.setFilter(evt.target.textContet);
+  };
+
   _onChange = evt => {
     this.setState({ labelInput: evt.target.value });
   };