converting to object todos

step1-06/src/TodoApp.tsx

@@ -7,12 +7,24 @@ export class TodoApp extends React.Component<any, any> {
   constructor(props) {
     super(props);
     this.state = {
-      todos: [
-        { key: 1, text: 'Todo 1', completed: true },
-        { key: 2, text: 'Todo 2' },
-        { key: 3, text: 'Todo 3' },
-        { key: 4, text: 'Todo 4' }
-      ],
+      todos: {
+        '04': {
+          label: 'Todo 4',
+          completed: true
+        },
+        '03': {
+          label: 'Todo 3',
+          completed: false
+        },
+        '02': {
+          label: 'Todo 2',
+          completed: false
+        },
+        '01': {
+          label: 'Todo 1',
+          completed: false
+        }
+      },
       filter: 'all'
     };
   }

step1-06/src/components/TodoFooter.tsx

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

step1-06/src/components/TodoHeader.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 export class TodoHeader extends React.Component<any, any> {
   render() {
@@ -9,11 +9,9 @@ export class TodoHeader extends React.Component<any, any> {
         <input className="textfield" />
         <button className="button add">Add</button>
         <div className="filter">
-          <button className={filter == "all" ? "active" : ""}>all</button>
-          <button className={filter == "active" ? "active" : ""}>active</button>
-          <button className={filter == "completed" ? "active" : ""}>
-            completed
-          </button>
+          <button className={filter == 'all' ? 'active' : ''}>all</button>
+          <button className={filter == 'active' ? 'active' : ''}>active</button>
+          <button className={filter == 'completed' ? 'active' : ''}>completed</button>
         </div>
       </div>
     );

step1-06/src/components/TodoList.tsx

@@ -4,24 +4,15 @@ import { TodoListItem } from './TodoListItem';
 export class TodoList extends React.Component<any, any> {
   render() {
     const { filter, todos } = this.props;
-    let filteredTodos: typeof todos = {};
-
-    filteredTodos = todos.filter(todo => {
-      const matchesActive = filter == 'active' && !todo.completed;
-      const matchesCompleted = filter == 'completed' && todo.completed;
-      
-      return filter == 'all' || matchesActive || matchesCompleted; 
-    })
-
-    const TodoListItems = filteredTodos.map(todo => {
-      return (
-        <TodoListItem {...todo} />
-      );
-    })
 
+    const filteredTodos = Object.keys(todos).filter(id => {
+      return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
+    });
     return (
       <ul className="todos">
-        {TodoListItems}         
+        {filteredTodos.map(id => (
+          <TodoListItem key={id} {...todos[id]} />
+        ))}
       </ul>
     );
   }

step1-06/src/components/TodoListItem.tsx

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

step1-06/src/index.tsx

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