From 757df527931e962df863428e64d74825385b548f Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 17 Sep 2021 17:31:51 +0900 Subject: [PATCH] practice finished --- package-lock.json | 13 +++ package.json | 5 +- src/App.js | 18 +++- src/components/Todo/Todo.js | 14 +++ src/components/TodoDetail/TodoDetail.js | 26 ++++++ src/containers/TodoList/NewTodo/NewTodo.js | 39 ++++++++ src/containers/TodoList/TodoList.js | 47 ++++++++++ yarn.lock | 104 ++++++++++++++++++++- 8 files changed, 260 insertions(+), 6 deletions(-) create mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..c1a5d13 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "swppfront", + "version": "0.1.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "yarn": { + "version": "1.22.11", + "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.11.tgz", + "integrity": "sha512-AWje4bzqO9RUn3sdnM5N8n4ZJ0BqCc/kqFJvpOI5/EVkINXui0yuvU7NDCEF//+WaxHuNay2uOHxA4+tq1P3cg==" + } + } +} diff --git a/package.json b/package.json index bcaefee..4a17fe4 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,10 @@ "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2", - "react-scripts": "4.0.3" + "react-router": "^5.2.1", + "react-router-dom": "^5.3.0", + "react-scripts": "4.0.3", + "yarn": "^1.22.11" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.js b/src/App.js index e358583..a9000eb 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,25 @@ import React from 'react'; import logo from './logo.svg'; import './App.css'; +import TodoList from './containers/TodoList/TodoList'; +import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom'; +import NewTodo from './containers/TodoList/NewTodo/NewTodo'; +import TodoDetail from './components/TodoDetail/TodoDetail'; + function App() { return ( -
-
+ +
+ + } /> + + + +

Not Found

} /> + +
+ ); } diff --git a/src/components/Todo/Todo.js b/src/components/Todo/Todo.js index e69de29..5a383f6 100644 --- a/src/components/Todo/Todo.js +++ b/src/components/Todo/Todo.js @@ -0,0 +1,14 @@ +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..bc85770 100644 --- a/src/components/TodoDetail/TodoDetail.js +++ b/src/components/TodoDetail/TodoDetail.js @@ -0,0 +1,26 @@ +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..d93ba79 100644 --- a/src/containers/TodoList/NewTodo/NewTodo.js +++ b/src/containers/TodoList/NewTodo/NewTodo.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react'; +import { Redirect } from 'react-router'; +import './NewTodo.css'; + +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}); + this.props.history.push("/todos") + } + + render() { + // if(this.state.submitted) { + // return + // } + return ( +
+

Add a Todo

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