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-07/final/src/components/TodoListItem.tsx

@@ -1,21 +1,16 @@
 import React from 'react';
-import { TodoItem } from '../TodoApp.types';
+import { Todo } from '../TodoApp.types';
+import { AppContext } from '../TodoApp';
 
-interface TodoListItemProps extends TodoItem {
-  id: string;
-  complete: (id: string) => void;
-}
+export const TodoListItem = (props: Todo) => {
+  const { label, status, id } = props;
+  const { toggleCompleted } = React.useContext(AppContext);
 
-export class TodoListItem extends React.Component<TodoListItemProps, any> {
-  render() {
-    const { label, completed, complete, id } = this.props;
-
-    return (
-      <li className="todo">
-        <label>
-          <input type="checkbox" checked={completed} onChange={() => complete(id)} /> {label}
-        </label>
-      </li>
-    );
-  }
-}
+  return (
+    <li className="todo">
+      <label>
+        <input type="checkbox" checked={status === 'completed'} onChange={() => toggleCompleted(id)} /> {label}
+      </label>
+    </li>
+  );
+};