-
Notifications
You must be signed in to change notification settings - Fork 9
Expand file tree
/
Copy pathApp.js
More file actions
69 lines (61 loc) · 1.88 KB
/
Copy pathApp.js
File metadata and controls
69 lines (61 loc) · 1.88 KB
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
import React, { useEffect, useState } from 'react';
function App() {
const [newTodo, setNewTodo] = useState("");
const [todos, setTodos] = useState([]);
async function getTodos() {
const result = await fetch("/api/todos");
const todos = await result.json();
setTodos(todos);
}
async function createTodo(e) {
e.preventDefault();
await fetch('/api/todos', {
method: "POST",
body: JSON.stringify({ name: newTodo })
});
setNewTodo("");
await getTodos();
}
async function updateCompleted(todo, isComplete) {
await fetch(`/api/todos/${todo.id}`, {
method: "POST",
body: JSON.stringify({ ...todo, isComplete: isComplete })
});
await getTodos();
}
async function deleteTodo(id) {
await fetch(`/api/todos/${id}`, {
method: "DELETE"
});
await getTodos();
}
useEffect(() => {
getTodos();
}, []);
return (
<section className="todoapp">
<header className="header">
<h1>todos</h1>
<form onSubmit={createTodo}>
<input className="new-todo" placeholder="What needs to be done?" value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
</form>
</header>
<section className="main" style={{ display: "block" }}>
<ul className="todo-list">
{todos.map(todo => {
return (
<li className={todo.isComplete ? "completed" : ""} key={todo.id}>
<div className="view">
<input className="toggle" type="checkbox" defaultChecked={todo.isComplete} onChange={(e) => updateCompleted(todo, e.target.checked)} />
<label>{todo.name}</label>
<button className="destroy" onClick={() => deleteTodo(todo.id)}></button>
</div>
</li>
);
})}
</ul>
</section>
</section >
);
}
export default App;