Refactor / Lag Fix #54
@@ -3,6 +3,7 @@
|
||||
"rules": {
|
||||
"no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
|
||||
"jsx-a11y/alt-text": "off",
|
||||
"@next/next/no-img-element": "off"
|
||||
"@next/next/no-img-element": "off",
|
||||
"no-console": "on",
|
||||
}
|
||||
}
|
||||
|
||||
Generated
+19
@@ -15,6 +15,8 @@
|
||||
"react": "^18.2.0",
|
||||
"react-beforeunload": "^2.6.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-firebase-hooks": "^5.1.1",
|
||||
"react-geolocated": "^4.1.2",
|
||||
"react-hook-form": "^7.50.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -4555,6 +4557,23 @@
|
||||
"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-geolocated": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/react-geolocated/-/react-geolocated-4.1.2.tgz",
|
||||
"integrity": "sha512-/Ec26Wb1h06bB/axHYclBxrG0Yqob0T0W9awRi87cyedC3rMnpOR+Aqb7Q26FAEF+dNWXIpVDGNw1YZtlPUAEw==",
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.8.0 < 19.0.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",
|
||||
|
||||
@@ -16,6 +16,8 @@
|
||||
"react": "^18.2.0",
|
||||
"react-beforeunload": "^2.6.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-firebase-hooks": "^5.1.1",
|
||||
"react-geolocated": "^4.1.2",
|
||||
"react-hook-form": "^7.50.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -2,336 +2,81 @@
|
||||
// System Imports
|
||||
import { useState, useEffect } from "react";
|
||||
import { auth, database } from "../../../firebase-config";
|
||||
import { ref, onValue, set, remove, get } from "firebase/database";
|
||||
import { useBeforeunload } from "react-beforeunload";
|
||||
import { Marker } from "pigeon-maps";
|
||||
import { onAuthStateChanged } from "firebase/auth";
|
||||
|
||||
// Refactored Component Imports
|
||||
// Data Structure Imports
|
||||
import { ChatRoomSidebar, Member } from "../../components/app/datatypes";
|
||||
import { ref, onValue } from "firebase/database";
|
||||
import { useAuthState } from "react-firebase-hooks/auth"
|
||||
import { useGeolocated } from "react-geolocated";
|
||||
|
||||
// Header Import
|
||||
import { Header } from "../../components/app/header";
|
||||
|
||||
// Main Tab Imports
|
||||
import { MainTabChatRoom } from "../../components/app/main_tab/chat";
|
||||
import { MainTabHome } from "../../components/app/main_tab/home";
|
||||
|
||||
// Sidebar Imports
|
||||
import { Home_Sidebar } from "../../components/app/sidebar/home";
|
||||
import { Chat_Sidebar } from "../../components/app/sidebar/chat";
|
||||
import { Profile_Sidebar } from "../../components/app/sidebar/profile";
|
||||
|
||||
// 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 [mainTab, setMainTab] = useState("home"); // Primary tab
|
||||
const [tab, setTab] = useState("nearby"); // Sidebar Tab
|
||||
const [chatRoomObj, setChatRoomObj] = useState(null); // Current chatroom object
|
||||
const [myRoomsObj, setMyRoomsObj] = useState(null); // My Rooms Object
|
||||
const [roomData, setRoomData] = useState(null); // Current user saved rooms list
|
||||
const [isRoomLoading, setIsRoomLoading] = 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
|
||||
const [loadingNearby, setLoadingNearby] = useState(true); // loading nearby rooms array, true = loading, false = finished loading
|
||||
const [chatroomOnline, setChatroomOnline] = useState(null); // holds online users
|
||||
const [chatroomUsers, setChatroomUsers] = useState(null); // holds all chatroom users
|
||||
const [chatroomUsersLoading, setChatroomUsersLoading] = useState(true);
|
||||
const [markers, setMarkers] = useState([]);
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const [user, setUser] = useState(null);
|
||||
const [usingSearchParams, setUsingSearchParams] = useState(true);
|
||||
const [loadingLoc, setLoadingLoc] = useState(true); // location variable loading, true = loading, false = finished loading
|
||||
const [authUser, loading] = useAuthState(auth)
|
||||
|
||||
useEffect(() => {
|
||||
const searchParams = new URLSearchParams(document.location.search);
|
||||
var roomSwitch = null;
|
||||
if (searchParams.has("room") && usingSearchParams && user) {
|
||||
roomSwitch = searchParams.get("room");
|
||||
setUsingSearchParams(false);
|
||||
get(ref(database, `rooms/${searchParams.get("room")}`)).then(
|
||||
(snapshot) => {
|
||||
selectChatRoom(snapshot.val());
|
||||
}
|
||||
);
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
// Authentication
|
||||
useEffect(() => {
|
||||
onAuthStateChanged(auth, (user) => {
|
||||
if (user) {
|
||||
get(ref(database, `users/${user.uid}`)).then((userData) => {
|
||||
userData = userData.val();
|
||||
if (userData) {
|
||||
setUser(userData);
|
||||
setIsAuthenticated(true);
|
||||
} else {
|
||||
window.location.href = "/onboarding";
|
||||
}
|
||||
});
|
||||
} else {
|
||||
setIsAuthenticated(false);
|
||||
window.location.href = "/login";
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Grabs user data, saves to user, then lists the users saved rooms
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
onValue(ref(database, "/users/" + user.uid + "/rooms"), (snapshot) => {
|
||||
setIsRoomLoading(true);
|
||||
var rooms = snapshot.val();
|
||||
setMyRoomsObj(rooms);
|
||||
var roomArr = [];
|
||||
var markerArr = markers;
|
||||
for (var room in rooms) {
|
||||
var newRoom = (
|
||||
<ChatRoomSidebar
|
||||
roomObj={rooms[room]}
|
||||
key={rooms[room].timestamp}
|
||||
click={selectChatRoom}
|
||||
/>
|
||||
);
|
||||
markerArr.push(
|
||||
<Marker
|
||||
width={30}
|
||||
anchor={[rooms[room].latitude, rooms[room].longitude]}
|
||||
color="blue"
|
||||
onClick={() =>
|
||||
(window.location.href =
|
||||
"/app?room=" +
|
||||
rooms[room].path +
|
||||
"/" +
|
||||
rooms[room].name +
|
||||
"-" +
|
||||
rooms[room].timestamp)
|
||||
}
|
||||
/>
|
||||
);
|
||||
roomArr.push(newRoom);
|
||||
}
|
||||
setMarkers(markerArr);
|
||||
setRoomData(roomArr);
|
||||
setIsRoomLoading(false);
|
||||
});
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
// Grabs the user location
|
||||
useEffect(() => {
|
||||
if ("geolocation" in navigator && user) {
|
||||
// Retrieve latitude & longitude coordinates from `navigator.geolocation` Web API
|
||||
navigator.geolocation.getCurrentPosition(({ coords }) => {
|
||||
setLocation(coords);
|
||||
setLoadingLoc(false);
|
||||
var path =
|
||||
String(coords.latitude.toFixed(2)).replace(".", "") +
|
||||
"/" +
|
||||
String(coords.longitude.toFixed(2)).replace(".", "");
|
||||
var markersArr = markers;
|
||||
onValue(ref(database, `/rooms/${path}`), (snapshot) => {
|
||||
var nearbyArr = [];
|
||||
if (snapshot.exists()) {
|
||||
var data = snapshot.val();
|
||||
for (var room in data) {
|
||||
nearbyArr.push(
|
||||
<ChatRoomSidebar roomObj={data[room]} click={selectChatRoom} />
|
||||
);
|
||||
// TODO: RANDOM LAST DIGIT TO MOVE AROUND THE MAP
|
||||
markersArr.push(
|
||||
<Marker
|
||||
width={30}
|
||||
anchor={[data[room].latitude, data[room].longitude]}
|
||||
color="blue"
|
||||
onClick={() =>
|
||||
(window.location.href =
|
||||
"/app?room=" +
|
||||
data[room].path +
|
||||
"/" +
|
||||
data[room].name +
|
||||
"-" +
|
||||
data[room].timestamp)
|
||||
}
|
||||
/>
|
||||
);
|
||||
if (authUser) {
|
||||
onValue(ref(database, `users/${authUser.uid}`), (userData) => {
|
||||
userData = userData.val();
|
||||
if (userData) {
|
||||
setUser(userData);
|
||||
} else {
|
||||
window.location.href = "/onboarding";
|
||||
}
|
||||
setMarkers(markersArr);
|
||||
setLoadingNearby(false);
|
||||
setNearby(nearbyArr);
|
||||
} else {
|
||||
setLoadingNearby(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}, [user]);
|
||||
}, [authUser])
|
||||
|
||||
const { coords } =
|
||||
useGeolocated({
|
||||
positionOptions: {
|
||||
enableHighAccuracy: false,
|
||||
},
|
||||
userDecisionTimeout: 5000,
|
||||
});
|
||||
|
||||
// Dont Double Send Leaving Message
|
||||
useEffect(() => {
|
||||
if (myRoomsObj && chatRoomObj) {
|
||||
var roomName = chatRoomObj.name + "-" + chatRoomObj.timestamp;
|
||||
if (roomData != null && roomName in myRoomsObj) {
|
||||
// its in there
|
||||
setIsMyRoom(true);
|
||||
} else {
|
||||
// its not in there
|
||||
setIsMyRoom(false);
|
||||
}
|
||||
if (coords) {
|
||||
setLoadingLoc(false);
|
||||
}
|
||||
}, [chatRoomObj]);
|
||||
|
||||
// Selects chat room
|
||||
function selectChatRoom(roomObj) {
|
||||
// Path of chatroom
|
||||
var path = roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp;
|
||||
|
||||
setChatRoomObj(roomObj);
|
||||
|
||||
// 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
|
||||
);
|
||||
|
||||
// Code for Room Data
|
||||
set(ref(database, `/rooms/${path}/users/online/${user.uid}`), user);
|
||||
onValue(ref(database, `/rooms/${path}`), (snapshot) => {
|
||||
setChatroomOnline(null);
|
||||
setChatroomUsers(null);
|
||||
|
||||
// Active users list
|
||||
if (
|
||||
snapshot.val().hasOwnProperty("users") &&
|
||||
snapshot.val().users.hasOwnProperty("online")
|
||||
) {
|
||||
var activeUsers = [];
|
||||
var activeUsersJSON = snapshot.val().users.online;
|
||||
for (var user in activeUsersJSON)
|
||||
activeUsers.push(<Member memberObj={activeUsersJSON[user]} />);
|
||||
setChatroomOnline(activeUsers);
|
||||
}
|
||||
|
||||
// Users who added to "my rooms"
|
||||
if (
|
||||
snapshot.val().hasOwnProperty("users") &&
|
||||
snapshot.val().users.hasOwnProperty("all")
|
||||
) {
|
||||
setChatroomUsersLoading(true);
|
||||
var allUsers = [];
|
||||
var allUsersJSON = snapshot.val().users.all;
|
||||
for (var user in allUsersJSON)
|
||||
allUsers.push(<Member memberObj={allUsersJSON[user]} />);
|
||||
setChatroomUsers(allUsers);
|
||||
setChatroomUsersLoading(false);
|
||||
}
|
||||
});
|
||||
setMainTab("chat");
|
||||
}
|
||||
|
||||
// Fires to tell other uses that you are leaving the room
|
||||
useBeforeunload(() => {
|
||||
if (chatRoomObj && mainTab == "chat") {
|
||||
var payload = {
|
||||
body: "left",
|
||||
user: user.username,
|
||||
isSystem: true,
|
||||
timestamp: new Date().getTime(),
|
||||
uid: user.uid,
|
||||
};
|
||||
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/${userID}`
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
}, [coords])
|
||||
|
||||
return (
|
||||
<div>
|
||||
{isAuthenticated && (
|
||||
{user && (
|
||||
<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={mainTab}
|
||||
isMyRoom={isMyRoom}
|
||||
chatRoomObj={chatRoomObj}
|
||||
setChatRoomObj={setChatRoomObj}
|
||||
setMainTab={setMainTab}
|
||||
setIsMyRoom={setIsMyRoom}
|
||||
mainTab={"home"}
|
||||
user={user}
|
||||
/>
|
||||
{/* Main Page Section */}
|
||||
<div className="mr-2 h-[calc(100%-110px)]">
|
||||
{mainTab == "home" && !loadingLoc && (
|
||||
<MainTabHome loc={location} markers={markers} user={user} />
|
||||
{!loadingLoc && (
|
||||
<MainTabHome loc={coords} user={user} />
|
||||
)}
|
||||
{mainTab == "home" && loadingLoc && (
|
||||
<MainTabHome loc={null} markers={markers} user={user} />
|
||||
)}
|
||||
{mainTab == "chat" && (
|
||||
<MainTabChatRoom roomObj={chatRoomObj} user={user} />
|
||||
{loadingLoc && (
|
||||
<MainTabHome loc={null} user={user} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Sidebar (Right Side of Page) */}
|
||||
{mainTab == "home" && (
|
||||
<Home_Sidebar
|
||||
tab={tab}
|
||||
nearby={nearby}
|
||||
loadingNearby={loadingNearby}
|
||||
setTab={setTab}
|
||||
isRoomLoading={isRoomLoading}
|
||||
myRooms={roomData}
|
||||
user={user}
|
||||
location={coords}
|
||||
loadingLoc={loadingLoc}
|
||||
location={location}
|
||||
/>
|
||||
)}
|
||||
{mainTab == "chat" && (
|
||||
<Chat_Sidebar
|
||||
chatRoomObj={chatRoomObj}
|
||||
chatroomOnline={chatroomOnline}
|
||||
chatroomUsersLoading={chatroomUsersLoading}
|
||||
chatroomUsers={chatroomUsers}
|
||||
/>
|
||||
)}
|
||||
{mainTab == "profile" && <Profile_Sidebar />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
"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}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
@@ -9,13 +9,11 @@ function Home() {
|
||||
const [isLoadingLoc, setLoadingLoc] = useState(true);
|
||||
const [roomCount, setRoomCount] = useState(null);
|
||||
const [isAuthenticated, setAuth] = useState(false);
|
||||
const [userID, setUserID] = useState(null);
|
||||
|
||||
// Authentication
|
||||
useEffect(() => {
|
||||
onAuthStateChanged(auth, (user) => {
|
||||
if (user) {
|
||||
setUserID(user.uid);
|
||||
setAuth(true);
|
||||
} else {
|
||||
setAuth(false);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
"use client";
|
||||
// System Imports
|
||||
import { useState, useEffect } from "react";
|
||||
import { auth, database, storage } from "../../../../firebase-config";
|
||||
import { ref, onValue, get, update } from "firebase/database";
|
||||
import { auth, database } from "../../../../firebase-config";
|
||||
import { ref, onValue, get } from "firebase/database";
|
||||
import { onAuthStateChanged } from "firebase/auth";
|
||||
|
||||
// Refactored Component Imports
|
||||
|
||||
@@ -102,14 +102,10 @@ export function Member({ memberObj }) {
|
||||
}
|
||||
|
||||
// Chat Room Object for myRooms and Nearby in sidebar
|
||||
export function ChatRoomSidebar({ roomObj, click }) {
|
||||
// TODO: Gross fix but it works
|
||||
function clicker() {
|
||||
click(roomObj);
|
||||
}
|
||||
export function ChatRoomSidebar({ roomObj }) {
|
||||
return (
|
||||
<div
|
||||
onClick={clicker}
|
||||
onClick={() => location.href = "/chat?room=" + roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp}
|
||||
className="border-[black] border-1 shadow-lg p-2 m-2 rounded-lg cursor-pointer"
|
||||
>
|
||||
<div className="col-span-2">
|
||||
|
||||
@@ -3,12 +3,13 @@ import { ref, set, remove } from "firebase/database";
|
||||
import { signOut } from "firebase/auth";
|
||||
import { Popover } from "@headlessui/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 +26,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 +48,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 +61,25 @@ 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,
|
||||
}) {
|
||||
|
||||
if (mainTab == "chat") {
|
||||
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 +91,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 +102,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 +113,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"
|
||||
>
|
||||
|
||||
@@ -1,49 +1,34 @@
|
||||
import { Chat, SystemMessage } from "../datatypes";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import { Form, useForm } from "react-hook-form";
|
||||
import { ref, onValue, set } from "firebase/database";
|
||||
import { ref, set } from "firebase/database";
|
||||
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 +50,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">
|
||||
|
||||
@@ -20,7 +20,7 @@ export function ProfileRoom({ room }) {
|
||||
</div>
|
||||
<a
|
||||
href={
|
||||
"/app?room=" + room.path + "/" + room.name + "-" + room.timestamp
|
||||
"/chat?room=" + room.path + "/" + room.name + "-" + room.timestamp
|
||||
}
|
||||
className="absolute z-2 top-[190px] w-[108px] p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full flex items-center"
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { Form, useForm } from "react-hook-form";
|
||||
import { database } from "../../../../firebase-config";
|
||||
import { ref, set } from "firebase/database";
|
||||
import { ref, set, get } from "firebase/database";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { ChatRoomSidebar } from "../datatypes";
|
||||
// Sidebar on Home Page, with various functionality (create, nearby, my rooms)
|
||||
|
||||
// CreateRoom Module for Sidebar Create Tab
|
||||
@@ -49,15 +51,50 @@ function CreateRoom({ loc }) {
|
||||
}
|
||||
|
||||
export function Home_Sidebar({
|
||||
tab,
|
||||
nearby,
|
||||
loadingNearby,
|
||||
setTab,
|
||||
isRoomLoading,
|
||||
myRooms,
|
||||
loadingLoc,
|
||||
user,
|
||||
location,
|
||||
loadingLoc
|
||||
}) {
|
||||
const [tab, setTab] = useState("rooms");
|
||||
const [nearbyArr, setNearbyArr] = useState([])
|
||||
const [nearbyArrReady, setNearbyArrReady] = useState(false)
|
||||
|
||||
// Add myRooms to Sidebar
|
||||
var myRoomArr = [];
|
||||
for (var room in user.rooms) {
|
||||
var newRoom = (
|
||||
<ChatRoomSidebar
|
||||
roomObj={user.rooms[room]}
|
||||
key={user.rooms[room].timestamp}
|
||||
/>
|
||||
);
|
||||
myRoomArr.push(newRoom);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
var nearbyArr = []
|
||||
if (location) {
|
||||
var path = String(location.latitude.toFixed(2)).replace(".", "") + "/" + String(location.longitude.toFixed(2)).replace(".", "");
|
||||
get(ref(database, `/rooms/${path}`)).then((snapshot) => {
|
||||
// Add nearby to Sidebar
|
||||
if (snapshot.exists()) {
|
||||
var rooms = snapshot.val()
|
||||
for (var room in rooms) {
|
||||
var newRoom = (
|
||||
<ChatRoomSidebar
|
||||
roomObj={rooms[room]}
|
||||
key={rooms[room].timestamp}
|
||||
/>
|
||||
);
|
||||
nearbyArr.push(newRoom);
|
||||
}
|
||||
}
|
||||
setNearbyArr(nearbyArr)
|
||||
setNearbyArrReady(true)
|
||||
})
|
||||
}
|
||||
}, [location])
|
||||
|
||||
return (
|
||||
<div className="h-dvh">
|
||||
<div className="bg-white shadow-2xl rounded-lg m-2 h-[98%]">
|
||||
@@ -104,24 +141,23 @@ export function Home_Sidebar({
|
||||
{tab == "nearby" && (
|
||||
<div className="overflow-y-auto h-[90%]">
|
||||
<div>
|
||||
{!nearby && !loadingNearby && (
|
||||
{!nearbyArr && !loadingLoc && (
|
||||
<div>
|
||||
No Nearby Rooms
|
||||
<br />
|
||||
Create One?
|
||||
</div>
|
||||
)}
|
||||
{loadingNearby && <div>Loading...</div>}
|
||||
{nearby}
|
||||
{loadingLoc && <div>Loading...</div>}
|
||||
{nearbyArrReady && nearbyArr}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{tab == "rooms" && (
|
||||
<div className="overflow-y-auto h-[90%]">
|
||||
<div>
|
||||
{isRoomLoading && <div>Loading</div>}
|
||||
{!myRooms && !isRoomLoading && <div>No User Saved Rooms</div>}
|
||||
{myRooms}
|
||||
{!myRoomArr && <div>No User Saved Rooms</div>}
|
||||
{myRoomArr}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
export function Profile_Sidebar() {
|
||||
return (
|
||||
<div className="h-dvh">
|
||||
<div className=" bg-white m-2 h-[98%]">Profile</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user