Merge pull request #14 from charlenetcy/feature/collaborative-editing

feat(collab): Add user presence notifications and cross-device support

Author: verakohh

.env.example

@@ -5,4 +5,5 @@ NODE_ENV=development
 SUPABASE_URL=
 SUPABASE_KEY=
 
-PARTYKIT_HOST_URL='localhost:8082'
+PARTYKIT_HOST_URL='localhost:8082'
+VITE_NGROK_COLLAB_HOST=

collaboration-service/Dockerfile

@@ -21,4 +21,4 @@ COPY . .
 EXPOSE 8082
 
 # Start the application
-CMD ["npm", "run", "dev"]
+CMD sh -c 'echo "SUPABASE_URL=$SUPABASE_URL" > .env && echo "SUPABASE_KEY=$SUPABASE_KEY" >> .env && npm run dev'

collaboration-service/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "type": "module",
   "scripts": {
-    "dev": "partykit dev --live --var SUPABASE_URL:$SUPABASE_URL --var SUPABASE_KEY:$SUPABASE_KEY",
+    "dev": "npx partykit dev --live",
     "lint": "cd .. && npm run lint:service collaboration-service --ext .ts",
     "lint:fix": "cd .. && npm run lint:service collaboration-service --ext .ts --fix",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",

collaboration-service/src/server.ts

@@ -8,11 +8,19 @@ import * as Y from 'yjs';
 
 // TODO : separate database connection
 // Create a single supabase client for interacting with your database
-const supabase = createClient(
-  process.env['SUPABASE_URL'] as string,
-  process.env['SUPABASE_KEY'] as string,
-  {auth: {persistSession: false}}
-);
+const SUPABASE_URL = process.env['SUPABASE_URL'] as string;
+const SUPABASE_KEY = process.env['SUPABASE_KEY'] as string;
+
+if (!SUPABASE_URL || !SUPABASE_KEY) {
+  console.error('FATAL ERROR: Missing required environment variables');
+  console.error('Required: SUPABASE_URL, SUPABASE_KEY');
+  console.error('Please check your .env file');
+  throw new Error('Missing required environment variables: SUPABASE_URL, SUPABASE_KEY');
+}
+
+const supabase = createClient(SUPABASE_URL, SUPABASE_KEY, {
+  auth: {persistSession: false}
+});
 
 export default class YjsServer implements Party.Server {
   constructor(public room: Party.Room) {}
@@ -22,7 +30,7 @@ export default class YjsServer implements Party.Server {
       async load() {
         // This is called once per "room" when the first user connects
 
-        // Let's make a Yjs document
+        // Creates the backend Yjs document
         const doc = new Y.Doc();
 
         // Load the document from the database
@@ -50,7 +58,7 @@ export default class YjsServer implements Party.Server {
             console.log(`[${room.id}] No existing document found, creating new document`);
           }
 
-          // Return the Yjs document
+          // Return the Yjs document to y-partykit to manage
           return doc;
         } catch (err) {
           console.error(`[${room.id}] Load failed:`, err);

docker-compose.yml

@@ -56,6 +56,7 @@ services:
       - '3000:5173'
     environment:
       - NODE_ENV=development
+      - VITE_NGROK_COLLAB_HOST=${VITE_NGROK_COLLAB_HOST}
     volumes:
       - ./frontend:/app
       - /app/node_modules
@@ -161,6 +162,7 @@ services:
     volumes:
       - ./collaboration-service:/app
       - /app/node_modules
+      - /app/.partykit
     networks:
       - app-network
 

frontend/package.json

@@ -12,12 +12,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "lucide-react": "^0.545.0",
     "@tanstack/react-query": "^5.90.2",
     "@tanstack/react-query-devtools": "^5.90.2",
     "axios": "^1.12.2",
+    "lucide-react": "^0.545.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-hot-toast": "^2.6.0",
     "react-router-dom": "^7.9.2"
   },
   "devDependencies": {

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import Register from './pages/register';
 import Login from './pages/login';
 import Input from './collaboration/pages/Input';
 import {CollabPage} from './collaboration/pages/CollabPage';
+import { Toaster } from 'react-hot-toast';
 import VerifyEmail from './pages/verifyEmail';
 import Profile from './pages/profile';
 import AuthContainer from './components/authContainer';
@@ -20,31 +21,35 @@ function App() {
   const navigate = useNavigate();
   setNavigate(navigate); // Allows use of navigate within Axios.
   return (
-    <Routes>
-      <Route path="/home" element={<Home />} />
-      <Route path="/register" element={<Register />} />
-      <Route path="/complete-profile" element={<CompleteProfile />} />
-      <Route path="/email/verify/:code" element={<VerifyEmail />} />
-      <Route path="/login" element={<Login />} />
-      <Route path="/password/forgot" element={<ForgotPassword />} />
-      <Route path="/password/reset" element={<ResetPassword />} />
-      // Authorized users only (defined as having verfieid email).
-      <Route path="/" element={<AuthContainer />}>
-        <Route index element={<Profile />} />
-        <Route path="profile/" element={<UserProfile />} />
-        <Route path="profile/settings" element={<ProfileSettings />} />
-        <Route path="room" element={<Input />} />
-        <Route path="room/:roomId" element={<CollabPage />} />
-        <Route
-          path="admin/manage"
-          element={
-            <AdminContainer>
-              <AdminManagement />
-            </AdminContainer>
-          }
-        />
-      </Route>
-    </Routes>
+    <>
+      <Toaster />
+
+      <Routes>
+        <Route path="/home" element={<Home />} />
+        <Route path="/register" element={<Register />} />
+        <Route path="/complete-profile" element={<CompleteProfile />} />
+        <Route path="/email/verify/:code" element={<VerifyEmail />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/password/forgot" element={<ForgotPassword />} />
+        <Route path="/password/reset" element={<ResetPassword />} />
+        // Authorized users only (defined as having verfieid email).
+        <Route path="/" element={<AuthContainer />}>
+          <Route index element={<Profile />} />
+          <Route path="profile/" element={<UserProfile />} />
+          <Route path="profile/settings" element={<ProfileSettings />} />
+          <Route path="room" element={<Input />} />
+          <Route path="room/:roomId" element={<CollabPage />} />
+          <Route
+            path="admin/manage"
+            element={
+              <AdminContainer>
+                <AdminManagement />
+              </AdminContainer>
+            }
+          />
+        </Route>
+      </Routes>
+    </>
   );
 }
 

frontend/src/collaboration/hooks/useCollabEditor.ts

@@ -2,43 +2,197 @@
 import React, {useEffect, useRef, useState} from 'react';
 import YPartyKitProvider from 'y-partykit/provider';
 import * as Y from 'yjs';
+import toast from 'react-hot-toast';
+
+const USER_CONFIG = {
+  COLORS: ['#2563EB', '#DC2626', '#059669', '#7C3AED','#EA580C', '#DB2777', '#0891B2', '#CA8A04'],
+  ANIMALS: ['Panda', 'Tiger', 'Lion', 'Eagle', 'Shark', 'Wolf', 'Fox', 'Bear', 'Owl', 'Cat'],
+  ADJECTIVES: ['Code Master', 'Cracked', 'Pro Progammer', 'Bug Terminator', 'Wise', 'Debugger', 'Coder', 'Sharp', 'Giga Chad'],
+  TOAST_DURATION_MS: 6000,
+  DUPLICATE_TOAST_DEBOUNCE_MS: 15000,
+} as const;
+
+const getRandomElement = <T,>(array: readonly T[]): T => {
+  return array[Math.floor(Math.random() * array.length)];
+};
+
+const getRandomName = (): string => {
+  const animal = getRandomElement(USER_CONFIG.ANIMALS);
+  const adjective = getRandomElement(USER_CONFIG.ADJECTIVES);
+  return `${adjective} ${animal}`;
+};
+
+
+
+const handleUsersAdded = (
+  added: number[],
+  currentUserId: number,
+  awareness: any,
+  userNamesMap: Map<number, string>,
+  showToast: boolean = true
+): void => {
+  added.forEach((clientId) => {
+    if (clientId === currentUserId) {
+      return;
+    }
+    const user = awareness.getStates().get(clientId)?.user;
+    const username = user?.name;
+    
+    if (username) {
+      userNamesMap.set(clientId, username);
+      console.log(`! User added: Client ${clientId}: ${username}`);
+      
+      if (showToast) {
+        toast.success(`${username} joined the room`, {
+          icon: '👋',
+          duration: USER_CONFIG.TOAST_DURATION_MS,
+        });
+      }
+    }
+  });
+};
+
+const handleUsersRemoved = (
+  removed: number[],
+  currentUserId: number,
+  userNamesMap: Map<number, string>,
+  recentlyRemovedSet: Set<number>,
+  timeoutRefsMap: Map<number, NodeJS.Timeout>
+): void => {
+  removed.forEach((clientId) => {
+    if (clientId === currentUserId) {
+      return;
+    }
+    
+    // Prevents duplicate notifications within debounce period
+    if (recentlyRemovedSet.has(clientId)) {
+      return;
+    }
+    
+    recentlyRemovedSet.add(clientId);
+    
+    const username = userNamesMap.get(clientId) || 'Coding buddy';
+    console.log('!! User left:', clientId, username);
+    toast.error(`${username} left the room`, {
+      icon: '👋',
+    });
+    
+    // Clears any existing timeout for this client (prevents duplicates)
+    if (timeoutRefsMap.has(clientId)) {
+      clearTimeout(timeoutRefsMap.get(clientId));
+    }
+    
+    // Clears debounce flag after timeout to allow future notifications
+    const timeoutId = setTimeout(() => {
+      recentlyRemovedSet.delete(clientId);
+      timeoutRefsMap.delete(clientId);
+    }, USER_CONFIG.DUPLICATE_TOAST_DEBOUNCE_MS);
+    
+    timeoutRefsMap.set(clientId, timeoutId);
+  });
+};
 
-// 5 bright colors
-const colours = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF'];
-// Pick a random color from the list
-const MY_COLOR = colours[Math.floor(Math.random() * colours.length)];
 
 export default function useCollabEditor({roomId}: {roomId: string}) {
   const [isReady, setIsReady] = useState<boolean>(false);
   const ytextRef = useRef<Y.Text | null>(null);
   const providerRef = useRef<YPartyKitProvider | null>(null);
   const awarenessRef = useRef<any>(null);
-
+  const isFirstChangeRef = useRef<boolean>(true);
+  const userNamesRef = useRef<Map<number, string>>(new Map());
+  const recentlyRemovedRef = useRef<Set<number>>(new Set());
+  const timeoutRefs = useRef(new Map<number, NodeJS.Timeout>());
+  
   useEffect(() => {
+    console.log('useEffect RUNNING for room:', roomId);
+    
+    if (providerRef.current) {
+      console.warn('Provider already exists!');
+      return;
+    }
     const provider = new YPartyKitProvider(
-      import.meta.env.PARTYKIT_HOST_URL || 'localhost:8082', //host
+      import.meta.env.VITE_NGROK_COLLAB_HOST || 'localhost:8082', //host
       roomId //room
     );
+    console.log('Created new provider for room:', roomId);
+    console.log('   Client ID:', provider.awareness.clientID);
     providerRef.current = provider;
-
+    
     if (!provider) return;
-
-    // Get the shared text from the provider's document
+    
+    // Gets the shared text from the provider's document
     const ytext = provider.doc.getText('codemirror');
     ytextRef.current = ytext;
+    
+    // Sets up user awareness
+    const currUserId = provider.awareness.clientID;
+    const username = getRandomName();
+    const userColor = getRandomElement(USER_CONFIG.COLORS);
+    
+    console.log('Setting curr user info:', {clientId: currUserId, name: username});
 
-    // Set up user awareness
     provider.awareness.setLocalStateField('user', {
-      name: `User-${Math.random().toString(36).substr(2, 4)}`,
-      color: MY_COLOR,
-      colorLight: MY_COLOR + '80',
+      name: username,
+      color: userColor,
+      colorLight: userColor + '80',
     });
 
     awarenessRef.current = provider.awareness;
+    isFirstChangeRef.current = true;
 
+    // Listens for awareness changes (users joining or leaving)
+    const awarenessChangeHandler = ({added, removed}: {added: number[]; removed: number[];}) => {
+      if (isFirstChangeRef.current) {
+        console.log('Initial sync');
+        
+        const allUsers = Array.from(provider.awareness.getStates().entries()).map(
+          ([id, state]) => ({
+            clientId: id,
+            name: state.user?.name || 'Unknown',
+            isMe: id === currUserId,
+          })
+        );
+        console.log('All users in awareness:', allUsers);
+
+        handleUsersAdded(added, currUserId, provider.awareness, userNamesRef.current, false);
+        
+        isFirstChangeRef.current = false;
+        return;
+      }
+      
+      if (added.length === 0 && removed.length === 0) {
+        console.log('Skipping empty awareness event!');
+        return;
+      }
+
+      console.log('Processing awareness change (not initial sync), added:', added, 'removed:', removed);
+
+      handleUsersAdded(added, currUserId, provider.awareness, userNamesRef.current);
+      console.log(timeoutRefs.current);
+      handleUsersRemoved(removed, currUserId, userNamesRef.current, recentlyRemovedRef.current, timeoutRefs.current);
+      console.log(timeoutRefs.current);
+
+    };
+
+    provider.awareness.on('change', awarenessChangeHandler);
     setIsReady(true);
+
     return () => {
+      console.log('Cleanup! destroying provider for room:', roomId);
+
+      provider.awareness.off('change', awarenessChangeHandler);
+      userNamesRef.current.clear();
+      recentlyRemovedRef.current.clear();
+
+      timeoutRefs.current.forEach((timeoutId) => {
+        clearTimeout(timeoutId);
+      });
+      timeoutRefs.current.clear();
+
       setIsReady(false);
+      if (provider.awareness) {
+        provider.awareness.setLocalState(null);
+      }
       provider.destroy(); //disconnect the WebSocket
       providerRef.current = null;
       ytextRef.current = null;