feat: client db connection

.env.local

@@ -0,0 +1,2 @@
+VITE_SPACETIMEDB_HOST=ws://localhost:3000
+VITE_SPACETIMEDB_DB_NAME=mono-chat

src/App.tsx

@@ -13,28 +13,82 @@ export type PrettyMessage = {
 };
 
 function App() {
+  const { identity, isActive: connected } = useSpacetimeDB();
+  const setName = useReducer(reducers.setName);
+  const sendMessage = useReducer(reducers.sendMessage);
+
+  const [messages] = useTable(tables.message);
+
   const [newName, setNewName] = useState("");
   const [settingName, setSettingName] = useState(false);
   const [systemMessages, setSystemMessages] = useState([] as Types.Message[]);
   const [newMessage, setNewMessage] = useState("");
 
-  const onlineUsers: Types.User[] = [];
-  const offlineUsers: Types.User[] = [];
+  const [onlineUsers] = useTable(
+    tables.user.where((r) => r.online.eq(true)),
+    {
+      onInsert: (user) => {
+        const name = user.name || user.identity.toHexString().substring(0, 8);
+        setSystemMessages((prev) => [
+          ...prev,
+          {
+            sender: Identity.zero(),
+            text: `${name} has connected.`,
+            sent: Timestamp.now(),
+          },
+        ]);
+      },
+      onDelete: (user) => {
+        const name = user.name || user.identity.toHexString().substring(0, 8);
+        setSystemMessages((prev) => [
+          ...prev,
+          {
+            sender: Identity.zero(),
+            text: `${name} has disconnected.`,
+            sent: Timestamp.now(),
+          },
+        ]);
+      },
+    },
+  );
+  const [offlineUsers] = useTable(tables.user.where((r) => r.online.eq(false)));
   const users = [...onlineUsers, ...offlineUsers];
-  const prettyMessages: PrettyMessage[] = [];
+  const prettyMessages: PrettyMessage[] = messages
+    .concat(systemMessages)
+    .sort((a, b) => a.sent.toDate().getTime() - b.sent.toDate().getTime())
+    .map((message) => {
+      const user = users.find((u) => u.identity.toHexString() === message.sender.toHexString());
+      return {
+        senderName: user?.name || message.sender.toHexString().substring(0, 8),
+        text: message.text,
+        sent: message.sent,
+        kind: Identity.zero().isEqual(message.sender) ? "system" : "user",
+      };
+    });
+
+  if (!connected || !identity) {
+    return (
+      <div className="App">
+        <h1>Connecting...</h1>
+      </div>
+    );
+  }
 
-  const name = "";
+  const name = (() => {
+    const user = users.find((u) => u.identity.isEqual(identity));
+    return user?.name || identity?.toHexString().substring(0, 8) || "";
+  })();
 
   const onSubmitNewName = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setSettingName(false);
-    // TODO: Call `setName` reducer
+    setName({ name: newName.trim() });
   };
 
   const onSubmitMessage = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setNewMessage("");
-    // TODO: Call `sendMessage` reducer
+    sendMessage({ text: newMessage.trim() });
   };
 
   return (

src/main.tsx

@@ -1,10 +1,40 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import { Identity } from "spacetimedb";
+import { SpacetimeDBProvider } from "spacetimedb/react";
+import { DbConnection, type ErrorContext } from "./module_bindings/index.ts";
 
-createRoot(document.getElementById('root')!).render(
+const HOST = import.meta.env.VITE_SPACETIMEDB_HOST;
+const DB_NAME = import.meta.env.VITE_SPACETIMEDB_DB_NAME;
+const TOKEN_KEY = `${HOST}/${DB_NAME}/auth_token`;
+
+const onConnect = (_conn: DbConnection, identity: Identity, token: string) => {
+  localStorage.setItem(TOKEN_KEY, token);
+  console.log("Connected to SpacetimeDB with identity:", identity.toHexString());
+};
+
+const onDisconnect = () => {
+  console.log("Disconnected from SpacetimeDB");
+};
+
+const onConnectError = (_ctx: ErrorContext, err: Error) => {
+  console.log("Error connecting to SpacetimeDB:", err);
+};
+
+const connectionBuilder = DbConnection.builder()
+  .withUri(HOST)
+  .withDatabaseName(DB_NAME)
+  .withToken(localStorage.getItem(TOKEN_KEY) || undefined)
+  .onConnect(onConnect)
+  .onDisconnect(onDisconnect)
+  .onConnectError(onConnectError);
+
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <SpacetimeDBProvider connectionBuilder={connectionBuilder}>
+      <App />
+    </SpacetimeDBProvider>
   </StrictMode>,
-)
+);