practice 3

src/App.tsx

@@ -1,7 +1,26 @@
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+
+import TodoList from "./containers/TodoList/TodoList"
+import NewTodo from "./containers/TodoList/NewTodo/NewTodo"
+import TodoDetail from "./components/TodoDetail/TodoDetail"
+
 import "./App.css";
 
 function App() {
-  return <div className="App"></div>;
+    return (
+      <div className="App">
+        <BrowserRouter>
+          <Routes>
+            <Route path="todos" element={<TodoList title={"My TODOs!"} />} />
+            <Route path="new-todo" element={<NewTodo />} />
+            {/* <Route path="/todos/:id" element={<TodoDetail />} /> */}
+
+            <Route path="/" element={<Navigate replace to={"/todos"} />} />
+            <Route path="*" element={<h1>Not Found</h1>} />
+          </Routes>
+        </BrowserRouter>
+    </div>
+    );
 }
 
-export default App;
+export default App;

src/components/Todo/Todo.tsx

@@ -1 +1,20 @@
-export {};
+import "./Todo.css";
+
+interface IProps {
+    title: string;
+    clicked?: React.MouseEventHandler<HTMLDivElement>;  // Defined by React
+    done: boolean;
+}
+
+const Todo = (props: IProps) => {
+    return (
+        <div className="Todo">
+        <div className={`text ${props.done && "done"}`} onClick={props.clicked}>
+            {props.title}
+        </div>
+        {props.done && <div className="done-mark">&#x2713;</div>}
+        </div>
+    );
+};
+export default Todo;
+

src/components/TodoDetail/TodoDetail.tsx

@@ -1 +1,24 @@
-export {};
+import "./TodoDetail.css"
+
+type Props = {
+    title: string;
+    content: string;  
+};
+
+const TodoDetail = (props: Props) => {
+    return (
+        <div className="TodoDetail">
+            <div className="row">
+                <div className="left">Name: </div>
+                <div className="right">{props.title}</div>
+            </div>
+
+            <div className="row">
+                <div className="left">Content: </div>
+                <div className="right">{props.content}</div>
+            </div>
+        </div>
+    );
+}
+
+export default TodoDetail;

src/containers/TodoList/NewTodo/NewTodo.tsx

@@ -1 +1,36 @@
-export {};
+import { useState } from "react";
+import { Navigate } from "react-router-dom";
+import "./NewTodo.css";
+
+const NewTodo = () => {
+    const [title, setTitle] = useState<string>("");
+    const [content, setContent] = useState<string>("");
+    const [submitted, setSubmitted] = useState<boolean>(false);
+
+    const postTodoHandler = () => {
+        const data = { title: title, content: content };
+
+        alert("Submitted\n" + data.title + "\n" + data.content);
+        setSubmitted(true);
+    };
+
+    return submitted ? <Navigate to="/todos" /> : (
+        <div className="NewTodo">
+            <h1>Add a Todo</h1>
+
+            <label>Title</label>
+            <input type="text" value={title} 
+            onChange={(event) => setTitle(event.target.value)}/>
+
+            <label>Content</label>
+            <textarea rows={4} value={content} 
+            onChange={(event) => setContent(event.target.value)}/>
+
+            <button onClick={postTodoHandler}>
+                Submit
+            </button>
+        </div>
+    );
+}
+
+export default NewTodo;

src/containers/TodoList/TodoList.tsx

@@ -1 +1,51 @@
-export {};
+import { render } from "@testing-library/react";
+import { useState, useMemo } from "react";
+import { Link, NavLink } from "react-router-dom";
+
+import Todo from "../../components/Todo/Todo";
+import TodoDetail from "../../components/TodoDetail/TodoDetail";
+
+import "./TodoList.css";
+
+interface IProps {
+    title: string;
+}
+
+type TodoType = { id: number; title: string; content: string; done: boolean;};
+
+const TodoList = (props: IProps) => {
+    const { title } = props;
+    const [todos, setTodos] = useState<TodoType[]>([
+        { id: 1, title: "SWPP", content: "take swpp class", done: true },
+        { id: 2, title: "Movie", content: "watch movie", done: false },
+        { id: 3, title: "Dinner", content: "eat dinner", done: false },
+    ]);
+
+    const [selectedTodo, setSelectedTodo] = useState<TodoType | null>(null);
+    const clickTodoHandler = (todo: TodoType) => {
+         setSelectedTodo(selectedTodo === todo ? null : todo)
+    };
+
+    const todoDetail = useMemo(() => {
+        return selectedTodo ? (
+            <TodoDetail title={selectedTodo.title} content={selectedTodo.content} />
+        ) : null;
+    }, [selectedTodo]);
+
+    return (
+        <div className="TodoList">
+            <div className="title">{title}</div>
+            <div className="todos">
+                {todos.map((td) => {
+                    return <Todo key={td.id} title={td.title} done={td.done} clicked={() => clickTodoHandler(td)}/>;
+                })}
+
+                {todoDetail}
+
+                <NavLink to="/new-todo">New Todo</NavLink>
+
+            </div>
+        </div>);
+}  
+
+export default TodoList;