Rewrite of Day 1 to use modern React (#294)

* update to hooks

* more class to function

* cleanup

* finish ts final

* update html lesson

* add lessons page

* clean up

* move getters into context

* adding type

* fix bug

* step 5 cleanup

* init final pass

* text tweak

* fix ternaries

* readme cleanup

* fixed root readme

step1-06/demo/src/TodoApp.tsx

@@ -3,14 +3,12 @@ import { TodoFooter } from './components/TodoFooter';
 import { TodoHeader } from './components/TodoHeader';
 import { TodoList } from './components/TodoList';
 
-export class TodoApp extends React.Component<any, any> {
-  render() {
-    return (
-      <div>
-        <TodoHeader />
-        <TodoList />
-        <TodoFooter />
-      </div>
-    );
-  }
+export const TodoApp = () => {
+  return (
+    <div>
+      <TodoHeader />
+      <TodoList />
+      <TodoFooter />
+    </div>
+  );
 }

step1-06/demo/src/components/TodoHeader.tsx

@@ -1,30 +1,25 @@
 import React from 'react';
 
-export class TodoHeader extends React.Component<any, any> {
-  constructor(props) {
-    super(props);
-    this.state = { labelInput: '' };
-  }
+export const TodoHeader = (props) => {
 
-  render() {
-    const { filter } = this.props;
-    return (
-      <header>
-        <h1>todos <small>(1.6 demo)</small></h1>
-        <div className="addTodo">
-          <input className="textfield" placeholder="add todo" />
-          <button className="submit">Add</button>
-        </div>
-        <nav className="filter">
-          <button className="completed">all</button>
-          <button>active</button>
-          <button>completed</button>
-        </nav>
-      </header>
-    );
-  }
+  const [inputText, setInputText] = React.useState('')
+  const { filter } = props;
 
-  _onChange = evt => {
-    this.setState({ labelInput: evt.target.value });
+  const handleChange = e => {
+    setInputText(e.target.value);
   };
+  return (
+    <header>
+      <h1>todos <small>(1.6 demo)</small></h1>
+      <div className="addTodo">
+        <input className="textfield" placeholder="add todo" />
+        <button className="submit">Add</button>
+      </div>
+      <nav className="filter">
+        <button className="selected">all</button>
+        <button>active</button>
+        <button>completed</button>
+      </nav>
+    </header>
+  );
 }

step1-06/demo/src/components/TodoList.tsx

@@ -1,19 +1,18 @@
 import React from 'react';
 import { TodoListItem } from './TodoListItem';
 
-export class TodoList extends React.Component<any, any> {
-  render() {
-    const { filter, todos = {} } = this.props;
+export const TodoList = (props) => {
+  const { filter, todos = [] } = props;
 
-    // filteredTodos returns an array of filtered todo keys [01,02,03]
-    const filteredTodos = Object.keys(todos).filter(id => {
-      return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
-    });
+  const filteredTodos = todos.filter(todo => {
+    return filter === 'all'
+      || (filter === 'completed' && todo.status === 'completed')
+      || (filter === 'active' && todo.status === 'active');
+  });
 
-    return (
-      <ul className="todos">
-        {['01', '02', '03', '04'].map((id) => <TodoListItem />)}
-      </ul>
-    );
-  }
+  return (
+    <ul className="todos">
+      {['01', '02', '03', '04'].map((todo) => <TodoListItem />)}
+    </ul>
+  );
 }

step1-06/demo/src/components/TodoListItem.tsx

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