diff --git a/frontend-next/.eslintrc.json b/frontend-next/.eslintrc.json index 1c9c6d8..6b2f9c6 100644 --- a/frontend-next/.eslintrc.json +++ b/frontend-next/.eslintrc.json @@ -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", } } diff --git a/frontend-next/package-lock.json b/frontend-next/package-lock.json index e515ae0..e31d9a5 100644 --- a/frontend-next/package-lock.json +++ b/frontend-next/package-lock.json @@ -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", diff --git a/frontend-next/package.json b/frontend-next/package.json index 17528e8..f7091b2 100644 --- a/frontend-next/package.json +++ b/frontend-next/package.json @@ -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": { diff --git a/frontend-next/src/app/app/page.js b/frontend-next/src/app/app/page.js index 30ccac9..75d60e3 100644 --- a/frontend-next/src/app/app/page.js +++ b/frontend-next/src/app/app/page.js @@ -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 = ( - - ); - markerArr.push( - - (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( - - ); - // TODO: RANDOM LAST DIGIT TO MOVE AROUND THE MAP - markersArr.push( - - (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(); - 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(); - 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 (
- {isAuthenticated && ( + {user && (
{/* Left Side of Page */}
{/* Header */}
{/* Main Page Section */}
- {mainTab == "home" && !loadingLoc && ( - + {!loadingLoc && ( + )} - {mainTab == "home" && loadingLoc && ( - - )} - {mainTab == "chat" && ( - + {loadingLoc && ( + )}
{/* Sidebar (Right Side of Page) */} - {mainTab == "home" && ( - )} - {mainTab == "chat" && ( - - )} - {mainTab == "profile" && }
)}
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..b5fecd5 --- /dev/null +++ b/frontend-next/src/app/chat/page.js @@ -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 ( +
+ {(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/app/page.js b/frontend-next/src/app/page.js index 4cdce00..dee3a1c 100644 --- a/frontend-next/src/app/page.js +++ b/frontend-next/src/app/page.js @@ -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); diff --git a/frontend-next/src/app/user/[stub]/page.js b/frontend-next/src/app/user/[stub]/page.js index 846f641..17bc135 100644 --- a/frontend-next/src/app/user/[stub]/page.js +++ b/frontend-next/src/app/user/[stub]/page.js @@ -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 diff --git a/frontend-next/src/components/app/datatypes.js b/frontend-next/src/components/app/datatypes.js index d27b869..ab5469d 100644 --- a/frontend-next/src/components/app/datatypes.js +++ b/frontend-next/src/components/app/datatypes.js @@ -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 (
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" >
diff --git a/frontend-next/src/components/app/header.js b/frontend-next/src/components/app/header.js index 5cd8b9c..f6605f7 100644 --- a/frontend-next/src/components/app/header.js +++ b/frontend-next/src/components/app/header.js @@ -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 (
@@ -85,7 +91,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 +102,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 +113,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..28d6cae 100644 --- a/frontend-next/src/components/app/main_tab/chat.js +++ b/frontend-next/src/components/app/main_tab/chat.js @@ -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( - - ); - } 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 +50,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/profile/ProfileRoom.js b/frontend-next/src/components/app/profile/ProfileRoom.js index 269c6e6..80e6268 100644 --- a/frontend-next/src/components/app/profile/ProfileRoom.js +++ b/frontend-next/src/components/app/profile/ProfileRoom.js @@ -20,7 +20,7 @@ export function ProfileRoom({ room }) {
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}
diff --git a/frontend-next/src/components/app/sidebar/home.js b/frontend-next/src/components/app/sidebar/home.js index 97c9ba1..dbfce0b 100644 --- a/frontend-next/src/components/app/sidebar/home.js +++ b/frontend-next/src/components/app/sidebar/home.js @@ -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 = ( + + ); + 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 = ( + + ); + nearbyArr.push(newRoom); + } + } + setNearbyArr(nearbyArr) + setNearbyArrReady(true) + }) + } + }, [location]) + return (
@@ -104,24 +141,23 @@ export function Home_Sidebar({ {tab == "nearby" && (
- {!nearby && !loadingNearby && ( + {!nearbyArr && !loadingLoc && (
No Nearby Rooms
Create One?
)} - {loadingNearby &&
Loading...
} - {nearby} + {loadingLoc &&
Loading...
} + {nearbyArrReady && nearbyArr}
)} {tab == "rooms" && (
- {isRoomLoading &&
Loading
} - {!myRooms && !isRoomLoading &&
No User Saved Rooms
} - {myRooms} + {!myRoomArr &&
No User Saved Rooms
} + {myRoomArr}
)} diff --git a/frontend-next/src/components/app/sidebar/profile.js b/frontend-next/src/components/app/sidebar/profile.js deleted file mode 100644 index 593a4a6..0000000 --- a/frontend-next/src/components/app/sidebar/profile.js +++ /dev/null @@ -1,7 +0,0 @@ -export function Profile_Sidebar() { - return ( -
-
Profile
-
- ); -}