From 69a6b7f8dc0b08af203d966b9720ab1a700f4f88 Mon Sep 17 00:00:00 2001
From: dooly9931 <dooly9931@naver.com>
Date: Fri, 17 Sep 2021 19:02:14 +0900
Subject: [PATCH] practice session work

---
 src/App.js                                 | 18 ++++++++-
 src/components/Todo/Todo.js                | 16 ++++++++
 src/components/TodoDetail/TodoDetail.js    | 27 +++++++++++++
 src/containers/TodoList/NewTodo/NewTodo.js | 42 +++++++++++++++++++
 src/containers/TodoList/TodoList.js        | 47 ++++++++++++++++++++++
 5 files changed, 148 insertions(+), 2 deletions(-)

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 (
-    <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>
+
   );
 }
 
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 (
+        <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;
\ 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 (
+        <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;
\ 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 <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;
\ 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 = <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;
\ No newline at end of file