Complete practice Algy#3

Author: SPICYJO

package.json

@@ -5,6 +5,8 @@
   "dependencies": {
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.1.1"
   },
   "scripts": {

src/App.js

@@ -1,11 +1,21 @@
 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/NewTodo/NewTodo';
 
 function App() {
   return (
-    <div className="App">
-    </div>
+    <BrowserRouter>
+		<div className='App'>
+			<Switch>
+				<Route path='/todos' exact render={() => <TodoList title="My TODOs!" />} />
+				<Route path='/new-todo' exact component={NewTodo} />
+				<Redirect exact from='/' to='/todos' />
+			</Switch>
+		</div>
+	</BrowserRouter>
   );
 }
 

src/components/Todo/Todo.css

@@ -0,0 +1,31 @@
+.Todo {
+  border-top: 1px solid #f1f3f5;
+  padding: 1rem;
+  display: flex;
+  align-items: center; 
+  transition: all 0.15s;
+}
+
+.Todo .text {
+  flex: 1;
+  text-align: left;
+  word-break: break-all;
+  cursor: pointer;
+}
+
+.Todo .text:hover {
+  color: orange;
+}
+
+.Todo .done {
+  text-decoration: line-through;
+  color: #adb5bd;
+}
+
+.Todo .done-mark {
+  font-size: 1.5rem;
+  line-height: 1rem;
+  margin-left: 1rem;
+  color: orange;
+  font-weight: 800;
+}

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.css

@@ -0,0 +1,15 @@
+.TodoDetail .row {
+  display: flex;
+  padding: 20px;
+  height: 30px;
+  text-align: left;
+}
+
+.TodoDetail .left {
+  font-weight: bold;
+  flex: 25%
+}
+
+.TodoDetail .right {
+  flex: 75%;
+}

src/components/TodoDetail/TodoDetail.js

@@ -0,0 +1,19 @@
+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/NewTodo/NewTodo.css

@@ -0,0 +1,41 @@
+.NewTodo {
+  width: 80%;
+  margin: 20px auto;
+  border: 1px solid #eee;
+  box-shadow: 0 2px 3px #ccc;
+  text-align: center;
+}
+
+.NewTodo label {
+  display: block;
+  margin: 10px auto;
+  text-align: center;
+  font-weight: bold;
+}
+
+.NewTodo input,
+.NewTodo textarea {
+  display: block;
+  width: 80%;
+  box-sizing: border-box;
+  border: 1px solid black;
+  outline: none;
+  font: inherit;
+  margin: auto;
+}
+
+.NewTodo button {
+  margin: 5px 0;
+  padding: 10px;
+  font: inherit;
+  border: 1px solid #fa923f;
+  background-color: transparent;
+  color: #fa923f;
+  cursor: pointer;
+}
+
+.NewTodo button:hover,
+.NewTodo button:active {
+  color: white;
+  background-color: #fa923f;
+}

src/containers/NewTodo/NewTodo.js

@@ -0,0 +1,41 @@
+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.props.history.push('/todos');
+		this.setState( {submitted: true} );
+	}
+
+
+	// Two way binding?
+	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.css

@@ -0,0 +1,16 @@
+.TodoList {
+  background: white;
+  width: 512px;
+  box-shadow: 0 3px 9px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); /* 그림자 */ 
+  margin: auto; 
+  margin-top: 4rem;
+}
+
+.TodoList .title {
+  padding: 2rem;
+  font-size: 2.5rem;
+  text-align: center;
+  font-weight: 500;
+  background: orange;
+  color: black;
+}

src/containers/TodoList/TodoList.js

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