feat: Update .js files

src/App.js

@@ -1,12 +1,26 @@
 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 (
-    <div className="App">
-    </div>
+    <BrowserRouter>
+      <div className="App">
+        <Switch>
+          <Route path='/todos' exact render={() => <TodoList title="My TODOs!" />} />
+          <Route path='/todos/:id' exact component={TodoDetail} />
+          <Route path='/new-todo' exact component={NewTodo} />
+          <Redirect exact from='/' to='/todos' />
+          <Route render={() => <h1>Not Found</h1>} />
+        </Switch>
+      </div>
+    </BrowserRouter>
   );
 }
 
-export default App;
+export default App;

src/components/Todo/Todo.js

@@ -0,0 +1,18 @@
+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,34 @@
+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" >
+        <div className="row">
+          <div className="left">
+            Name:
+        </div>
+          <div className="right">
+            {this.props.title}
+          </div>
+        </div>
+
+        <div className="row">
+          <div className="left">
+            Content:
+        </div>
+          <div className="right">
+            {this.props.content}
+          </div>
+        </div>
+      </div >
+    );
+  }
+};
+
+export default TodoDetail;

src/containers/TodoList/NewTodo/NewTodo.js

@@ -0,0 +1,41 @@
+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 = <Redirect to='/todos' />
+    }
+    return (
+      <div className="NewTodo">
+        {redirect}
+        <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={() => this.postTodoHandler()}>Submit</button>
+      </div>
+    );
+  }
+}
+
+export default NewTodo;

src/containers/TodoList/TodoList.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+
+import Todo from '../../components/Todo/Todo';
+import TodoDetail from '../../components/TodoDetail/TodoDetail';
+import './TodoList.css';
+
+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({ ...this.state, selectedTodo: null });
+    } else {
+      this.setState({ ...this.state, selectedTodo: td });
+    }
+  }
+
+  render() {
+    const todos = this.state.todos.map((td) => {
+      return (
+        <Todo
+          key={td.id}
+          title={td.title}
+          done={td.done}
+          clicked={() => this.clickTodoHandler(td)}
+        />);
+    });
+
+    let todo = null;
+    if (this.state.selectedTodo) {
+      todo = <TodoDetail
+        title={this.state.selectedTodo.title}
+        content={this.state.selectedTodo.content}
+      />
+    }
+    return (
+      <div className="TodoList">
+        <div className="title">{this.props.title}</div>
+        <div className="todos">{todos}</div>
+        {todo}
+        <NavLink to='/new-todo' exact>New Todo</NavLink>
+      </div>
+    )
+  }
+}
+
+export default TodoList;