Implementing to do list

my-app/src/AddTodoForm.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+
+interface Props {
+  addTodo: AddTodo;
+}
+
+export const AddTodoForm: React.FC<Props> = (param) => {
+  //const { addTodo } = param;
+  const addTodo         = param.addTodo;
+  const [text, setText] = useState('') ;
+
+  return (
+    <form>
+      <input
+        value={text}
+        type="text"
+        onChange={event => {
+          setText(event.target.value);
+        }}
+      />
+      <button
+        type="submit"
+        onClick={event => {
+          event.preventDefault();
+          addTodo(text);
+          setText('');
+        }}
+      >
+      Add Todo
+      </button>
+    </form>
+  );
+};

my-app/src/App.tsx

@@ -1,25 +1,52 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from 'react'
+import { AddTodoForm } from './AddTodoForm';
+import { TodoList } from './TodoList';
+
+const initialTodos: Todo[] = [
+  {
+    text: 'Walk the dog',
+    complete: false,
+    id: 'test1' + new Date().getTime(),
+  },
+  {
+    text: 'Write app',
+    complete: true,
+    id: 'test2' + new Date().getTime(),
+  },
+];
+
+function App() {  
+  const [todos, setTodos] = useState(initialTodos);
+
+  const toggleTodo: ToggleTodo = (selectedTodo: Todo) => {
+    const newTodos = todos.map(todo => {
+      if (todo === selectedTodo) {
+        return {
+          ...todo,
+          complete: !todo.complete,
+        };
+      }
+      return todo;
+    });
+    setTodos(newTodos);
+  };
+
+  const addTodo: AddTodo = (text: string) => {
+    const id = text + new Date().getTime()
+    const newTodo = { text, complete: false, id: id };
+    setTodos([...todos, newTodo]); 
+  };
+
+  const deleteTodo: DeleteTodo = (todoId: string) => {
+    const newTodo = todos.filter(selectedItem => selectedItem.id !== todoId)
+    setTodos(newTodo);
+  };
 
-function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <TodoList todos={todos} toggleTodo={toggleTodo} deleteTodo={deleteTodo} />
+      <AddTodoForm addTodo={addTodo} />
+    </>
   );
 }
 

my-app/src/TodoList.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TodoListItem } from './TodoListItem';
+
+interface Props {
+  todos: Todo[];
+  toggleTodo: ToggleTodo;
+  deleteTodo: DeleteTodo;
+}
+
+export const TodoList: React.FC<Props> = ( param ) => {
+  const todos      = param.todos     ;
+  const toggleTodo = param.toggleTodo;
+  const deleteTodo = param.deleteTodo;
+
+  return (
+    <ul>
+      {todos.map(todo => (
+        <TodoListItem key={todo.text} todo={todo} toggleTodo={toggleTodo} deleteTodo={deleteTodo} />
+      ))}
+    </ul>
+  );
+};

my-app/src/TodoListItem.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+interface Props {
+  todo: Todo;
+  toggleTodo: ToggleTodo;
+  deleteTodo: DeleteTodo;
+}
+
+export const TodoListItem: React.FC<Props> = (param) => {
+  const todo       = param.todo      ;
+  const toggleTodo = param.toggleTodo;
+  const deleteTodo = param.deleteTodo;
+  const labelStyle = {textDecoration: todo.complete ? "line-through" : undefined};
+
+  return (
+    <li>
+      <label style={labelStyle} >
+        <input
+          type="checkbox"
+          checked={todo.complete}
+          onClick={() => {
+            toggleTodo(todo);
+          }}
+          readOnly
+        /> 
+        {' '}
+        {todo.text}
+        {' '}
+        {' '}
+        <button
+        type="submit"
+        onClick={event => {
+          event.preventDefault();
+          deleteTodo(todo.id);
+        }}
+        >
+        X
+        </button>  
+      </label>
+    </li>
+  );
+};

my-app/src/index.tsx

@@ -1,17 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

my-app/src/types.d.ts

@@ -0,0 +1,10 @@
+interface Todo{
+    text: string;
+    complete: boolean;
+    id: string;
+}
+
+type ToggleTodo = (selectedTodo: Todo) => void;
+
+type AddTodo = (text: string) => void;
+type DeleteTodo = (todoId: string) => void;