-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
70 lines (62 loc) · 1.69 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React, { useState } from 'react'
import { generate } from 'shortid'
import TodoItem from './TodoItem'
import TodoTextInput from './TodoTextInput'
import { initialTodos } from '../data'
const App = () => {
const [todos, setTodos] = useState(initialTodos)
const addTodo = todoText => {
const addedTodo = {
id: generate(),
completed: false,
text: todoText,
}
const updateTodos = [...todos, addedTodo]
setTodos(updateTodos)
}
const removeTodo = todoId => {
const updateTodos = todos.filter(todo => todo.id !== todoId)
setTodos(updateTodos)
}
const editTodo = (todoId, todoText) => {
const updateTodos = [...todos]
const index = updateTodos.findIndex(todo => todo.id === todoId)
const editedTodo = updateTodos[index]
editedTodo.text = todoText
setTodos(updateTodos)
}
const completeTodo = todoId => {
const updateTodos = [...todos]
const index = updateTodos.findIndex(todo => todo.id === todoId)
const editedTodo = updateTodos[index]
editedTodo.completed = !editedTodo.completed
setTodos(updateTodos)
}
return (
<div>
<header className="header">
<h1>todos</h1>
<TodoTextInput
newTodo
onSave={text => {
if (text.length !== 0) addTodo(text)
}}
/>
</header>
<section className="main">
<ul className="todo-list">
{todos.map(todo => (
<TodoItem
key={todo.id}
todo={todo}
completeTodo={completeTodo}
editTodo={editTodo}
removeTodo={removeTodo}
/>
))}
</ul>
</section>
</div>
)
}
export default App