From dc954121f3af32607bf72af6c6fba05af6f26c21 Mon Sep 17 00:00:00 2001 From: brein Date: Tue, 9 Jul 2019 02:01:22 +0200 Subject: [PATCH 1/3] fix id error on adding multiple todos --- src/App.js | 116 +++++++++++++++++++++++++++++++---------------------- 1 file changed, 68 insertions(+), 48 deletions(-) diff --git a/src/App.js b/src/App.js index 196643c..f673240 100644 --- a/src/App.js +++ b/src/App.js @@ -4,64 +4,84 @@ import Header from './components/layout/Header'; import Todos from './components/Todos'; import AddTodo from './components/AddTodo'; import About from './components/pages/About'; -// import uuid from 'uuid'; +import uuid from 'uuid'; import axios from 'axios'; import './App.css'; class App extends Component { - state = { - todos: [] - } + state = { + todos: [] + }; - componentDidMount() { - axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10') - .then(res => this.setState({ todos: res.data })) - } + componentDidMount() { + axios + .get('https://jsonplaceholder.typicode.com/todos?_limit=10') + .then((res) => this.setState({ todos: res.data })); + } - // Toggle Complete - markComplete = (id) => { - this.setState({ todos: this.state.todos.map(todo => { - if(todo.id === id) { - todo.completed = !todo.completed - } - return todo; - }) }); - } + // Toggle Complete + markComplete = (id) => { + this.setState({ + todos: this.state.todos.map((todo) => { + if (todo.id === id) { + todo.completed = !todo.completed; + } + return todo; + }) + }); + }; - // Delete Todo - delTodo = (id) => { - axios.delete(`https://jsonplaceholder.typicode.com/todos/${id}`) - .then(res => this.setState({ todos: [...this.state.todos.filter(todo => todo.id !== id)] })); - } + // Delete Todo + delTodo = (id) => { + axios + .delete(`https://jsonplaceholder.typicode.com/todos/${id}`) + .then((res) => + this.setState({ + todos: [...this.state.todos.filter((todo) => todo.id !== id)] + }) + ); + }; - // Add Todo - addTodo = (title) => { - axios.post('https://jsonplaceholder.typicode.com/todos', { - title, - completed: false - }) - .then(res => this.setState({ todos: [...this.state.todos, res.data] })); - } + // Add Todo + addTodo = (title) => { + axios + .post('https://jsonplaceholder.typicode.com/todos', { + title, + completed: false + }) + .then((res) => { + res.data.id = uuid.v4(); + this.setState({ todos: [...this.state.todos, res.data] }); + }); + }; - render() { - return ( - -
-
-
- ( - - - - - )} /> - -
-
- - ); - } + render() { + return ( + +
+
+
+ ( + + + + + )} + /> + +
+
+ + ); + } } export default App; From 5ec9f8cdf3a661ecf1dc9ef56ebc3ba6d345680e Mon Sep 17 00:00:00 2001 From: brein Date: Tue, 9 Jul 2019 02:14:04 +0200 Subject: [PATCH 2/3] Sets the check on pulled in completed items --- src/components/TodoItem.js | 72 +++++++++++++++++++++----------------- 1 file changed, 39 insertions(+), 33 deletions(-) diff --git a/src/components/TodoItem.js b/src/components/TodoItem.js index ad81629..f3009f8 100644 --- a/src/components/TodoItem.js +++ b/src/components/TodoItem.js @@ -2,44 +2,50 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; export class TodoItem extends Component { - getStyle = () => { - return { - background: '#f4f4f4', - padding: '10px', - borderBottom: '1px #ccc dotted', - textDecoration: this.props.todo.completed ? 'line-through' : 'none' - } - } + getStyle = () => { + return { + background: '#f4f4f4', + padding: '10px', + borderBottom: '1px #ccc dotted', + textDecoration: this.props.todo.completed ? 'line-through' : 'none' + }; + }; - render() { - const { id, title } = this.props.todo; - return ( -
-

- {' '} - { title } - -

-
- ) - } + render() { + const { id, title, completed } = this.props.todo; + return ( +
+

+ {' '} + {title} + +

+
+ ); + } } // PropTypes TodoItem.propTypes = { - todo: PropTypes.object.isRequired, - markComplete: PropTypes.func.isRequired, - delTodo: PropTypes.func.isRequired, -} + todo: PropTypes.object.isRequired, + markComplete: PropTypes.func.isRequired, + delTodo: PropTypes.func.isRequired +}; const btnStyle = { - background: '#ff0000', - color: '#fff', - border: 'none', - padding: '5px 9px', - borderRadius: '50%', - cursor: 'pointer', - float: 'right' -} + background: '#ff0000', + color: '#fff', + border: 'none', + padding: '5px 9px', + borderRadius: '50%', + cursor: 'pointer', + float: 'right' +}; -export default TodoItem +export default TodoItem; From 189659c2e6d944bf4919f6302145aed7ddf7247a Mon Sep 17 00:00:00 2001 From: brein Date: Tue, 9 Jul 2019 02:32:24 +0200 Subject: [PATCH 3/3] Altering the submit button --- src/App.css | 19 +++++++---- src/components/AddTodo.js | 70 +++++++++++++++++++++------------------ 2 files changed, 51 insertions(+), 38 deletions(-) diff --git a/src/App.css b/src/App.css index 5a88eca..0b22c72 100644 --- a/src/App.css +++ b/src/App.css @@ -19,14 +19,21 @@ a { } .btn { - display: inline-block; + display: block; border: none; - background: #555; - color: #fff; padding: 7px 20px; - cursor: pointer; + color: #ffffff; } -.btn:hover { - background: #666; +.btn:disabled { + background: #bbbbbb; } + +.btn:enabled { + background: #555555; + cursor: pointer; +} + +.btn:enabled:hover { + background: #666666; +} \ No newline at end of file diff --git a/src/components/AddTodo.js b/src/components/AddTodo.js index 1686ac5..778707f 100644 --- a/src/components/AddTodo.js +++ b/src/components/AddTodo.js @@ -2,43 +2,49 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; export class AddTodo extends Component { - state = { - title: '' - } + state = { + title: '', + disabled: true + }; - onSubmit = (e) => { - e.preventDefault(); - this.props.addTodo(this.state.title); - this.setState({ title: '' }); - } + onSubmit = (e) => { + e.preventDefault(); + this.props.addTodo(this.state.title); + this.setState({ title: '', disabled: true }); + }; - onChange = (e) => this.setState({ [e.target.name]: e.target.value }); + onChange = (e) => + this.setState({ + [e.target.name]: e.target.value, + disabled: e.target.value.length > 0 ? false : true + }); - render() { - return ( -
- - -
- ) - } + render() { + return ( +
+ + +
+ ); + } } // PropTypes AddTodo.propTypes = { - addTodo: PropTypes.func.isRequired -} + addTodo: PropTypes.func.isRequired +}; -export default AddTodo +export default AddTodo;