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..3fdafe4 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 { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom'; +import TodoList from './containers/TodoList/TodoList'; +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..7bf8016 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..86ff6c9 100644 --- a/src/components/TodoDetail/TodoDetail.js +++ b/src/components/TodoDetail/TodoDetail.js @@ -0,0 +1,25 @@ +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..8d4a277 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 { 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} ); + } + + render() { + if (this.state.submitted) { + return + } + return ( +
+

Add a Todo

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