maintain user presence in rooms with Realtime Database

src/pages/Home.tsx

@@ -1,7 +1,7 @@
 import { IonButton, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonTitle, IonToolbar } from '@ionic/react';
 import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
-import { db, timestamp } from '../services/firebase';
+import { db, timestamp, auth, rtdb } from '../services/firebase';
 import './Home.css';
 
 const Home: React.FC = () => {
@@ -10,20 +10,32 @@ const Home: React.FC = () => {
 
   let history = useHistory();
 
-  const handleClick = async () => {
+  // Populate both Firestore and RealTimeDB before navigating to room
+  const createRoom = async () => {
     const roomId = await db.collection('rooms').add({
       createdAt: timestamp,
       ownerId: userId,
     });
 
+    await rtdb.ref('/rooms/' + roomId.id).set({ [userId]: 'placeholder', exists: true });
     const path = '/room/' + roomId.id;
     return history.push(path);
   };
 
+  // Sign in anonymously before showing Create Room button
   useEffect(() => {
-    console.log('Hook fired');
-    setUserId('placeholder');
-    setLoading(false);
+    const authUnsubscribe = auth.onAuthStateChanged((user) => {
+      if (user) {
+        setUserId(user.uid);
+        setLoading(false);
+      } else {
+        auth.signInAnonymously();
+      }
+    });
+
+    return () => {
+      authUnsubscribe();
+    };
   }, []);
 
   return (
@@ -39,7 +51,7 @@ const Home: React.FC = () => {
             {loading ? (
               <IonContent className="ion-padding">Loading...</IonContent>
             ) : (
-              <IonButton onClick={handleClick}>Create Room</IonButton>
+              <IonButton onClick={createRoom}>Create Room</IonButton>
             )}
           </IonRow>
         </IonGrid>

src/pages/Room.tsx

@@ -1,13 +1,14 @@
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import React, { useEffect, useState } from 'react';
 import { RouteComponentProps, useHistory } from 'react-router';
-import { db } from '../services/firebase';
+import { auth, db, rtdb } from '../services/firebase';
 
 const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
   const history = useHistory();
   const roomId = match.params.roomId;
 
-  const [loading, setLoading] = useState(true);
+  const [validRoom, setValidRoom] = useState(false);
+  const [userId, setUserId] = useState('');
 
   // Verify that the roomId exists in db
   useEffect(() => {
@@ -16,14 +17,50 @@ const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
       if (!room.exists) {
         history.push('/');
       } else {
-        setLoading(false);
+        setValidRoom(true);
       }
     };
 
-    console.log('Hook fired');
     fetchRoom();
   }, [history, roomId]);
 
+  // Handle logging in
+  useEffect(() => {
+    const authUnsubscribe = auth.onAuthStateChanged((user) => {
+      if (user) {
+        setUserId(user.uid);
+      } else {
+        auth.signInAnonymously();
+      }
+    });
+
+    return () => {
+      authUnsubscribe();
+    };
+  }, []);
+
+  // Keep track of user presence in realtime database rooms
+  useEffect(() => {
+    if (userId !== '' && validRoom) {
+      const populateRoom = async () => {
+        // Keep userId in the room as long as a connection from the client exists
+        rtdb.ref('/rooms/' + roomId).on('value', async (snapshot) => {
+          if (snapshot.val()) {
+            await rtdb.ref('/rooms/' + roomId).update({ [userId]: 'placeholder' });
+          }
+        });
+
+        // Remove userId from the room on disconnect (closing a browser window/tab)
+        await rtdb
+          .ref('/rooms/' + roomId + '/' + userId)
+          .onDisconnect()
+          .remove();
+      };
+
+      populateRoom();
+    }
+  }, [userId, validRoom, roomId]);
+
   return (
     <IonPage>
       <IonHeader>
@@ -31,7 +68,7 @@ const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
           <IonTitle>Turtle</IonTitle>
         </IonToolbar>
       </IonHeader>
-      {!loading ? (
+      {validRoom ? (
         <IonContent className="ion-padding">Video and chat</IonContent>
       ) : (
         <IonContent className="ion-padding">Loading...</IonContent>