From 2b6bc641d437c946d71d30853f1592755f71e8fa Mon Sep 17 00:00:00 2001 From: ClarkLach <102780236+ClarkLach@users.noreply.github.com> Date: Thu, 14 Mar 2024 17:13:16 -0400 Subject: [PATCH 1/2] Update .gitignore DS_store activity --- .gitignore | 5 ++++- frontend-next/src/app/page.js | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index ccff3db..2865e82 100644 --- a/.gitignore +++ b/.gitignore @@ -131,4 +131,7 @@ dist .yarn/unplugged .yarn/build-state.yml .yarn/install-state.gz -.pnp.* \ No newline at end of file +.pnp.* + +# Am I the only mac user +**/.DS_Store \ No newline at end of file diff --git a/frontend-next/src/app/page.js b/frontend-next/src/app/page.js index a2ab97f..57090bf 100644 --- a/frontend-next/src/app/page.js +++ b/frontend-next/src/app/page.js @@ -58,7 +58,8 @@ function Home() { } {statusCode == 200 && } - {(!isLoadingLoc && roomCount != 0) &&
Join others in {roomCount} rooms near you!
} + {(!isLoadingLoc && roomCount == 1) &&
Join others in {roomCount} room near you!
} + {(!isLoadingLoc && roomCount != 1 && roomCount != 0) &&
Join others in {roomCount} rooms near you!
} {(isLoadingLoc || (roomCount == 0 && !isLoadingLoc)) &&
Start the conversation today!
} -- 2.52.0 From 644206635f286ddbddf308e13a0db7deda62b70a Mon Sep 17 00:00:00 2001 From: ClarkLach <102780236+ClarkLach@users.noreply.github.com> Date: Thu, 14 Mar 2024 18:31:05 -0400 Subject: [PATCH 2/2] Added username colors in chats Ideally this will be customizable at some point --- frontend-next/src/app/app/page.js | 934 +++++++++++++++++++----------- 1 file changed, 611 insertions(+), 323 deletions(-) diff --git a/frontend-next/src/app/app/page.js b/frontend-next/src/app/app/page.js index def0b53..66a29db 100644 --- a/frontend-next/src/app/app/page.js +++ b/frontend-next/src/app/app/page.js @@ -1,443 +1,641 @@ -"use client" -import { useState, useEffect } from 'react' -import {Map, Marker, ZoomControl} from "pigeon-maps" +"use client"; +import { useState, useEffect } from "react"; +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) +import { getDatabase, ref, onValue, get, set, remove } from "firebase/database"; +import { useBeforeunload } from "react-beforeunload"; +var database = getDatabase(app); +// This shouldn't be up here at all but fix later +const userColors = [ + "#ff80ed", + "#065535", + "#133337", + "#ffc0cb", + "#e6e6fa", + "#ffd700", + "#ffa500", + "#0000ff", + "#1b85b8", + "#5a5255", + "#559e83", + "#ae5a41", + "#c3cb71", +]; // Data Types // Chat Message -function Chat({chatObj}) { +function Chat({ chatObj }) { let dateOptions = { - weekday: 'long', - year: 'numeric', - month: 'short', - day: 'numeric', - hour: '2-digit', - minute: '2-digit' + weekday: "long", + year: "numeric", + month: "short", + day: "numeric", + hour: "2-digit", + minute: "2-digit", }; + + const generateColor = (user_str) => { + // hashes username for consistent colors, maybe all functionality to pick color later + let hash = 0; + for (let i = 0; i < user_str.length; i++) { + hash = user_str.charCodeAt(i) + (hash * 32 - hash); + } + const index = Math.abs(hash) % userColors.length; + return index; + }; + return ( -
+
- {chatObj.user}: {chatObj.body} + + {chatObj.user} + + : {chatObj.body}
-
+
{new Date(chatObj.timestamp).toLocaleString(dateOptions)}
- ) + ); } // System Chat Message -function SystemMessage({chatObj}) { +function SystemMessage({ chatObj }) { let dateOptions = { - weekday: 'long', - year: 'numeric', - month: 'short', - day: 'numeric', - hour: '2-digit', - minute: '2-digit' + weekday: "long", + year: "numeric", + month: "short", + day: "numeric", + hour: "2-digit", + minute: "2-digit", }; + + const generateColor = (user_str) => { + // hashes username for consistent colors, maybe all functionality to pick color later + let hash = 0; + for (let i = 0; i < user_str.length; i++) { + hash = user_str.charCodeAt(i) + (hash * 32 - hash); + } + const index = Math.abs(hash) % userColors.length; + return index; + }; + return ( -
-
- {chatObj.user} has {chatObj.body} the room. +
+
+ + {chatObj.user} + {" "} + has {chatObj.body} the room.
-
+
{new Date(chatObj.timestamp).toLocaleString(dateOptions)}
- ) + ); } // Member for Active/Room members in sidebar -function Member({memberObj}) { +function Member({ memberObj }) { return ( -
+
{memberObj.username}
- ) + ); } // Chat Room for myRooms and Nearby in sidebar -function ChatRoomSidebar({roomObj, click}) { +function ChatRoomSidebar({ roomObj, click }) { // TODO: Gross fix but it works -function clicker() { - click(roomObj.name+"-"+roomObj.timestamp, roomObj) -} -return ( -
-
-
{roomObj.name}
-
{roomObj.description}
+ function clicker() { + click(roomObj.name + "-" + roomObj.timestamp, roomObj); + } + return ( +
+
+
{roomObj.name}
+
{roomObj.description}
+
-
-) + ); } // Map module for main page and chat room sidebar // TODO: MAKE NOT MOVABLE -function Geo({loc, zoom, movable, locMarker, markers}) { +function Geo({ loc, zoom, movable, locMarker, markers }) { if (loc) { return ( {markers && markers} - {locMarker && } + {locMarker && ( + + )} {zoom && } - ) + ); } else { return ( - - ) + + ); } - } // Module for Welcome Message on main tab landing page function WelcomeMessage() { - const [data, setData] = useState(null) - const [isLoading, setLoading] = useState(true) + const [data, setData] = useState(null); + const [isLoading, setLoading] = useState(true); useEffect(() => { - fetch('/api/user') + fetch("/api/user") .then((res) => res.json()) .then((data) => { - setData(data) - setLoading(false) - }) - }, []) - if (isLoading) return
- if (!data) return
+ setData(data); + setLoading(false); + }); + }, []); + if (isLoading) return
; + if (!data) return
; return (
Welcome, {data.firstName} {data.lastName} ({data.username})
-
- Lets see what's happening in your area. -
+
Lets see what's happening in your area.
- ) - + ); } // Main Tabs // Primary App Landing Page -function MainTabHome({loc, markers}) { +function MainTabHome({ loc, markers }) { return ( <> - -
- -
+ +
+ +
- ) + ); } // Chatroom Module for Primary Tab -function MainTabChatRoom({roomObj}) { - var { register, control, reset, handleSubmit} = useForm() - const [chats, setData] = useState(null) - const [isLoading, setLoading] = useState(true) +function MainTabChatRoom({ roomObj }) { + 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() + 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() + chatsArr.push( + + ); } else { - chatsArr.push() + chatsArr.push( + + ); } } - setData(chatsArr.reverse()) - setLoading(false) - }) - }, []) + setData(chatsArr.reverse()); + setLoading(false); + } + ); + }, []); function sendMessage(data) { - reset() - fetch('/api/user').then((res) => res.json()) - .then((user) => { - var payload = { - body: data.message, - user: user.username, - isSystem: false, - timestamp: new Date().getTime() - } - set(ref(database,`/rooms/${roomObj.path+"/"+roomObj.name+"-"+roomObj.timestamp}/chats/${new Date().getTime()}-${user.username}`), payload) - }) + reset(); + fetch("/api/user") + .then((res) => res.json()) + .then((user) => { + var payload = { + body: data.message, + user: user.username, + isSystem: false, + timestamp: new Date().getTime(), + }; + set( + ref( + database, + `/rooms/${ + roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp + }/chats/${new Date().getTime()}-${user.username}` + ), + payload + ); + }); } - if (isLoading) return
Loading
- if (!chats) return
No Chats
+ if (isLoading) return
Loading
; + if (!chats) return
No Chats
; return ( -
-
+
+
{chats}
-
-
- - +
+ + +
- ) + ); } // 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 [myRooms, setRoomData] = useState(null) // Current user saved rooms list - 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 [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 [myRooms, setRoomData] = useState(null); // Current user saved rooms list + 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 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 [users, setUsers] = useState(null) // all users from firebase - const [alreadyLeft, setAlreadyLeft] = useState(false) // if already left from room - const [markers, setMarkers] = useState([]) + const [chatroomOnline, setChatRoomOnline] = useState(null); // holds online users + const [chatroomUsers, setChatroomUsers] = useState(null); // holds all chatroom users + const [chatroomUsersLoading, setChatroomUsersLoading] = useState(true); + const [users, setUsers] = useState(null); // all users from firebase + const [alreadyLeft, setAlreadyLeft] = useState(false); // if already left from room + const [markers, setMarkers] = useState([]); // Grabs user data, saves to user, then lists the users saved rooms useEffect(() => { - fetch('/api/user').then((res) => res.json()) - .then((user) => { - onValue(ref(database, '/users/'+user.uid+'/rooms'),(snapshot) => { - setRoomLoading(true) - var rooms = snapshot.val() - setMyRoomsObj(rooms) - var roomArr = [] - var markerArr = markers - for (var room in rooms) { - var newRoom = - markerArr.push() - roomArr.push(newRoom) - } - setMarkers(markerArr) - setRoomData(roomArr) - setRoomLoading(false) - }) - }) -}, []) + fetch("/api/user") + .then((res) => res.json()) + .then((user) => { + onValue(ref(database, "/users/" + user.uid + "/rooms"), (snapshot) => { + setRoomLoading(true); + var rooms = snapshot.val(); + setMyRoomsObj(rooms); + var roomArr = []; + var markerArr = markers; + for (var room in rooms) { + var newRoom = ( + + ); + markerArr.push( + + ); + roomArr.push(newRoom); + } + setMarkers(markerArr); + setRoomData(roomArr); + setRoomLoading(false); + }); + }); + }, []); // Grabs the user location useEffect(() => { - if('geolocation' in navigator) { + if ("geolocation" in navigator) { // Retrieve latitude & longitude coordinates from `navigator.geolocation` Web API navigator.geolocation.getCurrentPosition(({ coords }) => { - setLocation(coords) - setLoadingLoc(false) - var nearbyArr = [] - var path = String(coords.latitude.toFixed(2)).replace(".","")+"/"+String(coords.longitude.toFixed(2)).replace(".","") - var markersArr = markers + setLocation(coords); + setLoadingLoc(false); + var nearbyArr = []; + var path = + String(coords.latitude.toFixed(2)).replace(".", "") + + "/" + + String(coords.longitude.toFixed(2)).replace(".", ""); + var markersArr = markers; get(ref(database, `/rooms/${path}`)).then((snapshot) => { if (snapshot.exists()) { - var data = snapshot.val() + var data = snapshot.val(); for (var room in data) { - nearbyArr.push() + nearbyArr.push( + + ); // TODO: RANDOM LAST DIGIT TO MOVE AROUND THE MAP - markersArr.push() + markersArr.push( + + ); } - setMarkers(markersArr) - setLoadingNearby(false) - setNearby(nearbyArr) + setMarkers(markersArr); + setLoadingNearby(false); + setNearby(nearbyArr); } else { - setLoadingNearby(false) + setLoadingNearby(false); } - }) - }) + }); + }); } }, []); // Grab list of all users useEffect(() => { get(ref(database, `/users`)).then((snapshot) => { - setUsers(snapshot.val()) - }) - + setUsers(snapshot.val()); + }); }, []); // Dont Double Send Leaving Message useEffect(() => { - if (myRoomsObj && chatRoomObj) { - var roomName = chatRoomObj.name+"-"+chatRoomObj.timestamp - if (myRooms != null && roomName in myRoomsObj) { - // its in there - setIsMyRoom(true) - } else { - // its not in there - setIsMyRoom(false) + if (myRoomsObj && chatRoomObj) { + var roomName = chatRoomObj.name + "-" + chatRoomObj.timestamp; + if (myRooms != null && roomName in myRoomsObj) { + // its in there + setIsMyRoom(true); + } else { + // its not in there + setIsMyRoom(false); + } } - } - }, [chatRoomObj]) + }, [chatRoomObj]); // CreateRoom Module for Sidebar Create Tab - function CreateRoom({loc}) { - var { register, control, reset, handleSubmit} = useForm() - + function CreateRoom({ loc }) { + var { register, control, reset, handleSubmit } = useForm(); + function createRoom(data) { - reset() - var path = String(loc.latitude.toFixed(2)).replace(".","")+"/"+String(loc.longitude.toFixed(2)).replace(".","") - var timestamp = new Date().getTime() + reset(); + var path = + String(loc.latitude.toFixed(2)).replace(".", "") + + "/" + + String(loc.longitude.toFixed(2)).replace(".", ""); + var timestamp = new Date().getTime(); var payload = { name: data.name, description: data.description, timestamp: timestamp, latitude: loc.latitude, longitude: loc.longitude, - path: path - } - set(ref(database,`/rooms/${path}/${data.name}-${timestamp}`), payload) + path: path, + }; + set(ref(database, `/rooms/${path}/${data.name}-${timestamp}`), payload); } - + return ( -
+
- -
-
- Creating room near ({loc.latitude.toFixed(2)}, {loc.longitude.toFixed(2)}) + + +
+
+ Creating room near ({loc.latitude.toFixed(2)},{" "} + {loc.longitude.toFixed(2)})
- +
- ) + ); } // Selects chat room function selectChatRoom(roomName, roomObj) { - fetch('/api/user').then((res) => res.json()) - .then((user) => { - // Path of chatroom - var path = roomObj.path+"/"+roomObj.name+"-"+roomObj.timestamp + fetch("/api/user") + .then((res) => res.json()) + .then((user) => { + // Path of chatroom + var path = roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp; - setChatRoomObj(roomObj) + setChatRoomObj(roomObj); - // Send entered message - var payload = { - body: "entered", - user: user.username, - isSystem: true, - timestamp: new Date().getTime() - } - 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) => { + // Send entered message + var payload = { + body: "entered", + user: user.username, + isSystem: true, + timestamp: new Date().getTime(), + }; + set( + ref( + database, + `/rooms/${path}/chats/${new Date().getTime()}-${user.username}` + ), + payload + ); - 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() - setChatRoomOnline(activeUsers) - } + // Code for Room Data + set(ref(database, `/rooms/${path}/users/online/${user.uid}`), user); + onValue(ref(database, `/rooms/${path}`), (snapshot) => { + setChatRoomOnline(null); + setChatroomUsers(null); - // Users who added to "my rooms" - console.log(snapshot.val().hasOwnProperty("users") && snapshot.val().users.hasOwnProperty("all")) - 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() - setChatroomUsers(allUsers) - setChatroomUsersLoading(false) + // 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(); + setChatRoomOnline(activeUsers); + } - } - - }) - setMainTab("chat") - setAlreadyLeft(false) - }) + // Users who added to "my rooms" + console.log( + snapshot.val().hasOwnProperty("users") && + snapshot.val().users.hasOwnProperty("all") + ); + 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(); + setChatroomUsers(allUsers); + setChatroomUsersLoading(false); + } + }); + setMainTab("chat"); + setAlreadyLeft(false); + }); } // Closes chat room function closeChatRoom(roomObj) { - fetch('/api/user').then((res) => res.json()) - .then((user) => { - var path = roomObj.path+"/"+roomObj.name+"-"+roomObj.timestamp - var payload = { - body: "left", - user: user.username, - isSystem: true, - timestamp: new Date().getTime() - } - 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") - }) + fetch("/api/user") + .then((res) => res.json()) + .then((user) => { + var path = roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp; + var payload = { + body: "left", + user: user.username, + isSystem: true, + timestamp: new Date().getTime(), + }; + 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, - }) - var path = chatRoomObj.path+"/"+chatRoomObj.name+"-"+chatRoomObj.timestamp - set(ref(database, `/rooms/${path}/users/all/${user.uid}`), user) - }) - setIsMyRoom(true) + 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, + } + ); + 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() { - fetch('/api/user').then((res) => res.json()) - .then((user) => { - var path = chatRoomObj.path+"/"+chatRoomObj.name+"-"+chatRoomObj.timestamp - remove(ref(database,`/users/${user.uid}/rooms/${chatRoomObj.name}-${chatRoomObj.timestamp}`)) - remove(ref(database, `/rooms/${path}/users/all/${user.uid}`)) - }) - setIsMyRoom(false) + fetch("/api/user") + .then((res) => res.json()) + .then((user) => { + var path = + chatRoomObj.path + + "/" + + chatRoomObj.name + + "-" + + chatRoomObj.timestamp; + remove( + ref( + database, + `/users/${user.uid}/rooms/${chatRoomObj.name}-${chatRoomObj.timestamp}` + ) + ); + remove(ref(database, `/rooms/${path}/users/all/${user.uid}`)); + }); + setIsMyRoom(false); } // Fires to tell other uses that you are leaving the room useBeforeunload(() => { - fetch('/api/user').then((res) => res.json()) + 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}`)) + 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 ( @@ -446,88 +644,178 @@ function Home() {
{/* Header */}
-
- + -
- {(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 +
{/* Main Page Section */}
- {(mainTab == "home" && !loadingLoc) && } - {(mainTab == "home" && loadingLoc) && } - {mainTab == "chat" && } + {mainTab == "home" && !loadingLoc && ( + + )} + {mainTab == "home" && loadingLoc && ( + + )} + {mainTab == "chat" && }
{/* Sidebar (Right Side of Page) */} - {mainTab == "home" && -
+ {mainTab == "home" && ( +
-
-
-
{setTab("nearby")}}>Nearby
-
{setTab("rooms")}}>My Rooms
-
{setTab("create")}}>Create
+
+
+
{ + setTab("nearby"); + }} + > + Nearby +
+
{ + setTab("rooms"); + }} + > + My Rooms +
+
{ + setTab("create"); + }} + > + Create
- {(tab == "nearby") &&
+
+ {tab == "nearby" && ( +
- {(!nearby && !loadingNearby) &&
No Nearby Rooms
Create One?
} + {!nearby && !loadingNearby && ( +
+ No Nearby Rooms +
+ Create One? +
+ )} {loadingNearby &&
Loading...
} {nearby}
-
} - {tab == "rooms" &&
+
+ )} + {tab == "rooms" && ( +
{isRoomLoading &&
Loading
} - {(!myRooms && !isRoomLoading) &&
No User Saved Rooms
} + {!myRooms && !isRoomLoading &&
No User Saved Rooms
} {myRooms}
-
} - {(tab == "create" && !loadingLoc) && } - {(tab == "create" && loadingLoc) &&
Loading...
} -
-
} - {(mainTab == "chat") && -
-
-
-
-
-
- {chatRoomObj.name}
+ )} + {tab == "create" && !loadingLoc && } + {tab == "create" && loadingLoc &&
Loading...
} +
+
+ )} + {mainTab == "chat" && ( +
+
+
+
+ +
+
+ + {chatRoomObj.name} + +
{chatRoomObj.description}
-
-
-
- Online Members
- {chatroomOnline} -
-
-
- All Members +
+
Online Members
+ {chatroomOnline} +
+
+
All Members
+ {!chatroomUsersLoading && chatroomUsers}
- {!chatroomUsersLoading && chatroomUsers}
-
- } - {(mainTab == "profile") && -
-
- Profile + )} + {mainTab == "profile" && ( +
+
Profile
-
- } + )}
- ) + ); } -export default Home; \ No newline at end of file +export default Home; -- 2.52.0