aws_amplify_react_todo_app_with_cognito_auth_and_realtime_sync.ts

1import { useEffect, useState } from "react";
2import type { Schema } from "../amplify/data/resource";
3import { generateClient } from "aws-amplify/data";
4import { Authenticator } from "@aws-amplify/ui-react";
5import "@aws-amplify/ui-react/styles.css";
6
7const client = generateClient<Schema>();
8
9function App() {
10  const [todos, setTodos] = useState<Array<Schema["Todo"]["type"]>>([]);
11
12  useEffect(() => {
13    client.models.Todo.observeQuery().subscribe({
14      next: (data) => setTodos([...data.items]),
15    });
16  }, []);
17
18  function createTodo() {
19    client.models.Todo.create({
20      content: window.prompt("Todo content"),
21    });
22  }
23
24  function deleteTodo(id: string) {
25    client.models.Todo.delete({ id });
26  }
27
28  return (
29    <Authenticator>
30      {({ signOut, user }) => (
31        <main>
32          <h1>{user?.loginId}'s todos</h1>
33          <button onClick={createTodo}>+ new</button>
34          <ul>
35            {todos.map((todo) => (
36              <li 
37                onClick={() => deleteTodo(todo.id)} 
38                key={todo.id}
39              >
40                {todo.content}
41              </li>
42            ))}
43          </ul>
44          <div>
45            🥳 App successfully hosted. Try creating a new todo.
46            <br />
47            <a href="https://docs.amplify.aws/react/start/quickstart/#make-frontend-updates">
48              Review next step of this tutorial.
49            </a>
50          </div>
51          <button onClick={signOut}>Sign out</button>
52        </main>
53      )}
54    </Authenticator>
55  );
56}
57
58export default App;