forked from platzi/curso-react-intro
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmock.js
67 lines (67 loc) · 1.76 KB
/
mock.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
import React from "react";
import { useTodos } from "./useTodos";
import { TodoHeader } from "../TodoHeader";
import { TodoCounter } from "../TodoCounter";
import { TodoSearch } from "../TodoSearch";
import { TodoList } from "../TodoList";
import { TodoItem } from "../TodoItem";
import { TodosError } from "../TodosError";
import { TodosLoading } from "../TodosLoading";
import { EmptyTodos } from "../EmptyTodos";
import { TodoForm } from "../TodoForm";
import { CreateTodoButton } from "../CreateTodoButton";
import { Modal } from "../Modal";
function App() {
const {
error,
loading,
searchedTodos,
completeTodo,
deleteTodo,
openModal,
setOpenModal,
totalTodos,
completedTodos,
searchValue,
setSearchValue,
addTodo,
} = useTodos();
return (
<React.Fragment>
<TodoHeader>
<TodoCounter
totalTodos={totalTodos}
completedTodos={completedTodos}
/>
<TodoSearch
searchValue={searchValue}
setSearchValue={setSearchValue}
/>
</TodoHeader>
<TodoList>
{error && <TodosError />}
{loading && <TodosLoading />}
{!loading && !searchedTodos.length && <EmptyTodos />}
{searchedTodos.map((todo) => (
<TodoItem
key={todo.text}
text={todo.text}
completed={todo.completed}
onComplete={() => completeTodo(todo.text)}
onDelete={() => deleteTodo(todo.text)}
/>
))}
</TodoList>
{!!openModal && (
<Modal>
<TodoForm
addTodo={addTodo}
setOpenModal={setOpenModal}
/>
</Modal>
)}
<CreateTodoButton setOpenModal={setOpenModal} />
</React.Fragment>
);
}
export default App;