0921 practice

.gitignore

@@ -4,6 +4,8 @@
 /node_modules
 /.pnp
 .pnp.js
+.npm/
+.config/
 
 # testing
 /coverage

package.json

@@ -12,6 +12,8 @@
     "@types/react-dom": "18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router": "^6.4.1",
+    "react-router-dom": "^6.4.1",
     "react-scripts": "5.0.1",
     "typescript": "4.7.4",
     "web-vitals": "2.1.4"
@@ -39,5 +41,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-router-dom": "^5.3.3"
   }
 }

src/App.tsx

@@ -1,7 +1,19 @@
+import {BrowserRouter, Routes, Route } from "react-router-dom";
+
+import TodoList from "./containers/TodoList/TodoList";
+import NewTodo from "./containers/TodoList/NewTodo/NewTodo";
+
 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>
+        <Route path="new-todo" element={<NewTodo />}></Route>
+      </Routes>
+    </BrowserRouter>
+  </div>;
 }
 
 export default App;

src/components/Todo/Todo.tsx

@@ -1 +1,20 @@
-export {};
+import "./Todo.css";
+
+interface IProps {
+    title: string;
+    clicked?: React.MouseEventHandler<HTMLDivElement>;
+    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,23 @@
-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,33 @@
-export {};
+import { useState } from "react";
+import { Navigate } from "react-router-dom";
+import "./NewTodo.css";
+
+
+export default function NewTodo() {
+    const [title, setTitle] = useState<string>("");
+    const [content, setContent] = useState<string>("");
+    const [submitted, setSubmitted] = useState<boolean>(false);
+
+    return (
+        <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={() => alert("Submitted")}>Submit</button>
+        </div>
+    );
+};

src/containers/TodoList/TodoList.tsx

@@ -1 +1,53 @@
-export {};
+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 NewTodo from "./NewTodo/NewTodo";
+
+import "./TodoList.css";
+
+type TodoType = {
+    id: number;
+    title: string;
+    content: string;
+    done: boolean;
+};
+
+interface IProps {
+    title: string;
+};
+
+export default function TodoList(props: IProps){
+    const {title} = props;
+    const [todos, setTodos] = useState<TodoType[]>(
+        [
+            {id: 1, title: "laundry", content: "to the laundry", done:true},
+            {id: 2, title: "dishes", content: "to the dishes", done:false},
+        ]
+    );
+    const [selectedTodo, setSelectedTodo] = useState<TodoType | null>(null);
+    const clickTodoHandler = (todo: TodoType) => {
+        if (selectedTodo === todo) {
+            setSelectedTodo(null);
+        }
+        else {
+            setSelectedTodo(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>
+            <NewTodo />
+        </div>
+    </div>;
+};