Restore Rooms User Leave/Enter Status (#59)

frontend-next/src/app/chat/page.js

@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 
 // Firebase Imports
 import { auth, database } from "../../../firebase-config";
-import { ref, onValue, set } from "firebase/database";
+import { ref, onValue, set, onDisconnect, serverTimestamp  } from "firebase/database";
 import { useAuthState } from "react-firebase-hooks/auth"
 
 // Component Imports
@@ -43,7 +43,7 @@ function Chat() {
         const searchParams = new URLSearchParams(document.location.search);
         var path = searchParams.get("room")
 
-        // Send entered message
+        /*// Send entered message
         var payload = {
             body: "entered",
             user: user.username,
@@ -57,7 +57,23 @@ function Chat() {
             `/rooms/${path}/chats/${new Date().getTime()}-${user.username}`
             ),
             payload
-        );
+        );*/
+
+        // Add user to online for room
+        set(ref(database, `/rooms/${path}/users/online/${user.uid}`), user)
+
+        // Removes user from room on disconnect (reload, window close, internet lost)
+        onDisconnect(ref(database, `/rooms/${path}/users/online/${user.uid}`)).remove()
+
+        // Sends leaving message on disconnect (Timestamp function used due to new onDisconnect stuff)
+        /*someRef = ref(database, `/rooms/${path}/chats/${new Date().getTime()}-${user.username}`)
+        onDisconnect(someRef).set({
+          body: "left",
+          user: user.username,
+          isSystem: true,
+          timestamp: serverTimestamp(),
+          uid: user.uid,
+        })*/
 
         onValue(ref(database, `/rooms/${path}`), (roomData) => {
             roomData = roomData.val();

frontend-next/src/components/app/header.js

@@ -10,28 +10,13 @@ import { NotificationPanel } from "./notifications/notifications";
 import { ProfilePanel } from "./profile/ProfilePanel"
 
 /**
- * Closes Open Chat Room
- * @param {JSON} roomObj - Room Object
+ * Closes Chat
+ * @param {JSON} chatRoomObj - Chat Room Object
  * @param {JSON} user - User Object
  * @returns {void}
  */
-function closeChatRoom(roomObj, user) {
-  var path = roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp;
-  var payload = {
-    body: "left",
-    user: user.username,
-    isSystem: true,
-    timestamp: new Date().getTime(),
-    uid: user.uid,
-  };
-  set(
-    ref(
-      database,
-      `/rooms/${path}/chats/${new Date().getTime()}-${user.username}`
-    ),
-    payload
-  );
-  remove(ref(database, `/rooms/${path}/users/online/${user.uid}`));
+function closeChat(chatRoomObj, user) {
+  remove(ref(database, `/rooms/${chatRoomObj.path}/${chatRoomObj.name}-${chatRoomObj.timestamp}/users/online/${user.uid}`))
 }
 
 /**
@@ -129,11 +114,9 @@ export function Header({mainTab,chatRoomObj,user,}) {
         )}
         {mainTab == "chat" && (
           <Link
-            onClick={() => {
-              closeChatRoom(chatRoomObj, user);
-            }}
             href="/app"
             className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center"
+            onClick={() => {closeChat(chatRoomObj,user)}}
           >
             Close Chat
           </Link>