From 3c0ee310712b634a657469cdfb9f04a21abc4504 Mon Sep 17 00:00:00 2001 From: yeppin Date: Fri, 17 Sep 2021 20:05:04 +0900 Subject: [PATCH] update Todo related files --- .vscode/settings.json | 3 + package.json | 2 + src/App.js | 14 ++- src/components/Todo/Todo.js | 15 ++++ src/components/TodoDetail/TodoDetail.js | 27 ++++++ src/containers/TodoList/NewTodo/NewTodo.js | 37 ++++++++ src/containers/TodoList/TodoList.js | 42 +++++++++ yarn.lock | 99 +++++++++++++++++++++- 8 files changed, 235 insertions(+), 4 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f673a71 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/package.json b/package.json index bcaefee..7c14644 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,8 @@ "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2", + "react-router": "^5.2.1", + "react-router-dom": "^5.3.0", "react-scripts": "4.0.3" }, "scripts": { diff --git a/src/App.js b/src/App.js index e358583..e529141 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,23 @@ import React from 'react'; -import logo from './logo.svg'; import './App.css'; +import TodoList from './containers/TodoList/TodoList'; +import TodoDetail from './components/TodoDetail/TodoDetail'; +import NewTodo from './containers/TodoList/NewTodo/NewTodo'; +import {BrowserRouter, Route, Redirect ,Switch} from 'react-router-dom'; function App() { return ( +
+ + } /> + + + +

Not Found

} /> +
+ ); } diff --git a/src/components/Todo/Todo.js b/src/components/Todo/Todo.js index e69de29..e749d25 100644 --- a/src/components/Todo/Todo.js +++ b/src/components/Todo/Todo.js @@ -0,0 +1,15 @@ +import React from 'react'; +import './Todo.css'; + +const Todo = props => { + return ( +
+
+ {props.title} +
+ {props.done &&
✓
} +
+ ) +} + +export default Todo; \ No newline at end of file diff --git a/src/components/TodoDetail/TodoDetail.js b/src/components/TodoDetail/TodoDetail.js index e69de29..a6df360 100644 --- a/src/components/TodoDetail/TodoDetail.js +++ b/src/components/TodoDetail/TodoDetail.js @@ -0,0 +1,27 @@ +import React from 'react'; +import './TodoDetail.css'; + +const TodoDetail = (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.js b/src/containers/TodoList/NewTodo/NewTodo.js index e69de29..e11c0dd 100644 --- a/src/containers/TodoList/NewTodo/NewTodo.js +++ b/src/containers/TodoList/NewTodo/NewTodo.js @@ -0,0 +1,37 @@ +import React, {Component} from 'react'; +import TodoList from '../TodoList'; +import './NewTodo.css'; +import {Redirect} from 'react-router-dom'; + +class NewTodo extends Component{ + state={ + title: '', + content:'', + submitted:false, + } + + postTodoHandler = () => { + const data = { + title: this.state.title, content: this.state.content + } + alert("Submitted\n"+ data.title + '\n' + data.content); + this.setState({submitted:true}); + } + render(){ + if(this.state.submitted){ + return + } + return( +
+

Add a Todo

+ + this.setState({title: event.target.value})} /> + +