npease/ChatMaps
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Split chat into page

Browse Source
This commit is contained in:
Nicholas Pease
2024-03-31 02:28:57 +00:00
parent c4292fdd33
commit d81ba003e0
9 changed files with 197 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-next/package-lock.json
Generated
+10
View File
@@ -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",
frontend-next/package.json
+1
View File
@@ -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": {
frontend-next/src/app/app/page.js
+3 -1
View File
@@ -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(() => {
frontend-next/src/app/chat/layout.js
+17
View File
@@ -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 (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
frontend-next/src/app/chat/page.js
+99
View File
@@ -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 (
<div>
{(authUser && doneLoading) && (
<div className="grid grid-cols-4 auto-cols-max overflow-hidden">
{/* Left Side of Page */}
<div className="col-span-3 h-dvh">
{/* Header */}
<Header
mainTab={"chat"}
chatRoomObj={chatRoomObj}
user={user}
/>
{/* Main Page Section */}
<div className="mr-2 h-[calc(100%-110px)]">
<MainTabChatRoom roomObj={chatRoomObj} user={user} />
</div>
</div>
{/* Sidebar (Right Side of Page) */}
<Chat_Sidebar
chatRoomObj={chatRoomObj}
chatroomUsersLoading={false}
/>
</div>
)}
</div>
);
}
export default Home;
frontend-next/src/components/app/header.js
+21 -14
View File
@@ -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 (
<div className="flex m-2 rounded-lg h-[63px] bg-white shadow-2xl p-1">
<div className="flex shrink h-[60px]">
@@ -85,7 +90,8 @@ export function Header({
{mainTab == "chat" && isMyRoom == false && (
<a
onClick={() => {
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 && (
<a
onClick={() => {
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" && (
<a
onClick={() => {
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"
>
frontend-next/src/components/app/main_tab/chat.js
+20 -35
View File
@@ -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(
<SystemMessage
chatObj={messages[message]}
key={messages[message].timestamp}
/>
);
} else {
chatsArr.push(
<Chat
chatObj={messages[message]}
key={messages[message].timestamp}
/>
);
}
}
setData(chatsArr.reverse());
setLoading(false);
}
);
});
var chatsArr = [];
var messages = roomObj.chats;
for (var message in messages) {
if (messages[message].isSystem) {
chatsArr.push(
<SystemMessage
chatObj={messages[message]}
key={messages[message].timestamp}
/>
);
} else {
chatsArr.push(
<Chat
chatObj={messages[message]}
key={messages[message].timestamp}
/>
);
}
}
var chats = chatsArr.reverse();
function sendMessage(data) {
reset();
@@ -65,7 +51,6 @@ export function MainTabChatRoom({ roomObj, user }) {
);
}
if (isLoading) return <div>Loading</div>;
if (!chats) return <div>No Chats</div>;
return (
<div className="m-1 h-[100%] rounded-lg">
frontend-next/src/components/app/notifications/notifications.js
View File
frontend-next/src/components/app/sidebar/chat.js
+26 -4
View File
@@ -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(<Member memberObj={activeUsersJSON[user]} />);
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(<Member memberObj={allUsersJSON[user]} />);
var chatroomUsers = allUsers
}
return (
<div className="h-dvh">
<div className="m-2 h-[98%] grid grid-cols-1">
@@ -34,7 +56,7 @@ export function Chat_Sidebar({
</div>
<div className="bg-white rounded-lg m-2 shadow-2xl">
<div>All Members</div>
{!chatroomUsersLoading && chatroomUsers}
{chatroomUsers}
</div>
</div>
</div>