From 25f400b355f9f6da67a70acbdc93df52860f8ddd Mon Sep 17 00:00:00 2001
From: krollins-mdb <kyle.rollins@mongodb.com>
Date: Mon, 29 Jul 2024 13:24:31 -0500
Subject: [PATCH] Add pages

---
 .../frameworks/react-test-app/source/App.tsx  | 50 ++++++++++------
 .../react-test-app/source/index.css           | 19 ++++++-
 .../react-test-app/source/models.ts           | 19 +++++++
 .../react-test-app/source/pages/LoginPage.tsx | 57 +++++++++++++++++++
 .../react-test-app/source/pages/TodoPage.tsx  | 43 ++++++++++++++
 5 files changed, 169 insertions(+), 19 deletions(-)
 create mode 100644 examples/frameworks/react-test-app/source/models.ts
 create mode 100644 examples/frameworks/react-test-app/source/pages/LoginPage.tsx
 create mode 100644 examples/frameworks/react-test-app/source/pages/TodoPage.tsx

diff --git a/examples/frameworks/react-test-app/source/App.tsx b/examples/frameworks/react-test-app/source/App.tsx
index 043b34b3b5..e0b1a6428f 100644
--- a/examples/frameworks/react-test-app/source/App.tsx
+++ b/examples/frameworks/react-test-app/source/App.tsx
@@ -1,16 +1,24 @@
-// import { useState } from "react";
-// import * as Realm from "realm-web";
-import { AppProvider, useAuth, UserProvider, useUser } from "@realm/react";
+import {
+  AppProvider,
+  UserProvider,
+  RealmProvider,
+  useUser,
+} from "@realm/react";
+import { LoginPage } from "./pages/LoginPage";
+import { TodoPage } from "./pages/TodoPage";
 
 import { APP_ID } from "./appServicesConfig";
-
 import "./App.css";
+import { Item } from "./models";
 
 function AppWrapper() {
   return (
     <AppProvider id={APP_ID}>
-      <div className="App">
-        <UserProvider fallback={Login}>
+      <div className="app-header">
+        <p>@realm/react Test App</p>
+      </div>
+      <div className="app">
+        <UserProvider fallback={LoginPage}>
           <App />
         </UserProvider>
       </div>
@@ -19,11 +27,25 @@ function AppWrapper() {
 }
 
 const App = () => {
+  const user = useUser();
+
   return (
     <div>
-      <div className="App-header">
+      <RealmProvider
+        schema={[Item]}
+        sync={{
+          flexible: true,
+          user: user,
+          initialSubscriptions: {
+            update(subs, realm) {
+              subs.add(realm.objects(Item));
+            },
+          },
+        }}
+      >
         <UserDetail />
-      </div>
+        <TodoPage />
+      </RealmProvider>
     </div>
   );
 };
@@ -33,18 +55,10 @@ const UserDetail = () => {
 
   return (
     <div>
-      <h1>Logged in with anonymous id: {user.id}</h1>
+      <p>Account id: {user.id}</p>
+      {user.profile.email && <p>Email: {user.profile.email}</p>}
     </div>
   );
 };
 
-const Login = () => {
-  const { logInWithAnonymous } = useAuth();
-
-  const loginAnonymous = async () => {
-    logInWithAnonymous();
-  };
-  return <button onClick={loginAnonymous}>Log In</button>;
-};
-
 export default AppWrapper;
diff --git a/examples/frameworks/react-test-app/source/index.css b/examples/frameworks/react-test-app/source/index.css
index 6119ad9a8f..ae3a072911 100644
--- a/examples/frameworks/react-test-app/source/index.css
+++ b/examples/frameworks/react-test-app/source/index.css
@@ -25,7 +25,7 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
+  /* place-items: center; */
   min-width: 320px;
   min-height: 100vh;
 }
@@ -66,3 +66,20 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+#root {
+  display: flex;
+  flex-direction: column;
+}
+
+.app {
+  flex: 1;
+}
+
+.app-header {
+  display: flex;
+  place-items: center;
+  height: 5em;
+  border-bottom: 1px solid #f9f9f9;
+  margin-bottom: 4em;
+}
diff --git a/examples/frameworks/react-test-app/source/models.ts b/examples/frameworks/react-test-app/source/models.ts
new file mode 100644
index 0000000000..975007950a
--- /dev/null
+++ b/examples/frameworks/react-test-app/source/models.ts
@@ -0,0 +1,19 @@
+import Realm, { BSON } from "realm";
+
+export class Item extends Realm.Object<Item> {
+  _id!: BSON.ObjectId;
+  isComplete!: boolean;
+  summary!: string;
+  owner_id!: string;
+
+  static schema: Realm.ObjectSchema = {
+    name: "Item",
+    primaryKey: "_id",
+    properties: {
+      _id: { type: "objectId", default: () => new BSON.ObjectId() },
+      isComplete: { type: "bool", default: false },
+      summary: "string",
+      owner_id: "string",
+    },
+  };
+}
diff --git a/examples/frameworks/react-test-app/source/pages/LoginPage.tsx b/examples/frameworks/react-test-app/source/pages/LoginPage.tsx
new file mode 100644
index 0000000000..01207df388
--- /dev/null
+++ b/examples/frameworks/react-test-app/source/pages/LoginPage.tsx
@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { useAuth, useEmailPasswordAuth } from "@realm/react";
+
+export const LoginPage = () => {
+  const { logInWithAnonymous } = useAuth();
+  const { logIn, register } = useEmailPasswordAuth();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const loginAnonymous = () => {
+    logInWithAnonymous();
+  };
+
+  const loginEmailPassword = () => {
+    logIn({ email, password });
+  };
+
+  const registerUser = () => {
+    register({ email, password });
+
+    setTimeout(() => {
+      loginEmailPassword();
+    }, 500);
+  };
+
+  return (
+    <div>
+      <div>
+        <p>Create a new account or log into an existing account</p>
+        <input
+          onChange={(e) => setEmail(e.target.value)}
+          value={email}
+          placeholder="Email..."
+        />
+        <input
+          onChange={(e) => setPassword(e.target.value)}
+          value={password}
+          placeholder="Password..."
+        />
+
+        <div>
+          <button onClick={registerUser}>Create account</button>
+          <button onClick={loginEmailPassword}>Log in</button>
+        </div>
+      </div>
+
+      <div>
+        <p>
+          Log in to continue. The button below will log you in with an anonymous
+          App Services user.
+        </p>
+        <button onClick={loginAnonymous}>Log in</button>
+      </div>
+    </div>
+  );
+};
diff --git a/examples/frameworks/react-test-app/source/pages/TodoPage.tsx b/examples/frameworks/react-test-app/source/pages/TodoPage.tsx
new file mode 100644
index 0000000000..dd728cda2c
--- /dev/null
+++ b/examples/frameworks/react-test-app/source/pages/TodoPage.tsx
@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { useQuery, useRealm, useUser } from "@realm/react";
+import { Item } from "../models";
+
+// TODO: This is working, but not re-rendering when new item is created.
+
+export const TodoPage = () => {
+  const realm = useRealm();
+  const user = useUser();
+  const todoItems = useQuery(Item);
+
+  const [summary, setSummary] = useState("");
+
+  const addTodo = () => {
+    realm.write(() => {
+      realm.create(Item, { summary: summary, owner_id: user.id });
+    });
+  };
+
+  // TODO: Add ability to complete/delete todos
+
+  return (
+    <div>
+      <input
+        onChange={(e) => setSummary(e.target.value)}
+        value={summary}
+        placeholder="Pet the cat"
+      />
+
+      <button onClick={addTodo}>Add todo item</button>
+
+      {todoItems.length ? (
+        <ul>
+          {todoItems.map((todo) => (
+            <li>{todo.summary}</li>
+          ))}
+        </ul>
+      ) : (
+        <p>Nothing to do</p>
+      )}
+    </div>
+  );
+};