diff --git a/src/App.js b/src/App.js
index e358583..43baef8 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..e437dc4 100644
--- a/src/components/Todo/Todo.js
+++ b/src/components/Todo/Todo.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import './Todo.css';
+
+/* function style component */
+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..c5ed72d 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..a03fcc2 100644
--- a/src/containers/TodoList/NewTodo/NewTodo.js
+++ b/src/containers/TodoList/NewTodo/NewTodo.js
@@ -0,0 +1,42 @@
+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 });
+ this.props.history.push("/todos"); // alternative way to go to /todos
+ }
+
+ render() {
+ /*
+ if (this.state.submitted) {
+ return
+ }
+ */
+ return(
+
+
Add a Todo
+
+ this.setState({ title: event.target.value })} />
+
+
+ )
+ }
+}
+
+export default NewTodo;
\ No newline at end of file
diff --git a/src/containers/TodoList/TodoList.js b/src/containers/TodoList/TodoList.js
index e69de29..9436a89 100644
--- a/src/containers/TodoList/TodoList.js
+++ b/src/containers/TodoList/TodoList.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import Todo from '../../components/Todo/Todo';
+import './TodoList.css';
+import TodoDetail from '../../components/TodoDetail/TodoDetail';
+import NewTodo from './NewTodo/NewTodo';
+import { NavLink } from 'react-router-dom';
+
+class TodoList extends Component {
+
+ state = {
+ todos: [
+ { id: 1, title: 'SWPP', content: 'take swpp class', done: true},
+ { id: 2, title: 'Movie', content: 'watch movie', done: false},
+ { id: 3, title: 'Dinner', content: 'eat dinner', done: false}
+ ],
+ selectedTodo: null,
+ }
+
+ clickTodoHandler = td => {
+ if (this.state.selectedTodo === td) {
+ this.setState( {selectedTodo: null});
+ } else {
+ this.setState( {selectedTodo: td});
+ }
+ }
+ render() {
+ let todoDetail = null;
+ if (this.state.selectedTodo) {
+ todoDetail =
+ }
+ const todos = this.state.todos.map((td) => {
+ return ( this.clickTodoHandler(td)} />)
+ })
+ return (
+
+
{this.props.title}
+
{todos}
+ {todoDetail}
+
NewTodo
+
+ )
+ }
+}
+
+export default TodoList;
\ No newline at end of file