1import Header from './components/Header';
2import MainSection from './components/MainSection';
3import './App.css';
4
5import 'todomvc-app-css/index.css';
6import { useTodoReducer } from './useTodoReducer';
7import { JSONArray } from '@yorkie-js/react';
8import { Todo } from './model';
9
10const initialRoot = {
11  todos: [
12    { id: crypto.randomUUID(), text: 'Yorkie JS SDK', completed: false },
13    { id: crypto.randomUUID(), text: 'Garbage collection', completed: false },
14    { id: crypto.randomUUID(), text: 'RichText datatype', completed: false },
15  ],
16} as { todos: JSONArray<Todo> };
17
18/**
19 * `App` is the root component of the application.
20 */
21export default function App() {
22  const { root, dispatch, loading, error } = useTodoReducer(initialRoot);
23
24  if (loading) return <div>Loading...</div>;
25  if (error) return <div>Error: {error.message}</div>;
26
27  return (
28    <div className="App">
29      <Header dispatch={dispatch} />
30      <MainSection todos={root.todos} dispatch={dispatch} />
31    </div>
32  );
33}