From aa4934193777b91d81ee4c0d089fc7111b4e8b73 Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Sun, 10 Mar 2024 06:10:39 +0000 Subject: [PATCH] myRooms Working --- frontend-next/package-lock.json | 9 +++ frontend-next/package.json | 1 + frontend-next/src/app/app/page.js | 102 +++++++++++++++++++++--------- 3 files changed, 82 insertions(+), 30 deletions(-) diff --git a/frontend-next/package-lock.json b/frontend-next/package-lock.json index 7d4b26b..3a0c916 100644 --- a/frontend-next/package-lock.json +++ b/frontend-next/package-lock.json @@ -13,6 +13,7 @@ "next": "^14.1.0", "pigeon-maps": "^0.21.3", "react": "^18.2.0", + "react-beforeunload": "^2.6.0", "react-dom": "^18.2.0", "react-hook-form": "^7.50.1" }, @@ -5739,6 +5740,14 @@ "node": ">=0.10.0" } }, + "node_modules/react-beforeunload": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/react-beforeunload/-/react-beforeunload-2.6.0.tgz", + "integrity": "sha512-aKrGaRNc7fZQlDnmSYrXu4cbz9QEPhScA4A2mLxhjcULDy4VILLyLhSEjg2goIw3o5LQ1zss44kmQh5LXWYGCw==", + "peerDependencies": { + "react": "^16.8.0 || 17 || 18" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", diff --git a/frontend-next/package.json b/frontend-next/package.json index 1912fa3..544379a 100644 --- a/frontend-next/package.json +++ b/frontend-next/package.json @@ -14,6 +14,7 @@ "next": "^14.1.0", "pigeon-maps": "^0.21.3", "react": "^18.2.0", + "react-beforeunload": "^2.6.0", "react-dom": "^18.2.0", "react-hook-form": "^7.50.1" }, diff --git a/frontend-next/src/app/app/page.js b/frontend-next/src/app/app/page.js index 07d93c6..ad656e7 100644 --- a/frontend-next/src/app/app/page.js +++ b/frontend-next/src/app/app/page.js @@ -4,6 +4,7 @@ import {Map, Marker, ZoomControl} from "pigeon-maps" import { Form, useForm } from "react-hook-form"; import { app } from "../api/firebase-config"; import { getDatabase, ref, onValue, get, set, remove} from "firebase/database"; +import { useBeforeunload } from 'react-beforeunload'; var database = getDatabase(app) @@ -64,8 +65,12 @@ function Member({memberObj}) { // Chat Room for myRooms and Nearby in sidebar function ChatRoomSidebar({roomObj, click}) { + // TODO: Gross fix but it works +function clicker() { + click(roomObj.name, roomObj) +} return ( -
+
{roomObj.name}
{roomObj.description}
@@ -140,9 +145,9 @@ function MainTabChatRoom({roomObj}) { const [chats, setData] = useState(null) const [isLoading, setLoading] = useState(true) - var unsubscribeUpdater + // Message updater useEffect(() => { - unsubscribeUpdater = onValue(ref(database, `/rooms/${roomObj.path+"/"+roomObj.name+"-"+roomObj.timestamp}/chats`), (snapshot) => { + onValue(ref(database, `/rooms/${roomObj.path+"/"+roomObj.name+"-"+roomObj.timestamp}/chats`), (snapshot) => { var chatsArr = [] var messages = snapshot.val() for (var message in messages) { @@ -195,10 +200,10 @@ function Home() { // State variables for app page const [mainTab, setMainTab] = useState("home") // Primary tab const [tab, setTab] = useState("nearby") // Sidebar Tab - const [loadingUser, setLoadingUser] = useState(true) const [chatRoomObj, setChatRoomObj] = useState(null) // Current chatroom object const [myRooms, setRoomData] = useState(null) // Current user saved rooms list - const [isRoomLoading, setRoomLoading] = useState(true) // myRooms loading variable, true = myrooms loading, false = finished loading + const [isRoomLoading, setRoomLoading] = useState(true) // myRooms loading variable, true = myRooms loading, false = finished loading + const [isMyRoom, setIsMyRoom] = useState(false) // Is current room in myRooms? true, false const [location, setLocation] = useState(null) // location variable [lat,long] const [loadingLoc, setLoadingLoc] = useState(true) // location variable loading, true = loading, false = finished loading const [nearby, setNearby] = useState(null); // nearby rooms array @@ -206,26 +211,7 @@ function Home() { const [chatroomOnline, setChatRoomOnline] = useState(null) // holds online users const [chatroomUsers, setChatroomUsers] = useState(null) // holds all chatroom users const [users, setUsers] = useState(null) // all users from firebase - - // Handles closing the tab and removing the user from the online section - useEffect(() => { - window.addEventListener("beforeunload", (ev) => { - ev.preventDefault(); - fetch('/api/user').then((res) => res.json()) - .then((user) => { - if (chatRoomObj != null) { - var payload = { - body: "left", - user: user.username, - isSystem: true, - timestamp: new Date().getTime() - } - set(ref(database,`/rooms/${chatRoomObj.path+"/"+chatRoomObj.name+"-"+chatRoomObj.timestamp}/chats/${new Date().getTime()}-${user.username}`), payload) - remove(ref(database, `/rooms/${chatRoomObj.path+"/"+chatRoomObj.name+"-"+chatRoomObj.timestamp}/users/online/${user.uid}`)) - } - }) - }); - }, [chatRoomObj]) + const [alreadyLeft, setAlreadyLeft] = useState(false) // if already left from room // Grabs user data, saves to user, then lists the users saved rooms useEffect(() => { @@ -235,7 +221,8 @@ function Home() { var rooms = snapshot.val() var roomArr = [] for (var room in rooms) { - roomArr.push( {selectChatRoom(rooms[room], user)}}/>) + var newRoom = + roomArr.push(newRoom) } setRoomData(roomArr) setRoomLoading(false) @@ -256,7 +243,7 @@ function Home() { if (snapshot.exists()) { var data = snapshot.val() for (var room in data) { - nearbyArr.push( {selectChatRoom(data[room])}}/>) + nearbyArr.push() } setLoadingNearby(false) setNearby(nearbyArr) @@ -310,11 +297,21 @@ function Home() { } // Selects chat room - function selectChatRoom(roomObj) { + function selectChatRoom(roomName, roomObj) { fetch('/api/user').then((res) => res.json()) .then((user) => { // Path of chatroom var path = roomObj.path+"/"+roomObj.name+"-"+roomObj.timestamp + + // Test if Room is in myRooms + if (myRooms != null && roomName in myRooms.keys) { + // its in there + setIsMyRoom(true) + } else { + // its not in there + setIsMyRoom(false) + } + setChatRoomObj(roomObj) // Send entered message @@ -350,6 +347,7 @@ function Home() { }) setMainTab("chat") + setAlreadyLeft(false) }) } @@ -366,10 +364,54 @@ function Home() { } set(ref(database,`/rooms/${path}/chats/${new Date().getTime()}-${user.username}`), payload) remove(ref(database, `/rooms/${path}/users/online/${user.uid}`)) + setChatRoomObj(null) + setAlreadyLeft(true) setMainTab("home") }) } + // Adds room to myRooms + function addToMyRooms() { + fetch('/api/user').then((res) => res.json()) + .then((user) => { + set(ref(database,`/users/${user.uid}/rooms/${chatRoomObj.name}-${chatRoomObj.timestamp}`), { + name: chatRoomObj.name, + path: chatRoomObj.path, + timestamp: chatRoomObj.timestamp, + description: chatRoomObj.description, + longitude: chatRoomObj.longitude, + latitude: chatRoomObj.latitude, + }) + }) + setIsMyRoom(true) + } + + // Deletes saved room from myRooms + function removeFromMyRooms() { + fetch('/api/user').then((res) => res.json()) + .then((user) => { + remove(ref(database,`/users/${user.uid}/rooms/${chatRoomObj.name}-${chatRoomObj.timestamp}`)) + }) + setIsMyRoom(false) + } + + // Fires to tell other uses that you are leaving the room + useBeforeunload(() => { + fetch('/api/user').then((res) => res.json()) + .then((user) => { + if (chatRoomObj && mainTab == "chat") { + var payload = { + body: "left", + user: user.username, + isSystem: true, + timestamp: new Date().getTime() + } + set(ref(database,`/rooms/${chatRoomObj.path+"/"+chatRoomObj.name+"-"+chatRoomObj.timestamp}/chats/${new Date().getTime()}-${user.username}`), payload) + remove(ref(database, `/rooms/${chatRoomObj.path+"/"+chatRoomObj.name+"-"+chatRoomObj.timestamp}/users/online/${user.uid}`)) + } + }) + }); + return (
{/* Left Side of Page */} @@ -380,8 +422,8 @@ function Home() {
- {(mainTab == "chat") && {alert("WIP")}} className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5">Add to "My Rooms"} - {(mainTab == "chat") && {alert("WIP")}} className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5">Remove from "My Rooms"} + {(mainTab == "chat" && isMyRoom == false) && {addToMyRooms()}} className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5">Add to "My Rooms"} + {(mainTab == "chat" && isMyRoom == true) && {removeFromMyRooms()}} className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5">Remove from "My Rooms"} {mainTab == "chat" && {closeChatRoom(chatRoomObj)}} className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5">Close Chat} Sign Out