From f58a6b155b1fb87b99426d9ebfd380391c86e77e Mon Sep 17 00:00:00 2001 From: DoohyunHwang97 Date: Thu, 22 Sep 2022 19:16:36 +0900 Subject: [PATCH 1/2] first commit --- .bash_history | 1 + package-lock.json | 32 +++++++++++++++++++++++++++- package.json | 4 +++- src/App.tsx | 3 ++- src/components/Todo/Todo.tsx | 17 ++++++++++++++- src/containers/TodoList/TodoList.tsx | 22 ++++++++++++++++++- 6 files changed, 74 insertions(+), 5 deletions(-) create mode 100644 .bash_history diff --git a/.bash_history b/.bash_history new file mode 100644 index 0000000..520bdc4 --- /dev/null +++ b/.bash_history @@ -0,0 +1 @@ +yarn start diff --git a/package-lock.json b/package-lock.json index da1c2bf..41127d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,11 +15,13 @@ "@types/node": "16.11.56", "@types/react": "18.0.17", "@types/react-dom": "18.0.6", + "list": "^2.0.19", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "typescript": "4.7.4", - "web-vitals": "2.1.4" + "web-vitals": "2.1.4", + "yarn": "^1.22.19" } }, "node_modules/@adobe/css-tools": { @@ -11192,6 +11194,11 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "node_modules/list": { + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/list/-/list-2.0.19.tgz", + "integrity": "sha512-nnVaRp4RaMAQkCpypTThsdxKqgPMiSwJq93eAm2/IbpUa8sd04XKBhkKu+bMk63HmdjK8b8Cuh4xARHWX2ye/Q==" + }, "node_modules/loader-runner": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", @@ -16546,6 +16553,19 @@ "node": ">=10" } }, + "node_modules/yarn": { + "version": "1.22.19", + "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.19.tgz", + "integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==", + "hasInstallScript": true, + "bin": { + "yarn": "bin/yarn.js", + "yarnpkg": "bin/yarn.js" + }, + "engines": { + "node": ">=4.0.0" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", @@ -24512,6 +24532,11 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "list": { + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/list/-/list-2.0.19.tgz", + "integrity": "sha512-nnVaRp4RaMAQkCpypTThsdxKqgPMiSwJq93eAm2/IbpUa8sd04XKBhkKu+bMk63HmdjK8b8Cuh4xARHWX2ye/Q==" + }, "loader-runner": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", @@ -28286,6 +28311,11 @@ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==" }, + "yarn": { + "version": "1.22.19", + "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.19.tgz", + "integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==" + }, "yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/package.json b/package.json index 0f38547..9a68093 100644 --- a/package.json +++ b/package.json @@ -10,11 +10,13 @@ "@types/node": "16.11.56", "@types/react": "18.0.17", "@types/react-dom": "18.0.6", + "list": "^2.0.19", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "typescript": "4.7.4", - "web-vitals": "2.1.4" + "web-vitals": "2.1.4", + "yarn": "^1.22.19" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.tsx b/src/App.tsx index 9d18e93..cc7d716 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,8 @@ import "./App.css"; +import TodoList from "./containers/TodoList/TodoList"; // can omit.js function App() { - return
; + return
; } export default App; diff --git a/src/components/Todo/Todo.tsx b/src/components/Todo/Todo.tsx index cb0ff5c..0df5d9b 100644 --- a/src/components/Todo/Todo.tsx +++ b/src/components/Todo/Todo.tsx @@ -1 +1,16 @@ -export {}; +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/containers/TodoList/TodoList.tsx b/src/containers/TodoList/TodoList.tsx index cb0ff5c..f90f55b 100644 --- a/src/containers/TodoList/TodoList.tsx +++ b/src/containers/TodoList/TodoList.tsx @@ -1 +1,21 @@ -export {}; +import "./TodoList.css" +import { useState } from "react"; +import Todo from '../../components/Todo/Todo'; + + + +interface IProps { + title: string; + } + + type TodoType = { id: number; title: string; content: string; done: boolean;}; + + export default function TodoList(props: IProps) { + const { title } = props; + const [todos, setTodos] = useState([ + { 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 }, + ]); + return
{title}
; + } From f2376a6fffb3914ae90a5c3f80a9f1ad3793895d Mon Sep 17 00:00:00 2001 From: DoohyunHwang97 Date: Thu, 22 Sep 2022 19:38:26 +0900 Subject: [PATCH 2/2] router --- package-lock.json | 32 +- package.json | 6 +- src/App.tsx | 24 +- src/components/Todo/Todo.tsx | 33 +- src/components/TodoDetail/TodoDetail.tsx | 23 +- src/containers/TodoList/NewTodo/NewTodo.tsx | 48 +- src/containers/TodoList/TodoList.tsx | 64 +- yarn.lock | 9016 +++++++++++++++++++ 8 files changed, 9179 insertions(+), 67 deletions(-) create mode 100644 yarn.lock diff --git a/package-lock.json b/package-lock.json index 41127d0..da1c2bf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,13 +15,11 @@ "@types/node": "16.11.56", "@types/react": "18.0.17", "@types/react-dom": "18.0.6", - "list": "^2.0.19", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "typescript": "4.7.4", - "web-vitals": "2.1.4", - "yarn": "^1.22.19" + "web-vitals": "2.1.4" } }, "node_modules/@adobe/css-tools": { @@ -11194,11 +11192,6 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, - "node_modules/list": { - "version": "2.0.19", - "resolved": "https://registry.npmjs.org/list/-/list-2.0.19.tgz", - "integrity": "sha512-nnVaRp4RaMAQkCpypTThsdxKqgPMiSwJq93eAm2/IbpUa8sd04XKBhkKu+bMk63HmdjK8b8Cuh4xARHWX2ye/Q==" - }, "node_modules/loader-runner": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", @@ -16553,19 +16546,6 @@ "node": ">=10" } }, - "node_modules/yarn": { - "version": "1.22.19", - "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.19.tgz", - "integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==", - "hasInstallScript": true, - "bin": { - "yarn": "bin/yarn.js", - "yarnpkg": "bin/yarn.js" - }, - "engines": { - "node": ">=4.0.0" - } - }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", @@ -24532,11 +24512,6 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, - "list": { - "version": "2.0.19", - "resolved": "https://registry.npmjs.org/list/-/list-2.0.19.tgz", - "integrity": "sha512-nnVaRp4RaMAQkCpypTThsdxKqgPMiSwJq93eAm2/IbpUa8sd04XKBhkKu+bMk63HmdjK8b8Cuh4xARHWX2ye/Q==" - }, "loader-runner": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", @@ -28311,11 +28286,6 @@ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==" }, - "yarn": { - "version": "1.22.19", - "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.19.tgz", - "integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==" - }, "yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/package.json b/package.json index 9a68093..c583f14 100644 --- a/package.json +++ b/package.json @@ -10,13 +10,13 @@ "@types/node": "16.11.56", "@types/react": "18.0.17", "@types/react-dom": "18.0.6", - "list": "^2.0.19", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router": "6.3.0", + "react-router-dom": "6.3.0", "react-scripts": "5.0.1", "typescript": "4.7.4", - "web-vitals": "2.1.4", - "yarn": "^1.22.19" + "web-vitals": "2.1.4" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.tsx b/src/App.tsx index cc7d716..4a1c771 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,30 @@ import "./App.css"; import TodoList from "./containers/TodoList/TodoList"; // can omit.js +import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; +import NewTodo from "./containers/TodoList/NewTodo/NewTodo"; +import TodoDetail from "./components/TodoDetail/TodoDetail"; function App() { - return
; + return ( +
+ + + } /> + } /> + } /> + } /> + Not Found} /> + + +
+ ); } export default App; + +
; +/* actually, it uses className, not class to avoid collision btw JS class + * this syntax is compiled to React.createElement(‘div’, {className: ‘TodoList’}) + * by React Transpiler. + * ); + */ diff --git a/src/components/Todo/Todo.tsx b/src/components/Todo/Todo.tsx index 0df5d9b..c207bad 100644 --- a/src/components/Todo/Todo.tsx +++ b/src/components/Todo/Todo.tsx @@ -1,16 +1,19 @@ +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 + title: string; + clicked?: React.MouseEventHandler; // Defined by React + done: boolean; +} + +const Todo = (props: IProps) => { + return ( +
+
+ {props.title} +
+ {props.done &&
✓
} +
+ ); +}; +export default Todo; diff --git a/src/components/TodoDetail/TodoDetail.tsx b/src/components/TodoDetail/TodoDetail.tsx index cb0ff5c..dd6fc30 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; diff --git a/src/containers/TodoList/NewTodo/NewTodo.tsx b/src/containers/TodoList/NewTodo/NewTodo.tsx index cb0ff5c..c23a5fb 100644 --- a/src/containers/TodoList/NewTodo/NewTodo.tsx +++ b/src/containers/TodoList/NewTodo/NewTodo.tsx @@ -1 +1,47 @@ -export {}; +import { useState } from "react"; +import { Navigate } from "react-router-dom"; +// import { useNavigate } 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 navigate = useNavigate() + // const postTodoHandler = () => { + // const data = { title: title, content: content }; + // alert("Submitted\n" + data.title + "\n" + data.content); + // setSubmitted(true); + // navigate('/todos') + // }; + + const postTodoHandler = () => { + const data = { title: title, content: content }; + alert("Submitted\n" + data.title + "\n" + data.content); + setSubmitted(true); + }; + + if (submitted) { + return ; + } else { + return ( +
+

Add a Todo

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