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;