From aa9de464aae000227ac91dac612bc71b9828f9b8 Mon Sep 17 00:00:00 2001 From: yksnen11 Date: Fri, 18 Sep 2020 14:21:16 +0900 Subject: [PATCH] finished --- package.json | 2 + src/.App.js.swp | Bin 0 -> 12288 bytes src/App.js | 19 ++- src/components/Todo/Todo.css | 31 +++++ src/components/Todo/Todo.js | 14 +++ src/components/TodoDetail/TodoDetail.css | 15 +++ src/components/TodoDetail/TodoDetail.js | 33 +++++ src/containers/TodoList/NewTodo/NewTodo.css | 41 ++++++ src/containers/TodoList/NewTodo/NewTodo.js | 39 ++++++ src/containers/TodoList/TodoList.css | 16 +++ src/containers/TodoList/TodoList.js | 54 ++++++++ yarn.lock | 133 +++++++++++++++++--- 12 files changed, 380 insertions(+), 17 deletions(-) create mode 100644 src/.App.js.swp create mode 100644 src/components/Todo/Todo.css create mode 100644 src/components/Todo/Todo.js create mode 100644 src/components/TodoDetail/TodoDetail.css create mode 100644 src/components/TodoDetail/TodoDetail.js create mode 100644 src/containers/TodoList/NewTodo/NewTodo.css create mode 100644 src/containers/TodoList/NewTodo/NewTodo.js create mode 100644 src/containers/TodoList/TodoList.css create mode 100644 src/containers/TodoList/TodoList.js diff --git a/package.json b/package.json index 6c050f8..47ab41c 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,8 @@ "dependencies": { "react": "^16.9.0", "react-dom": "^16.9.0", + "react-router": "^5.2.0", + "react-router-dom": "^5.2.0", "react-scripts": "3.1.1" }, "scripts": { diff --git a/src/.App.js.swp b/src/.App.js.swp new file mode 100644 index 0000000000000000000000000000000000000000..ce972177b095f5acee29cd65bcdfddba0d8b5201 GIT binary patch literal 12288 zcmeI&%SyvQ6b9f^x8eoe>#;7a8j+vN?CHcRxj;GI41o>J?QNC%0l)#^$* zG^+h|-a|Ig*4I%~ik0J*lt2Ii5P$##AOHafKmY>cDqx}E-J%2y z0uX=z1Rwwb2tWV=5P$##ATUk>YN+*9KMG^Rp6WPB*RbqRuMpi6bFm^H%vI07Vz=vP zedP31EiV)D^=d2h!b4vhHoobq+O5^N;Z}3MsjYjq>s4Ed>QWvnlf(fRsFMV)@xvfp zzfj~`BER>2-QR^eaoA(4Y`bA#96wO8wzIL{1FOPWoy<%()4N(*mF&CYbi+OWEcCtk HUWUE^I}LWJ literal 0 HcmV?d00001 diff --git a/src/App.js b/src/App.js index e358583..25c846a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,24 @@ 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.css b/src/components/Todo/Todo.css new file mode 100644 index 0000000..f2105b8 --- /dev/null +++ b/src/components/Todo/Todo.css @@ -0,0 +1,31 @@ +.Todo { + border-top: 1px solid #f1f3f5; + padding: 1rem; + display: flex; + align-items: center; + transition: all 0.15s; +} + +.Todo .text { + flex: 1; + text-align: left; + word-break: break-all; + cursor: pointer; +} + +.Todo .text:hover { + color: orange; +} + +.Todo .done { + text-decoration: line-through; + color: #adb5bd; +} + +.Todo .done-mark { + font-size: 1.5rem; + line-height: 1rem; + margin-left: 1rem; + color: orange; + font-weight: 800; +} \ No newline at end of file diff --git a/src/components/Todo/Todo.js b/src/components/Todo/Todo.js new file mode 100644 index 0000000..67ef9a6 --- /dev/null +++ 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; diff --git a/src/components/TodoDetail/TodoDetail.css b/src/components/TodoDetail/TodoDetail.css new file mode 100644 index 0000000..deab75d --- /dev/null +++ b/src/components/TodoDetail/TodoDetail.css @@ -0,0 +1,15 @@ +.TodoDetail .row { + display: flex; + padding: 20px; + height: 30px; + text-align: left; +} + +.TodoDetail .left { + font-weight: bold; + flex: 25% +} + +.TodoDetail .right { + flex: 75%; +} \ No newline at end of file diff --git a/src/components/TodoDetail/TodoDetail.js b/src/components/TodoDetail/TodoDetail.js new file mode 100644 index 0000000..82f83b2 --- /dev/null +++ b/src/components/TodoDetail/TodoDetail.js @@ -0,0 +1,33 @@ +import React from 'react'; +import './TodoDetail.css'; + +class TodoDetail extends React.Component { + render() { + if (this.props.match) { + console.log(this.props.match.params.id); + } + return ( + < div className="TodoDetail" > +
+
+ Name: +
+
+ {this.props.title} +
+
+ +
+
+ Content: +
+
+ {this.props.content} +
+
+ + ); + } +}; + +export default TodoDetail; diff --git a/src/containers/TodoList/NewTodo/NewTodo.css b/src/containers/TodoList/NewTodo/NewTodo.css new file mode 100644 index 0000000..7e46e79 --- /dev/null +++ b/src/containers/TodoList/NewTodo/NewTodo.css @@ -0,0 +1,41 @@ +.NewTodo { + width: 80%; + margin: 20px auto; + border: 1px solid #eee; + box-shadow: 0 2px 3px #ccc; + text-align: center; +} + +.NewTodo label { + display: block; + margin: 10px auto; + text-align: center; + font-weight: bold; +} + +.NewTodo input, +.NewTodo textarea { + display: block; + width: 80%; + box-sizing: border-box; + border: 1px solid black; + outline: none; + font: inherit; + margin: auto; +} + +.NewTodo button { + margin: 5px 0; + padding: 10px; + font: inherit; + border: 1px solid #fa923f; + background-color: transparent; + color: #fa923f; + cursor: pointer; +} + +.NewTodo button:hover, +.NewTodo button:active { + color: white; + background-color: #fa923f; +} diff --git a/src/containers/TodoList/NewTodo/NewTodo.js b/src/containers/TodoList/NewTodo/NewTodo.js new file mode 100644 index 0000000..4592e9a --- /dev/null +++ b/src/containers/TodoList/NewTodo/NewTodo.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react'; +import { Redirect } from 'react-router-dom'; +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 }); + } + + render() { + let redirect = null; + if (this.state.submitted) { + redirect = + } + return ( +
+ {redirect} +

Add a Todo

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