feat: add a user data bit

apps/course-builder-web/package.json

@@ -46,6 +46,7 @@
     "@hookform/resolvers": "^3.3.2",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
+    "@msgpack/msgpack": "3.0.0-beta2",
     "@mux/mux-player-react": "^2.2.0",
     "@next/mdx": "14.0.1",
     "@planetscale/database": "^1.11.0",
@@ -144,7 +145,8 @@
     "y-prosemirror": "^1.2.1",
     "y-protocols": "^1.0.6",
     "yjs": "^13.6.10",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@mux/mux-node": "^7.3.2",

apps/course-builder-web/party/index.ts

@@ -2,6 +2,15 @@ import type * as Party from 'partykit/server'
 import {onConnect} from 'y-partykit'
 import * as Y from 'yjs'
 
+const BROADCAST_INTERVAL = 1000 / 60 // 60fps
+
+const CORS = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Methods': 'GET',
+  'Access-Control-Allow-Headers':
+    'Origin, X-Requested-With, Content-Type, Accept',
+}
+
 export default class Server implements Party.Server {
   constructor(readonly party: Party.Party) {}
 
@@ -43,15 +52,33 @@ export default class Server implements Party.Server {
     this.messages = (await this.party.storage.get<string[]>('messages')) ?? []
   }
 
-  async onRequest(_req: Party.Request) {
-    const messageBody: {requestId: string; body: string; name: string} =
-      await _req.json()
+  async onRequest(req: Party.Request) {
+    if (req.method === 'GET') {
+      // For SSR, return the current presence of all connections
+      // const users = [...this.party.getConnections()].reduce(
+      //   (acc, user) => ({...acc, [user.id]: this.getUser(user)}),
+      //   {},
+      // )
+      return Response.json({users: []}, {status: 200, headers: CORS})
+    }
 
-    this.party.broadcast(JSON.stringify(messageBody))
+    // respond to cors preflight requests
+    if (req.method === 'OPTIONS') {
+      return Response.json({ok: true}, {status: 200, headers: CORS})
+    }
 
-    return new Response(
-      `Party ${this.party.id} has received ${this.messages.length} messages`,
-    )
+    if (req.method === 'POST') {
+      const messageBody: {requestId: string; body: string; name: string} =
+        await req.json()
+
+      this.party.broadcast(JSON.stringify(messageBody))
+
+      return new Response(
+        `Party ${this.party.id} has received ${this.messages.length} messages`,
+      )
+    }
+
+    return new Response('Method Not Allowed', {status: 405})
   }
 
   onMessage(message: string, sender: Party.Connection) {

apps/course-builder-web/src/app/tips/_components/codemirror.tsx

@@ -6,6 +6,7 @@ import {EditorState, Extension} from '@codemirror/state'
 import {useCallback, useEffect, useState} from 'react'
 import {markdown} from '@codemirror/lang-markdown'
 import YPartyKitProvider from 'y-partykit/provider'
+import {useSession} from 'next-auth/react'
 
 export const CodemirrorEditor = ({
   roomName,
@@ -80,6 +81,8 @@ const useCodemirror = ({
   const [element, setElement] = useState<HTMLElement>()
   const [yUndoManager, setYUndoManager] = useState<Y.UndoManager>()
 
+  const {data: session} = useSession()
+
   useEffect(() => {
     let view: EditorView
 
@@ -103,6 +106,15 @@ const useCodemirror = ({
       }
     })
 
+    const awareness = provider.awareness
+
+    if (session) {
+      awareness.setLocalStateField('user', {
+        ...session.user,
+        color: '#ffb61e', // should be a hex color
+      })
+    }
+
     // Set up CodeMirror and extensions
     const state = EditorState.create({
       doc: ytext.toString(),
@@ -125,7 +137,7 @@ const useCodemirror = ({
       provider?.destroy()
       view?.destroy()
     }
-  }, [element, roomName, value])
+  }, [element, roomName, value, session])
 
   return {
     codemirrorElementRef: useCallback((node: HTMLElement | null) => {