Firebase Optimization

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

@@ -5,7 +5,7 @@ import { useState, useEffect } from "react";
 
 // Firebase Imports
 import { auth, database } from "../../../firebase-config";
-import { ref, onValue, set, onDisconnect  } from "firebase/database";
+import { ref, onValue, set, onDisconnect, get, onChildAdded, onChildRemoved  } from "firebase/database";
 import { useAuthState } from "react-firebase-hooks/auth"
 
 // Component Imports
@@ -90,13 +90,35 @@ function Chat() {
           uid: user.uid,
         })*/
 
-        onValue(ref(database, `/rooms/${path}`), (roomData) => {
+        // Room Object Load
+        get(ref(database, `/rooms/${path}`)).then((roomData) => {
             roomData = roomData.val();
             setChatRoomObj(roomData)
+            onChildAdded(ref(database, `/rooms/${path}/chats`), (newChat) => {
+              var newChatRoomObj = chatRoomObj
+              if (newChatRoomObj) {
+                if (!newChatRoomObj.chats) {
+                  newChatRoomObj.chats = {}
+                }
+                newChatRoomObj.chats[newChat.key] = newChat.val()
+                setChatRoomObj({...newChatRoomObj})
+              }
+
+            });
+            onChildRemoved(ref(database, `/rooms/${path}/chats`), (removed) => {
+              if (chatRoomObj) {
+                var newChatRoomObj = chatRoomObj
+                var deleted = removed.val()
+                delete newChatRoomObj.chats[`${deleted.timestamp}-${deleted.user}`]
+                setChatRoomObj({...newChatRoomObj})
+              }
+            });
             if (!doneLoading) {
                 setDoneLoading(true)
             }
         })
+
+        
     }
   }, [user]);
 

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

@@ -5,7 +5,7 @@ import { useState, useEffect } from "react";
 
 // Firebase Imports
 import { auth, database } from "../../../firebase-config";
-import { ref, onValue, set, onDisconnect  } from "firebase/database";
+import { ref, onValue, set, onDisconnect, get, onChildAdded, onChildRemoved } from "firebase/database";
 import { useAuthState } from "react-firebase-hooks/auth"
 
 // Component Imports
@@ -94,12 +94,32 @@ function Chat() {
           uid: user.uid,
         })*/
 
-        onValue(ref(database, `/dms/${path}`), (roomData) => {
-            roomData = roomData.val();
-            setChatRoomObj(roomData)
-            if (!doneLoading) {
-                setDoneLoading(true)
+        // Room Object Load
+        get(ref(database, `/dms/${path}`)).then((roomData) => {
+          roomData = roomData.val();
+          setChatRoomObj(roomData)
+          onChildAdded(ref(database, `/dms/${path}/chats`), (newDM) => {
+            var newDMRoomObj = chatRoomObj
+            if (newDMRoomObj) {
+              if (!newDMRoomObj.chats) {
+                newDMRoomObj.chats = {}
+              }
+              newDMRoomObj.chats[newDM.key] = newDM.val()
+              setChatRoomObj({...newDMRoomObj})
             }
+
+          });
+          onChildRemoved(ref(database, `/dms/${path}/chats`), (removed) => {
+            if (chatRoomObj) {
+              var newDMRoomObj = chatRoomObj
+              var deleted = removed.val()
+              delete newDMRoomObj.chats[`${deleted.timestamp}-${deleted.user}`]
+              setChatRoomObj({...newDMRoomObj})
+            }
+          });
+          if (!doneLoading) {
+              setDoneLoading(true)
+          }
         })
     }
   }, [user]);

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

@@ -63,9 +63,7 @@ export function ChatRoom({ roomObj, user }) {
       set(
         ref(
           database,
-          `/rooms/${
-            roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp
-          }/chats/${new Date().getTime()}-${user.username}`
+          `/rooms/${roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp}/chats/${new Date().getTime()}-${user.username}`
         ),
         payload
       );