From a8af9d655014072e4c0e3e9910cffc2e222d7462 Mon Sep 17 00:00:00 2001 From: uzrjny Date: Fri, 17 Sep 2021 17:47:01 +0900 Subject: [PATCH 1/3] Completed Lab3 Assignment --- .vscode/launch.json | 29 + package.json | 2 + src/App.js | 18 +- src/components/Todo/Todo.js | 14 + src/components/TodoDetail/TodoDetail.js | 27 + src/containers/TodoList/NewTodo/NewTodo.js | 40 + src/containers/TodoList/TodoList.js | 48 + yarn.lock | 2336 +++++++------------- 8 files changed, 1001 insertions(+), 1513 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..10918bb --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,29 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "name": "Launch Edge", + "request": "launch", + "type": "pwa-msedge", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + }, + { + "name": "Attach to Edge", + "port": 9222, + "request": "attach", + "type": "pwa-msedge", + "webRoot": "${workspaceFolder}" + }, + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ 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..33c6ccd 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 { 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..89c9149 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..a063e5d 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..fe5932f 100644 --- a/src/containers/TodoList/NewTodo/NewTodo.js +++ b/src/containers/TodoList/NewTodo/NewTodo.js @@ -0,0 +1,40 @@ +import React, { Component } from 'react'; +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}); + // this.props.history.push("/todos") + + } + render(){ + if (this.state.submitted){ + return + } + return ( +
+

Add a Todo

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