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: [
+      todos: {
-        { key: 1, text: 'Todo 1', completed: true },
+        '04': {
-        { key: 2, text: 'Todo 2' },
+          label: 'Todo 4',
-        { key: 3, text: 'Todo 3' },
+          completed: true
-        { key: 4, text: 'Todo 4' }
+        },
-      ],
+        '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 == 'all' ? 'active' : ''}>all</button>
-          <button className={filter == "active" ? "active" : ""}>active</button>
+          <button className={filter == 'active' ? 'active' : ''}>active</button>
-          <button className={filter == "completed" ? "active" : ""}>
+          <button className={filter == 'completed' ? 'active' : ''}>completed</button>
-            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 React from 'react';
-import ReactDOM from "react-dom";
+import ReactDOM from 'react-dom';
-import { TodoApp } from "./App";
+import { TodoApp } from './TodoApp';
-ReactDOM.render(<TodoApp />, document.getElementById("app"));
+ReactDOM.render(<TodoApp />, document.getElementById('app'));

step1-07/src/App.tsx

@@ -1,76 +0,0 @@
-import React from "react";
-import { TodoFooter } from "./components/TodoFooter";
-import { TodoHeader } from "./components/TodoHeader";
-import { TodoList } from "./components/TodoList";
-
-export class TodoApp extends React.Component<any, any> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      inputValue: "",
-      todos: [],
-      filter: "all"
-    };
-  }
-  render() {
-    const { filter, todos, inputValue } = this.state;
-    return (
-      <div>
-        <TodoHeader
-          onInputChange={this._updateInput}
-          inputValue={inputValue}
-          onTodoSubmit={this._addTodo}
-          onFilterClick={this._updateFilter}
-          filter={filter}
-        />
-        <TodoList onTodoToggle={this._toggleTodoComplete} todos={todos} filter={filter} />
-        <TodoFooter onClearClick={this._removeCompletedTodos} todos={todos} />
-      </div>
-    );
-  }
-
-  _addTodo = () => {
-    const { todos, inputValue } = this.state;
-    const newTodos = [
-      {
-        id: todos[0] ? todos[0].id + 1 : 0,
-        text: inputValue
-      },
-      ...todos
-    ];
-
-    this.setState({
-      todos: newTodos,
-      inputValue: ""
-    });
-  };
-
-  _toggleTodoComplete = (id) => {
-    this.setState({
-      todos: this.state.todos.map(todo => {
-        if (todo.id == id) {todo.completed = !todo.completed}
-        return todo;
-      })
-    })
-  }
-
-  _removeCompletedTodos = () => {
-    this.setState({
-      todos: this.state.todos.filter(todo => {
-        return !todo.completed;
-      })
-    })
-  }
-
-  _updateFilter = (filter) => {
-    this.setState({
-      filter: filter
-    })
-  };
-
-  _updateInput = ev => {
-    this.setState({
-      inputValue: ev.target.value
-    });
-  };
-}

step1-07/src/TodoApp.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { TodoFooter } from './components/TodoFooter';
+import { TodoHeader } from './components/TodoHeader';
+import { TodoList } from './components/TodoList';
+
+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 _remove = id => {
+    const newTodos = { ...this.state.todos };
+    delete newTodos[id];
+
+    this.setState({
+      todos: newTodos
+    });
+  };
+
+  private _complete = id => {
+    const newTodos = { ...this.state.todos };
+    newTodos[id].completed = !newTodos[id].completed;
+
+    this.setState({
+      todos: newTodos
+    });
+  };
+
+  private _edit = (id, label) => {
+    const newTodos = { ...this.state.todos };
+    newTodos[id] = { ...newTodos[id], label };
+
+    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
+    });
+  };
+}

step1-07/src/components/TodoFooter.tsx

@@ -1,11 +1,15 @@
-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>
-      <button onClick={props.onClearClick} className="button">Clear Completed</button>
+        {itemCount} item{itemCount > 1 ? 's' : ''} left
+      </span>
+      <button onClick={() => props.clear()} className="button">
+        Clear Completed
+      </button>
     </footer>
   );
 };

step1-07/src/components/TodoHeader.tsx

@@ -1,21 +1,45 @@
-import React from "react";
+import React from 'react';
 
 export class TodoHeader extends React.Component<any, any> {
+  constructor(props) {
+    super(props);
+    this.state = { labelInput: '' };
+  }
+
   render() {
-    const { filter, inputValue, onInputChange, onTodoSubmit, onFilterClick } = this.props;
+    const { filter } = this.props;
     return (
       <div>
         <h1>todos</h1>
-        <input value={inputValue} onChange={onInputChange} className="textfield" />
+        <input value={this.state.labelInput} onChange={this._onChange} className="textfield" />
-        <button onClick={onTodoSubmit} className="button add">Add</button>
+        <button onClick={this._onAdd} className="button add">
+          Add
+        </button>
         <div className="filter">
-          <button onClick={() => onFilterClick('all')} className={filter == "all" ? "active" : ""}>all</button>
+          <button onClick={() => this._onFilter('all')} className={filter == 'all' ? 'active' : ''}>
-          <button onClick={() => onFilterClick('active')} className={filter == "active" ? "active" : ""}>active</button>
+            all
-          <button onClick={() => onFilterClick('completed')} className={filter == "completed" ? "active" : ""}>
+          </button>
+          <button onClick={() => this._onFilter('active')} className={filter == 'active' ? 'active' : ''}>
+            active
+          </button>
+          <button onClick={() => this._onFilter('completed')} className={filter == 'completed' ? 'active' : ''}>
             completed
           </button>
         </div>
       </div>
     );
   }
+
+  _onFilter = filter => {
+    this.props.setFilter(filter);
+  };
+
+  _onChange = evt => {
+    this.setState({ labelInput: evt.target.value });
+  };
+
+  _onAdd = () => {
+    this.props.addTodo(this.state.labelInput);
+    this.setState({ labelInput: '' });
+  };
 }

step1-07/src/components/TodoList.tsx

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

step1-07/src/components/TodoListItem.tsx

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

step1-07/src/index.tsx

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