exercise #3

src/App.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import TodoList from './containers/TodoList/TodoList';
 
 function App() {
   return (
     <div className="App">
+      <TodoList title="My TODOs"></TodoList>
     </div>
   );
 }

src/components/Todo/Todo.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import './Todo.css';
+
+const Todo = props => {
+  return (
+    <div className='Todo'>
+      <div className={`text ${props.done && 'done'}`} onClick={props.clicked}>
+        {props.title}
+      </div>
+      {props.done && <div className="done-mark">&#x2713;</div>}
+    </div>
+  )
+}
+
+export default Todo;

src/components/TodoDetail/TodoDetail.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import './TodoDetail.css';
+
+const TodoDetail = (props) => {
+  return (
+    <div className="TodoDetail">
+      <div className="row">
+        <div className="left">
+          Name:
+        </div>
+        <div className="right">
+          {props.title}
+        </div>
+      </div>
+
+      <div className="row">
+        <div className="left">
+          Content:
+        </div>
+        <div className="right">
+          {props.content}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TodoDetail;

src/containers/TodoList/NewTodo/NewTodo.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import './NewTodo.css';
+
+class NewTodo extends Component {
+  state = {
+    title: '',
+    content: '',
+    submitted: false,
+  }
+  render() {
+    return (
+      <div className="NewTodo">
+        <h1>Add a Todo</h1>
+        <label>Title</label>
+        <input type="text" value={this.state.title}
+          onChange={(event) => this.setState({ title: event.target.value })} />
+        <label>Content</label>
+        <textarea rows="4" type="text" value={this.state.content}
+          onChange={(event) => this.setState({ content: event.target.value })} />
+        <button onClick={() => alert('submitted')}>Submit</button>
+      </div>
+    );
+  }
+}
+
+export default NewTodo;

src/containers/TodoList/TodoList.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import Todo from '../../components/Todo/Todo';
+import TodoDetail from '../../components/TodoDetail/TodoDetail';
+import './TodoList.css';
+import './NewTodo/NewTodo.js';
+
+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: 'Dineer', 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 = <todoDetail title={this.state.selectedTodo.title} content={this.state.selectedTodo.content}></todoDetail>
+    }
+
+    const todos = this.state.todos.map((td) => {
+      return (<Todo key={td.id} title={td.title} done={td.done} clicked={() => this.clickTodoHandler(td)}></Todo>)
+    })
+
+
+    return (
+      <div className='TodoList'>
+        <div className='title'>{this.props.title}</div>
+        <div className='todos'>{todos}</div>
+        {todoDetail}
+        <NewTodo />
+      </div>
+    )
+  }
+}
+
+export default TodoList;