From eaea0de8b4a23f7062344b49a03a1f3cc05af629 Mon Sep 17 00:00:00 2001 From: ccdc-git Date: Sat, 3 Sep 2022 14:45:39 +0900 Subject: [PATCH 01/12] :lipstick: Add TodoList and Todo UI --- src/App.tsx | 8 ++++++-- src/components/Todo/Todo.tsx | 20 ++++++++++++++++++- src/containers/TodoList/TodoList.tsx | 30 +++++++++++++++++++++++++++- 3 files changed, 54 insertions(+), 4 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 9d18e93..5683bba 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,11 @@ -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..88aba8e 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; diff --git a/src/containers/TodoList/TodoList.tsx b/src/containers/TodoList/TodoList.tsx index cb0ff5c..39b5705 100644 --- a/src/containers/TodoList/TodoList.tsx +++ b/src/containers/TodoList/TodoList.tsx @@ -1 +1,29 @@ -export {}; +import { useState } from "react"; +import Todo from "../../components/Todo/Todo"; +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 [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}
+
+ {todos.map((td) => { + return ; + })} +
+
+ ); +} From 7d6277acffce420084a898049efc5cfe1bee5d6d Mon Sep 17 00:00:00 2001 From: ccdc-git Date: Thu, 1 Sep 2022 13:17:54 +0900 Subject: [PATCH 02/12] Todo Details --- src/App.tsx | 8 +++++++ src/components/TodoDetail/TodoDetail.tsx | 23 +++++++++++++++++- src/containers/TodoList/TodoList.tsx | 30 +++++++++++++++++++++--- 3 files changed, 57 insertions(+), 4 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 5683bba..71ae2fa 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,3 +1,4 @@ +import "./App.css"; import TodoList from "./containers/TodoList/TodoList"; // can omit.js function App() { @@ -9,3 +10,10 @@ function App() { } 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/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/TodoList.tsx b/src/containers/TodoList/TodoList.tsx index 39b5705..6108a37 100644 --- a/src/containers/TodoList/TodoList.tsx +++ b/src/containers/TodoList/TodoList.tsx @@ -1,6 +1,7 @@ -import { useState } from "react"; +import { useState, useMemo } from "react"; import Todo from "../../components/Todo/Todo"; -import "./TodoList.css" +import TodoDetail from "../../components/TodoDetail/TodoDetail"; +import "./TodoList.css"; interface IProps { title: string; @@ -10,19 +11,42 @@ type TodoType = { id: number; title: string; content: string; done: boolean }; export default function TodoList(props: IProps) { const { title } = props; + const [selectedTodo, setSelectedTodo] = useState(null); + 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 }, ]); + const clickTodoHandler = (td: TodoType) => { + if (selectedTodo === td) { + setSelectedTodo(null); + } else { + setSelectedTodo(td); + } + }; + + const todoDetail = useMemo(() => { + return selectedTodo ? ( + + ) : null; + }, [selectedTodo]); + return (
{title}
{todos.map((td) => { - return ; + return ( + clickTodoHandler(td)} + /> + ); })} + {todoDetail}
); From 15876747f81dc5a4a4f4d9163b1290373c3aa773 Mon Sep 17 00:00:00 2001 From: ccdc-git Date: Thu, 1 Sep 2022 13:17:54 +0900 Subject: [PATCH 03/12] Todo Details --- src/components/Todo/Todo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Todo/Todo.tsx b/src/components/Todo/Todo.tsx index 88aba8e..c207bad 100644 --- a/src/components/Todo/Todo.tsx +++ b/src/components/Todo/Todo.tsx @@ -1,4 +1,4 @@ -import "./Todo.css" +import "./Todo.css"; interface IProps { title: string; From 487f7f0e5d6c9233163c097975fe5329253ca6b8 Mon Sep 17 00:00:00 2001 From: ccdc-git Date: Thu, 1 Sep 2022 13:18:26 +0900 Subject: [PATCH 04/12] New Todo --- src/containers/TodoList/NewTodo/NewTodo.tsx | 28 +- src/containers/TodoList/TodoList.tsx | 2 + yarn.lock | 8994 +++++++++++++++++++ 3 files changed, 9023 insertions(+), 1 deletion(-) create mode 100644 yarn.lock diff --git a/src/containers/TodoList/NewTodo/NewTodo.tsx b/src/containers/TodoList/NewTodo/NewTodo.tsx index cb0ff5c..d34367a 100644 --- a/src/containers/TodoList/NewTodo/NewTodo.tsx +++ b/src/containers/TodoList/NewTodo/NewTodo.tsx @@ -1 +1,27 @@ -export {}; +import { useState } from "react"; +import "./NewTodo.css"; + +export default function NewTodo() { + const [title, setTitle] = useState(""); + const [content, setContent] = useState(""); + const [submitted, setSubmitted] = useState(false); + + return ( +
+

Add a Todo

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