fixed join message and scrolling

package-lock.json

@@ -1123,6 +1123,11 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@capacitor/android": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-2.4.0.tgz",
+      "integrity": "sha512-5sJicZjtuBRgtmBuV1kvWnIjlu7bnw2TGGp62UXf0ZrjvMUCYSFHBqIHZ8neffW7a3xM5cdGMUlxJ+HfA9ntAg=="
+    },
     "@capacitor/cli": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@capacitor/cli/-/cli-2.4.0.tgz",
@@ -1150,6 +1155,11 @@
         "tslib": "^1.9.0"
       }
     },
+    "@capacitor/ios": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/ios/-/ios-2.4.0.tgz",
+      "integrity": "sha512-G4WcQHS4RuK94Ncoi5K+r12DWPqkB8yZKupQrJaGT1S/Zyc3mcA9m1f4HwRPlYCwyxQ6lCd8+N9GYxLu7Kv+SA=="
+    },
     "@cnakazawa/watch": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
@@ -1482,12 +1492,6 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
-    "@iconify/icons-logos": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/@iconify/icons-logos/-/icons-logos-1.0.12.tgz",
-      "integrity": "sha512-VC5hcZ2lw1D15iQX5AukQ0m5r6EmRJ5jg6zoTL+XCRwH1RTdu0jUw6uN35uPTKp7OohAj1eLIjjnZw0WPeBkJg==",
-      "dev": true
-    },
     "@iconify/icons-simple-icons": {
       "version": "1.0.47",
       "resolved": "https://registry.npmjs.org/@iconify/icons-simple-icons/-/icons-simple-icons-1.0.47.tgz",

package.json

@@ -3,7 +3,9 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
+    "@capacitor/android": "^2.4.0",
     "@capacitor/core": "2.4.0",
+    "@capacitor/ios": "^2.4.0",
     "@ionic/react": "^5.0.7",
     "@ionic/react-router": "^5.0.7",
     "@testing-library/jest-dom": "^4.2.4",

src/components/Messages.tsx

@@ -11,7 +11,7 @@ import {
 } from '@ionic/react';
 import { sendOutline } from 'ionicons/icons';
 import React, { useEffect, useRef, useState } from 'react';
-import { arrayUnion, db, rtdb } from '../services/firebase';
+import { db, rtdb } from '../services/firebase';
 import { secondsToTimestamp } from '../services/utilities';
 import './Messages.css';
 
@@ -39,15 +39,6 @@ const Messages: React.FC<MessagesProps> = ({ pane, ownerId, roomId, userId, user
   const [message, setMessage] = useState(''); // Message to be sent
   const contentRef = useRef<HTMLIonContentElement>(null);
 
-  // Send 'joined room' message on component mount
-  useEffect(() => {
-    db.collection('rooms')
-      .doc(roomId)
-      .update({
-        requests: arrayUnion({ createdAt: Date.now(), senderId: userId, time: 0, type: 'join' }),
-      });
-  }, [roomId, userId]);
-
   // Listen for new chat messages
   useEffect(() => {
     rtdb.ref('/chats/' + roomId).on('value', (snapshot) => {
@@ -71,22 +62,6 @@ const Messages: React.FC<MessagesProps> = ({ pane, ownerId, roomId, userId, user
     };
   }, [roomId, joinTime]);
 
-  // Convert request type to message content
-  const processType = (type: string, time: number): string => {
-    switch (type) {
-      case 'change':
-        return 'changed the video.';
-      case 'join':
-        return 'joined the room.';
-      case 'pause':
-        return 'paused the video at ' + secondsToTimestamp(time);
-      case 'play':
-        return 'played the video from ' + secondsToTimestamp(time);
-      default:
-        return '';
-    }
-  };
-
   // Listen for new system messages
   useEffect(() => {
     const roomUnsubscribe = db
@@ -117,6 +92,22 @@ const Messages: React.FC<MessagesProps> = ({ pane, ownerId, roomId, userId, user
     };
   }, [roomId, joinTime]);
 
+  // Convert request type to message content
+  const processType = (type: string, time: number): string => {
+    switch (type) {
+      case 'change':
+        return 'changed the video.';
+      case 'join':
+        return 'joined the room.';
+      case 'pause':
+        return 'paused the video at ' + secondsToTimestamp(time);
+      case 'play':
+        return 'played the video from ' + secondsToTimestamp(time);
+      default:
+        return '';
+    }
+  };
+
   // Maintain list of users who entered the room, in order to keep all sender names of messages in the room
   useEffect(() => {
     userList.forEach((name: string, id: string) => {
@@ -137,7 +128,7 @@ const Messages: React.FC<MessagesProps> = ({ pane, ownerId, roomId, userId, user
     setTimeout(() => {
       content?.scrollToBottom(200);
     }, 100);
-  }, [allMessages]);
+  }, [allMessages, pane]);
 
   // Retrieve display name from userId
   const getName = (id: string) => {

src/pages/Room.tsx

@@ -4,7 +4,7 @@ import { RouteComponentProps, useHistory } from 'react-router';
 import Frame from '../components/Frame';
 import RoomHeader from '../components/RoomHeader';
 import VideoPlayer from '../components/VideoPlayer';
-import { auth, db, decrement, increment, rtdb } from '../services/firebase';
+import { auth, db, decrement, increment, rtdb, arrayUnion } from '../services/firebase';
 import { generateAnonName } from '../services/utilities';
 import './Room.css';
 
@@ -19,24 +19,6 @@ const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
   const [userCount, setUserCount] = useState(0);
   const [userList, setUserList] = useState<Map<string, string>>(new Map<string, string>());
 
-  // Handle logging in
-  useEffect(() => {
-    const authUnsubscribe = auth.onAuthStateChanged(async (user) => {
-      if (user) {
-        setUserId(user.uid);
-      } else {
-        const credential = await auth.signInAnonymously();
-        await db.collection('users').doc(credential.user?.uid).set({
-          name: generateAnonName(),
-        });
-      }
-    });
-
-    return () => {
-      authUnsubscribe();
-    };
-  }, []);
-
   // Verify that the roomId exists in db
   useEffect(() => {
     const fetchRoomAndVid = async () => {
@@ -53,6 +35,26 @@ const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
     fetchRoomAndVid();
   }, [history, roomId]);
 
+  // Handle logging in
+  useEffect(() => {
+    if (validRoom) {
+      const authUnsubscribe = auth.onAuthStateChanged(async (user) => {
+        if (user) {
+          setUserId(user.uid);
+        } else {
+          const credential = await auth.signInAnonymously();
+          await db.collection('users').doc(credential.user?.uid).set({
+            name: generateAnonName(),
+          });
+        }
+      });
+
+      return () => {
+        authUnsubscribe();
+      };
+    }
+  }, [validRoom]);
+
   // Subscribe RealTimeDB listeners
   useEffect(() => {
     if (userId !== '' && validRoom) {
@@ -76,6 +78,12 @@ const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
             const username = (await db.collection('users').doc(userId).get()).data()?.name;
             await roomRef.child(userId).set({ name: username });
             await roomRef.update({ userCount: increment });
+            await db
+              .collection('rooms')
+              .doc(roomId)
+              .update({
+                requests: arrayUnion({ createdAt: Date.now(), senderId: userId, time: 0, type: 'join' }),
+              });
           }
         });