1import { JSONArray, JSONObject, useDocument } from '@yorkie-js/react';
2
3import Header from './Header';
4import MainSection from './MainSection';
5import { Todo } from './model';
6import './App.css';
7
8import 'todomvc-app-css/index.css';
9
10/**
11 * `App` is the root component of the application.
12 */
13export default function App() {
14  const { root, update, loading, error } = useDocument<{
15    todos: JSONArray<Todo>;
16  }>();
17
18  if (loading) return <div>Loading...</div>;
19  if (error) return <div>Error: {error.message}</div>;
20
21  const actions = {
22    addTodo: (text: string) => {
23      update((root) => {
24        root.todos.push({
25          id:
26            root.todos.reduce((maxID, todo) => Math.max(todo.id, maxID), -1) +
27            1,
28          completed: false,
29          text,
30        });
31      });
32    },
33    deleteTodo: (id: number) => {
34      update((root) => {
35        let target: (Todo & JSONObject<Todo>) | undefined;
36        for (const todo of root.todos) {
37          if (todo.id === id) {
38            target = todo as Todo & JSONObject<Todo>;
39            break;
40          }
41        }
42        if (target) {
43          root.todos.deleteByID!(target.getID!());
44        }
45      });
46    },
47    editTodo: (id: number, text: string) => {
48      update((root) => {
49        let target;
50        for (const todo of root.todos) {
51          if (todo.id === id) {
52            target = todo;
53            break;
54          }
55        }
56        if (target) {
57          target.text = text;
58        }
59      });
60    },
61    completeTodo: (id: number) => {
62      update((root) => {
63        let target;
64        for (const todo of root.todos) {
65          if (todo.id === id) {
66            target = todo;
67            break;
68          }
69        }
70        if (target) {
71          target.completed = !target.completed;
72        }
73      });
74    },
75    clearCompleted: () => {
76      update((root) => {
77        for (const todo of root.todos) {
78          if (todo.completed) {
79            const t = todo as Todo & JSONObject<Todo>;
80            root.todos.deleteByID!(t.getID!());
81          }
82        }
83      });
84    },
85  };
86
87  return (
88    <div className="App">
89      <Header addTodo={actions.addTodo} />
90      <MainSection todos={root.todos} actions={actions} />
91    </div>
92  );
93}