From f54f07c9861dfc8d0d1c55ef3d8c6aa24210d63c Mon Sep 17 00:00:00 2001 From: Zagoshipda Date: Fri, 17 Sep 2021 20:55:39 +0900 Subject: [PATCH 1/3] Update : practice session 3 --- src/App.js | 21 +- src/components/Todo/Todo.js | 14 + src/components/TodoDetail/TodoDetail.js | 26 + src/containers/TodoList/NewTodo/NewTodo.js | 39 + src/containers/TodoList/TodoList.js | 51 + yarn.lock | 2242 +++++++------------- 6 files changed, 881 insertions(+), 1512 deletions(-) diff --git a/src/App.js b/src/App.js index e358583..27d3233 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,23 @@ 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 ( -
-
+ +
+ + } /> + + + +

Not Found

}/> + +
+ + ); } - -export default App; diff --git a/src/components/Todo/Todo.js b/src/components/Todo/Todo.js index e69de29..7438d6d 100644 --- a/src/components/Todo/Todo.js +++ b/src/components/Todo/Todo.js @@ -0,0 +1,14 @@ +import React from "react"; +import "./Todo.css"; + +const Todo = (props) => { + return ( +
+
+ {props.title} +
+ {props.done &&
✓
} +
+ ) +} +export default Todo; diff --git a/src/components/TodoDetail/TodoDetail.js b/src/components/TodoDetail/TodoDetail.js index e69de29..3bc23c2 100644 --- a/src/components/TodoDetail/TodoDetail.js +++ b/src/components/TodoDetail/TodoDetail.js @@ -0,0 +1,26 @@ +import React from "react"; +import './TodoDetail.css'; + +const TodoDetail = (props) => { + return ( +
+
+
+ Name: +
+
+ {props.title} +
+
+
+
+ Content: +
+
+ {props.content} +
+
+
+ ); +}; +export default TodoDetail; diff --git a/src/containers/TodoList/NewTodo/NewTodo.js b/src/containers/TodoList/NewTodo/NewTodo.js index e69de29..307ab2d 100644 --- a/src/containers/TodoList/NewTodo/NewTodo.js +++ b/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 + } + return ( +
+

Add a Todo

+ + this.setState({title: event.target.value})}/> + +