diff --git a/frontend-next/package-lock.json b/frontend-next/package-lock.json index e515ae0..efb0f01 100644 --- a/frontend-next/package-lock.json +++ b/frontend-next/package-lock.json @@ -15,6 +15,7 @@ "react": "^18.2.0", "react-beforeunload": "^2.6.0", "react-dom": "^18.2.0", + "react-firebase-hooks": "^5.1.1", "react-hook-form": "^7.50.1" }, "devDependencies": { @@ -4555,6 +4556,15 @@ "react": "^18.2.0" } }, + "node_modules/react-firebase-hooks": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/react-firebase-hooks/-/react-firebase-hooks-5.1.1.tgz", + "integrity": "sha512-y2UpWs82xs+39q5Rc/wq316ca52QsC0n8m801V+yM4IC4hbfOL4yQPVSh7w+ydstdvjN9F+lvs1WrO2VYxpmdA==", + "peerDependencies": { + "firebase": ">= 9.0.0", + "react": ">= 16.8.0" + } + }, "node_modules/react-hook-form": { "version": "7.51.1", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.1.tgz", diff --git a/frontend-next/package.json b/frontend-next/package.json index 17528e8..40f1451 100644 --- a/frontend-next/package.json +++ b/frontend-next/package.json @@ -16,6 +16,7 @@ "react": "^18.2.0", "react-beforeunload": "^2.6.0", "react-dom": "^18.2.0", + "react-firebase-hooks": "^5.1.1", "react-hook-form": "^7.50.1" }, "devDependencies": { diff --git a/frontend-next/src/app/app/page.js b/frontend-next/src/app/app/page.js index 30ccac9..6ca519e 100644 --- a/frontend-next/src/app/app/page.js +++ b/frontend-next/src/app/app/page.js @@ -27,6 +27,9 @@ import { Profile_Sidebar } from "../../components/app/sidebar/profile"; function Home() { // It's time to document and change these awful variable names // State variables for app page + const [user, setUser] = useState(null); + + const [mainTab, setMainTab] = useState("home"); // Primary tab const [tab, setTab] = useState("nearby"); // Sidebar Tab const [chatRoomObj, setChatRoomObj] = useState(null); // Current chatroom object @@ -43,7 +46,6 @@ function Home() { const [chatroomUsersLoading, setChatroomUsersLoading] = useState(true); const [markers, setMarkers] = useState([]); const [isAuthenticated, setIsAuthenticated] = useState(false); - const [user, setUser] = useState(null); const [usingSearchParams, setUsingSearchParams] = useState(true); useEffect(() => { diff --git a/frontend-next/src/app/chat/layout.js b/frontend-next/src/app/chat/layout.js new file mode 100644 index 0000000..6078cf8 --- /dev/null +++ b/frontend-next/src/app/chat/layout.js @@ -0,0 +1,17 @@ +import { Inter } from "next/font/google"; +import "../globals.css"; + +const inter = Inter({ subsets: ["latin"] }); + +export const metadata = { + title: "ChatMaps: Chat", + description: "ChatMaps: Social Media for College Students", +}; + +export default function RootLayout({ children }) { + return ( + + {children} + + ); +} diff --git a/frontend-next/src/app/chat/page.js b/frontend-next/src/app/chat/page.js new file mode 100644 index 0000000..8ca0d8a --- /dev/null +++ b/frontend-next/src/app/chat/page.js @@ -0,0 +1,99 @@ +"use client"; +// System Imports +import { useState, useEffect } from "react"; +import { auth, database } from "../../../firebase-config"; +import { ref, onValue, set } from "firebase/database"; +import { useAuthState } from "react-firebase-hooks/auth" + +// Header Import +import { Header } from "../../components/app/header"; + +// Main Tab Imports +import { MainTabChatRoom } from "../../components/app/main_tab/chat"; + +// Sidebar Imports +import { Chat_Sidebar } from "../../components/app/sidebar/chat"; + +// Contains most everything for the app homepage +function Home() { + // It's time to document and change these awful variable names + // State variables for app page + const [user, setUser] = useState(null); + const [chatRoomObj, setChatRoomObj] = useState(null); // Current chatroom object + const [doneLoading, setDoneLoading] = useState(false) + const [authUser, loading] = useAuthState(auth) + + useEffect(() => { + if (authUser) { + onValue(ref(database, `users/${authUser.uid}`), (userData) => { + userData = userData.val(); + if (userData) { + setUser(userData); + } else { + window.location.href = "/onboarding"; + } + }); + } + }, [authUser]) + + + useEffect(() => { + if (user) { + const searchParams = new URLSearchParams(document.location.search); + var path = searchParams.get("room") + + // Send entered message + var payload = { + body: "entered", + user: user.username, + isSystem: true, + timestamp: new Date().getTime(), + uid: user.uid, + }; + set( + ref( + database, + `/rooms/${path}/chats/${new Date().getTime()}-${user.username}` + ), + payload + ); + + onValue(ref(database, `/rooms/${path}`), (roomData) => { + roomData = roomData.val(); + setChatRoomObj(roomData) + if (!doneLoading) { + setDoneLoading(true) + } + }) + } + }, [user]); + + return ( +
+ {(authUser && doneLoading) && ( +
+ {/* Left Side of Page */} +
+ {/* Header */} +
+ {/* Main Page Section */} +
+ +
+
+ {/* Sidebar (Right Side of Page) */} + +
+ )} +
+ ); +} + +export default Home; \ No newline at end of file diff --git a/frontend-next/src/components/app/header.js b/frontend-next/src/components/app/header.js index 5cd8b9c..aecea67 100644 --- a/frontend-next/src/components/app/header.js +++ b/frontend-next/src/components/app/header.js @@ -2,13 +2,15 @@ import { auth, database } from "../../../firebase-config"; import { ref, set, remove } from "firebase/database"; import { signOut } from "firebase/auth"; import { Popover } from "@headlessui/react"; +import { useState, useEffect } from "react"; + function logout() { signOut(auth); } // Closes chat room -function closeChatRoom(roomObj, setChatRoomObj, setMainTab, user) { +function closeChatRoom(roomObj, user) { var path = roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp; var payload = { body: "left", @@ -25,12 +27,11 @@ function closeChatRoom(roomObj, setChatRoomObj, setMainTab, user) { payload ); remove(ref(database, `/rooms/${path}/users/online/${user.uid}`)); - setChatRoomObj(null); - setMainTab("home"); + location.href = "/app"; } // Adds room to myRooms -function addToMyRooms(chatRoomObj, setIsMyRoom, user) { +function addToMyRooms(chatRoomObj, user) { set( ref( database, @@ -48,11 +49,10 @@ function addToMyRooms(chatRoomObj, setIsMyRoom, user) { var path = chatRoomObj.path + "/" + chatRoomObj.name + "-" + chatRoomObj.timestamp; set(ref(database, `/rooms/${path}/users/all/${user.uid}`), user); - setIsMyRoom(true); } // Deletes saved room from myRooms -function removeFromMyRooms(chatRoomObj, setIsMyRoom, user) { +function removeFromMyRooms(chatRoomObj, user) { var path = chatRoomObj.path + "/" + chatRoomObj.name + "-" + chatRoomObj.timestamp; remove( @@ -62,18 +62,23 @@ function removeFromMyRooms(chatRoomObj, setIsMyRoom, user) { ) ); remove(ref(database, `/rooms/${path}/users/all/${user.uid}`)); - setIsMyRoom(false); } export function Header({ mainTab, - isMyRoom, chatRoomObj, - setChatRoomObj, - setMainTab, - setIsMyRoom, user, }) { + + var roomName = chatRoomObj.name + "-" + chatRoomObj.timestamp; + if (user.rooms != null && roomName in user.rooms) { + // its in there + var isMyRoom = true; + } else { + // its not in there + var isMyRoom = false; + } + return (
@@ -85,7 +90,8 @@ export function Header({ {mainTab == "chat" && isMyRoom == false && ( { - addToMyRooms(chatRoomObj, setIsMyRoom, user); + addToMyRooms(chatRoomObj, user); + }} className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center" > @@ -95,7 +101,8 @@ export function Header({ {mainTab == "chat" && isMyRoom == true && ( { - removeFromMyRooms(chatRoomObj, setIsMyRoom, user); + removeFromMyRooms(chatRoomObj, user); + }} className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center" > @@ -105,7 +112,7 @@ export function Header({ {mainTab == "chat" && ( { - closeChatRoom(chatRoomObj, setChatRoomObj, setMainTab, user); + closeChatRoom(chatRoomObj, user); }} className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center" > diff --git a/frontend-next/src/components/app/main_tab/chat.js b/frontend-next/src/components/app/main_tab/chat.js index 5559f77..32ad921 100644 --- a/frontend-next/src/components/app/main_tab/chat.js +++ b/frontend-next/src/components/app/main_tab/chat.js @@ -7,43 +7,29 @@ import { database } from "../../../../firebase-config"; // Chatroom Module for Primary Tab export function MainTabChatRoom({ roomObj, user }) { var { register, control, reset, handleSubmit } = useForm(); - const [chats, setData] = useState(null); const [isLoading, setLoading] = useState(true); // Message updater - useEffect(() => { - onValue( - ref( - database, - `/rooms/${ - roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp - }/chats` - ), - (snapshot) => { - var chatsArr = []; - var messages = snapshot.val(); - for (var message in messages) { - if (messages[message].isSystem) { - chatsArr.push( - - ); - } else { - chatsArr.push( - - ); - } - } - setData(chatsArr.reverse()); - setLoading(false); - } - ); - }); + var chatsArr = []; + var messages = roomObj.chats; + for (var message in messages) { + if (messages[message].isSystem) { + chatsArr.push( + + ); + } else { + chatsArr.push( + + ); + } + } + var chats = chatsArr.reverse(); function sendMessage(data) { reset(); @@ -65,7 +51,6 @@ export function MainTabChatRoom({ roomObj, user }) { ); } - if (isLoading) return
Loading
; if (!chats) return
No Chats
; return (
diff --git a/frontend-next/src/components/app/notifications/notifications.js b/frontend-next/src/components/app/notifications/notifications.js new file mode 100644 index 0000000..e69de29 diff --git a/frontend-next/src/components/app/sidebar/chat.js b/frontend-next/src/components/app/sidebar/chat.js index 36660c9..bb3f25d 100644 --- a/frontend-next/src/components/app/sidebar/chat.js +++ b/frontend-next/src/components/app/sidebar/chat.js @@ -1,12 +1,34 @@ import { Geo } from "../map/geo"; +import { Member } from "../datatypes" + // Sidebar when in a Chatrooms export function Chat_Sidebar({ chatRoomObj, - chatroomOnline, - chatroomUsersLoading, - chatroomUsers, }) { + // Active users list + if ( + chatRoomObj.hasOwnProperty("users") && + chatRoomObj.users.hasOwnProperty("online") + ) { + var activeUsers = []; + var activeUsersJSON = chatRoomObj.users.online; + for (var user in activeUsersJSON) + activeUsers.push(); + var chatroomOnline = activeUsers + } + + // Users who added to "my rooms" + if ( + chatRoomObj.hasOwnProperty("users") && + chatRoomObj.users.hasOwnProperty("all") + ) { + var allUsers = []; + var allUsersJSON = chatRoomObj.users.all; + for (var user in allUsersJSON) + allUsers.push(); + var chatroomUsers = allUsers + } return (
@@ -34,7 +56,7 @@ export function Chat_Sidebar({
All Members
- {!chatroomUsersLoading && chatroomUsers} + {chatroomUsers}