practice session work

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 (
- <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>
+
  );
 }
 

src/components/Todo/Todo.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import './Todo.css';
+
+/* function style component */
+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,27 @@
+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,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 <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 row="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,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 = <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>NewTodo</NavLink>
+ </div>
+ )
+ }
+}
+
+export default TodoList;