From ae59eb26f652533e8075defc5431f06020b42a16 Mon Sep 17 00:00:00 2001 From: syrius527 Date: Thu, 22 Sep 2022 13:39:34 +0900 Subject: [PATCH 1/2] practice session 3 --- .bash_history | 7 + package.json | 2 + src/App.tsx | 14 +- src/components/Todo/Todo.tsx | 20 +- src/components/TodoDetail/TodoDetail.tsx | 23 +- src/containers/TodoList/NewTodo/NewTodo.tsx | 35 +- src/containers/TodoList/TodoList.tsx | 58 +- yarn.lock | 9079 +++++++++++++++++++ 8 files changed, 9233 insertions(+), 5 deletions(-) create mode 100644 .bash_history create mode 100644 yarn.lock diff --git a/.bash_history b/.bash_history new file mode 100644 index 0000000..8f79848 --- /dev/null +++ b/.bash_history @@ -0,0 +1,7 @@ +yarn start +yarn start +yarn start +yarn start +yarn start +yarn start +exit diff --git a/package.json b/package.json index 0f38547..e4bca0c 100644 --- a/package.json +++ b/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.0", + "react-router-dom": "^6.4.0", "react-scripts": "5.0.1", "typescript": "4.7.4", "web-vitals": "2.1.4" diff --git a/src/App.tsx b/src/App.tsx index 9d18e93..0167035 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,19 @@ 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
; + return
+ + + } /> + } /> + } /> + Not Found} /> + + +
; } export default App; diff --git a/src/components/Todo/Todo.tsx b/src/components/Todo/Todo.tsx index cb0ff5c..d37d951 100644 --- a/src/components/Todo/Todo.tsx +++ b/src/components/Todo/Todo.tsx @@ -1 +1,19 @@ -export {}; +import "./Todo.css"; + +interface IProps { + title: string; + clicked?: React.MouseEventHandler; // Defined by React + done: boolean; +}; + +const Todo = (props: IProps) => { + return ( +
+
+ {props.title} +
+ {props.done &&
✓
} +
+ ); +}; +export default Todo; \ No newline at end of file diff --git a/src/components/TodoDetail/TodoDetail.tsx b/src/components/TodoDetail/TodoDetail.tsx index cb0ff5c..0827206 100644 --- a/src/components/TodoDetail/TodoDetail.tsx +++ b/src/components/TodoDetail/TodoDetail.tsx @@ -1 +1,22 @@ -export {}; +import "./TodoDetail.css"; +type Props = { + title: string; + content: string; +}; + +const TodoDetail = (props: Props) => { + return ( +
+
+
Name:
+
{props.title}
+
+
+
Content:
+
{props.content}
+
+
+ ); +}; + +export default TodoDetail; \ No newline at end of file diff --git a/src/containers/TodoList/NewTodo/NewTodo.tsx b/src/containers/TodoList/NewTodo/NewTodo.tsx index cb0ff5c..d7b2124 100644 --- a/src/containers/TodoList/NewTodo/NewTodo.tsx +++ b/src/containers/TodoList/NewTodo/NewTodo.tsx @@ -1 +1,34 @@ -export {}; +import { useState } from "react"; +import { Navigate } from "react-router-dom"; +import "./NewTodo.css"; + +export default function NewTodo() { + const [title, setTitle] = useState(""); + const [content, setContent] = useState(""); + const [submitted, setSubmitted] = useState(false); + + const postTodoHandler = () => { + const data = {title, content}; + alert("Submitted!\n" + data.title + "\n" + data.content); + setSubmitted(true); + } + + if (submitted) { + return ; + } else { + return ( +
+

Add a Todo

+ + setTitle(event.target.value)}/> + +