feat: swpp practice 3

.bash_history

@@ -0,0 +1,8 @@
+yarn start
+yarn --version
+npm --version
+npm install
+yarn start
+yarn add react-router react-router-dom
+yarn start
+exit

.config/configstore/update-notifier-npm.json

@@ -0,0 +1,4 @@
+{
+	"optOut": false,
+	"lastUpdateCheck": 1663842055294
+}

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"

src/App.tsx

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

src/components/Todo/Todo.tsx

@@ -1 +1,19 @@
-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,50 @@
-export {};
+import { useState } from "react";
+import {Navigate, useNavigate} 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);
+  const postTodoHandler = () => {
+    const data = {title: title, content: content};
+    alert("Submitted\n" + data.title + "\n" + data.content);
+    setSubmitted(true);
+  };
+  // const navigate = useNavigate()
+  // const postTodoHandler = () => {
+  //   const data = { title: title, content: content };
+  //   alert("Submitted\n" + data.title + "\n" + data.content);
+  //   setSubmitted(true);
+  //   navigate('/todos')
+  // };
+
+  if (submitted){
+    return <Navigate to="/todos" />;
+  }else{
+    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={
+        () => postTodoHandler()
+      }>Submit</button>
+      </div>
+    );
+  }
+}

src/containers/TodoList/TodoList.tsx

@@ -1 +1,46 @@
-export {};
+import { useState, useMemo } from "react";
+import {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"
+interface IProps {
+  title: string;
+}
+
+type TodoType = {id: number; title: string; content: string; done: boolean;};
+
+export default function TodoList(props: IProps) {
+  const {title} = props
+  const [selectedTodo, setSelectedTodo] = useState<TodoType | null>(null);
+  const clickTodohandler = (td: TodoType) => {
+    if (selectedTodo == td) {
+      setSelectedTodo(null)
+    } else{
+      setSelectedTodo(td)
+    }
+  }
+  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 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 title={td.title} done={td.done} clicked={() => clickTodohandler(td)} />
+        })}
+        {todoDetail}
+        <NavLink to="/new-todo" > New Todo</NavLink>
+      </div>
+    </div>
+  );
+}
+