practice session 3

package.json

@@ -5,7 +5,9 @@
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3"
+    "react-router": "^5.2.1",
+    "react-router-dom": "^5.3.0",
+    "react-scripts": "^4.0.3"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,12 +1,24 @@
 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 (
-    <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;

src/components/Todo/Todo.js

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

src/containers/TodoList/TodoList.js

@@ -0,0 +1,51 @@
+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({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}/>
+        }
+
+        const todos = this.state.todos.map((td)=> {
+            return ( <Todo key={td.id} title={td.title} done={td.done}
+                clicked={() => this.clickTodoHandler(td)} />);
+        });
+
+        return (
+            <div className='TodoList'>
+                <div className='title'>{this.props.title}</div>
+                <div className='todos'>{todos}</div>
+                {todoDetail}
+                <NavLink to='/new-todo' exact>New Todo</NavLink>
+            </div>
+
+        )
+    }
+}
+export default TodoList;