From 75a3919eb2e80c1c8ea07d7f329dfe80bdcf11a9 Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Fri, 19 Apr 2024 10:01:04 -0400 Subject: [PATCH 1/4] Added Friends, My Rooms, Refactored Nearby Markers Functions --- frontend-next/src/app/app/page.js | 12 +- frontend-next/src/components/app/map/geo.js | 131 +++++++++----------- 2 files changed, 71 insertions(+), 72 deletions(-) diff --git a/frontend-next/src/app/app/page.js b/frontend-next/src/app/app/page.js index 4120c2c..b45788a 100644 --- a/frontend-next/src/app/app/page.js +++ b/frontend-next/src/app/app/page.js @@ -7,7 +7,7 @@ import Drawer from '@mui/material/Drawer'; // Firebase Imports import { auth, database } from "../../../firebase-config"; -import { ref, onValue } from "firebase/database"; +import { ref, onValue, set } from "firebase/database"; import { useAuthState } from "react-firebase-hooks/auth" // Component Imports @@ -63,6 +63,16 @@ function Home() { }); }, []) + // Saves users last loc to profile for friends map + useEffect(() => { + if (coords && user) { + set(ref(database,`users/${user.uid}/location`), { + latitude: coords.latitude, + longitude: coords.longitude + }) + } + }, [coords, user]) + return (
{user && ( diff --git a/frontend-next/src/components/app/map/geo.js b/frontend-next/src/components/app/map/geo.js index 6611dc6..588a177 100644 --- a/frontend-next/src/components/app/map/geo.js +++ b/frontend-next/src/components/app/map/geo.js @@ -6,72 +6,64 @@ import ChatBubbleTwoToneIcon from '@mui/icons-material/ChatBubbleTwoTone'; import PersonOutlineTwoToneIcon from '@mui/icons-material/PersonOutlineTwoTone'; import { red } from '@mui/material/colors'; -// ONLY nearby markers -function NearbyRoomMarkers({ loc, user, markers }) { - if (!markers || !loc || !user) { - return [null, null]; + +function NearbyMarkers(location) { + const [newMarkers, setNewMarkers] = useState(null); + if (location) { + const path = String(location.latitude.toFixed(2)).replace(".", "") +"/" +String(location.longitude.toFixed(2)).replace(".", "") +"/"; + get(ref(database, `/rooms/${path}`)).then((snapshot) => { + const rooms = snapshot.val(); + var newMarkersArr = Object.values(rooms).map((roomObj, index) => { + return ( + // Want to change this to be something other than markers (or something extra) + (roomObj) => {window.location.href = "/chat?room=" + path + roomObj.name + "-" + roomObj.timestamp;}} + style={{pointerEvents:'auto'} /* So stupid */} + > + + + ); + }); + setNewMarkers(newMarkersArr) + }) + } + return newMarkers; +} + +function MyRoomsMarkers(user) { + var myRoomsMarkers = Object.values(user.rooms).map((roomObj) => { + return ( (roomObj) => {window.location.href = "/chat?room=" + path + roomObj.name + "-" + roomObj.timestamp;}} + style={{pointerEvents:'auto'} /* So stupid */} + > + + ) + }) + return myRoomsMarkers; +} + +function FriendMarkers(user) { + + var friendMarkers = [] + for (var friend in user.friends.friends) { + get(ref(database, `/users/${friend}`)).then((snapshot) => { + var friendData = snapshot.val(); + if (friendData.location) { + friendMarkers.push( (friendData) => {window.location.href = "/user?uid=" + friendData.uid;}} + style={{pointerEvents:'auto'} /* So stupid */}> + + ); + } + }); } - const [markerArr, setMarkerArr] = useState([]); - const [hoveredRoom, setHoveredRoom] = useState(null); - - // Room path in DB - const path = - String(loc.latitude.toFixed(2)).replace(".", "") + - "/" + - String(loc.longitude.toFixed(2)).replace(".", "") + - "/"; - - // Sorry for the href but doesn't work here - const handleRoomMarkerClick = (roomObj) => { - window.location.href = - "/chat?room=" + path + roomObj.name + "-" + roomObj.timestamp; - }; - - const handleRoomHover = (roomObj) => { - setHoveredRoom( - -
-

{roomObj.name}

-
- - ); - }; - - const handleRoomUnhover = (roomObj) => { - setHoveredRoom(null); - }; - - // Mostly copied Nick's code from before - useEffect(() => { - if (loc && user) { - get(ref(database, `/rooms/${path}`)).then((snapshot) => { - if (snapshot.exists()) { - const rooms = snapshot.val(); - - const newMarkers = Object.values(rooms).map((roomObj, index) => { - const markerKey = roomObj.path + "-" + index; - return ( - // Want to change this to be something other than markers (or something extra) - handleRoomMarkerClick(roomObj)} - onMouseOver={() => handleRoomHover(roomObj)} - onMouseOut={() => handleRoomUnhover(roomObj)} - style={{pointerEvents:'auto'} /* So stupid */} - > - - - ); - }); - setMarkerArr(newMarkers); - } - }); - } - }, []); - - return [markerArr, hoveredRoom]; + return friendMarkers; } /** @@ -89,9 +81,7 @@ export function Geo({ loc, zoom, moveable, markers, user }) { }; // SCUFFED AF - var rooms = NearbyRoomMarkers({ loc, user, markers }); - var room_markers = rooms[0]; - var room_overlay = rooms[1]; + //var rooms = NearbyRoomMarkers({ loc, user, markers }); if (!loc) { return
Getting Location...
; @@ -105,11 +95,10 @@ export function Geo({ loc, zoom, moveable, markers, user }) { touchEvents={moveable} attribution={false} > - { - room_overlay /* Renders the room name overlay when you mouse over room */ - } {zoom && } - {room_markers /* Renders the actual room markers */} + {NearbyMarkers(loc)} + {MyRoomsMarkers(user)} + {FriendMarkers(user)} {user && ( // Shows the user marker Date: Fri, 19 Apr 2024 11:09:12 -0400 Subject: [PATCH 2/4] Map Improvements --- frontend-next/src/components/app/map/geo.js | 145 ++++++++++++-------- 1 file changed, 91 insertions(+), 54 deletions(-) diff --git a/frontend-next/src/components/app/map/geo.js b/frontend-next/src/components/app/map/geo.js index 588a177..b9ab5f9 100644 --- a/frontend-next/src/components/app/map/geo.js +++ b/frontend-next/src/components/app/map/geo.js @@ -1,66 +1,46 @@ import { Map, Marker, ZoomControl, Overlay } from "pigeon-maps"; import { database } from "../../../../firebase-config"; import { ref, get} from "firebase/database"; -import { useState, useEffect } from "react"; +import { useState } from "react"; import ChatBubbleTwoToneIcon from '@mui/icons-material/ChatBubbleTwoTone'; import PersonOutlineTwoToneIcon from '@mui/icons-material/PersonOutlineTwoTone'; import { red } from '@mui/material/colors'; - +/** + * Nearby Markers Grabber + * @param {JSON} location - Location Object {latitude, longitude} + * @returns {Array} - Array of Markers {} + */ function NearbyMarkers(location) { const [newMarkers, setNewMarkers] = useState(null); if (location) { const path = String(location.latitude.toFixed(2)).replace(".", "") +"/" +String(location.longitude.toFixed(2)).replace(".", "") +"/"; get(ref(database, `/rooms/${path}`)).then((snapshot) => { - const rooms = snapshot.val(); - var newMarkersArr = Object.values(rooms).map((roomObj, index) => { - return ( - // Want to change this to be something other than markers (or something extra) - (roomObj) => {window.location.href = "/chat?room=" + path + roomObj.name + "-" + roomObj.timestamp;}} - style={{pointerEvents:'auto'} /* So stupid */} - > - - - ); - }); - setNewMarkers(newMarkersArr) + if (snapshot.exists()) { + const rooms = snapshot.val(); + setNewMarkers(rooms) + } }) } return newMarkers; } -function MyRoomsMarkers(user) { - var myRoomsMarkers = Object.values(user.rooms).map((roomObj) => { - return ( (roomObj) => {window.location.href = "/chat?room=" + path + roomObj.name + "-" + roomObj.timestamp;}} - style={{pointerEvents:'auto'} /* So stupid */} - > - - ) - }) - return myRoomsMarkers; -} - +/** + * Friend Markers Grabber + * @param {JSON} user - User Object + * @returns {Array} - Array of Markers {} + */ function FriendMarkers(user) { - var friendMarkers = [] - for (var friend in user.friends.friends) { - get(ref(database, `/users/${friend}`)).then((snapshot) => { - var friendData = snapshot.val(); - if (friendData.location) { - friendMarkers.push( (friendData) => {window.location.href = "/user?uid=" + friendData.uid;}} - style={{pointerEvents:'auto'} /* So stupid */}> - - ); - } - }); + if (user && "friends" in user && "friends" in user.friends) { + for (var friend in user.friends.friends) { + get(ref(database, `/users/${friend}`)).then((snapshot) => { + var friendData = snapshot.val(); + if (friendData.location) { + friendMarkers.push(friendData); + } + }); + } } return friendMarkers; @@ -75,13 +55,61 @@ function FriendMarkers(user) { * @prop {Boolean} markers - Enable Markers * @returns {Map} - Geo Component (As Map) */ -export function Geo({ loc, zoom, moveable, markers, user }) { - const handleUserMarkerClick = () => { - window.location.href = "/user?uid=" + user.uid; - }; +export function Geo({ loc, zoom, moveable, user }) { + const [hovering, setHovering] = useState(false); + const [hoverText, setHoverText] = useState(""); + const [hoverAnchor, setHoverAnchor] = useState([null,null]); + + if (moveable) { + // Load My Rooms Markers + var myRoomsMarkers = Object.values(user.rooms).map((roomObj) => { + return ( {window.location.href = "/chat?room=" + roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp;}} + style={{pointerEvents:'auto'} /* So stupid */} + onMouseOver={() => {setHoverText(roomObj.name);setHovering(true);setHoverAnchor([roomObj.latitude, roomObj.longitude])}} + onMouseOut={() => {setHovering(false)}} + > + + ) + }) + + + // Load Nearby Markers + var nearbyMarkers = NearbyMarkers(loc); + if (nearbyMarkers) { + var nearbyMarkers = Object.values(nearbyMarkers).map((roomObj) => { + return ( {window.location.href = "/chat?room=" + roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp;}} + style={{pointerEvents:'auto'} /* So stupid */} + onMouseOver={() => {setHoverText(roomObj.name);setHovering(true);setHoverAnchor([roomObj.latitude, roomObj.longitude])}} + onMouseOut={() => {setHovering(false)}} + > + + ) + }) + } + + // Load Friend Markers + + var friendMarkers = FriendMarkers(user); + friendMarkers = Object.values(user.rooms).map((friendData) => { + return ( {window.location.href = "/chat?room=" + friendData.path + "/" + friendData.name + "-" + friendData.timestamp;}} + style={{pointerEvents:'auto'} /* So stupid */} + onMouseOver={() => {setHoverText(friendData.username);setHovering(true);setHoverAnchor([friendData.location.latitude, friendData.location.longitude])}} + onMouseOut={() => {setHovering(false)}} + > + + ) + }) + } - // SCUFFED AF - //var rooms = NearbyRoomMarkers({ loc, user, markers }); if (!loc) { return
Getting Location...
; @@ -96,14 +124,23 @@ export function Geo({ loc, zoom, moveable, markers, user }) { attribution={false} > {zoom && } - {NearbyMarkers(loc)} - {MyRoomsMarkers(user)} - {FriendMarkers(user)} + {moveable && nearbyMarkers} + {moveable && myRoomsMarkers} + {moveable && friendMarkers} + + { /* Overlay */} + {hovering && ( + +
+

{hoverText}

+
+ + )} + {user && ( // Shows the user marker From 094cdab65e061f5486c55a097c5331ed6b135c69 Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Fri, 19 Apr 2024 11:18:46 -0400 Subject: [PATCH 3/4] DM Security Fix --- frontend-next/src/app/dm/page.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend-next/src/app/dm/page.js b/frontend-next/src/app/dm/page.js index f71beb2..b46a1fb 100644 --- a/frontend-next/src/app/dm/page.js +++ b/frontend-next/src/app/dm/page.js @@ -26,6 +26,7 @@ function Chat() { const [doneLoading, setDoneLoading] = useState(false) // is the page done loading or not const [authUser, authLoading] = useAuthState(auth) // auth user object (used to obtain other user object) const [drawerOpen, setDrawerOpen] = useState(true); // drawer open state + const [isUserAuthed, setIsUserAuthed] = useState(false); // is the user authenticated or not var windowSize = useWindowSize() useEffect(() => { @@ -57,7 +58,10 @@ function Chat() { if (user) { const searchParams = new URLSearchParams(document.location.search); var path = searchParams.get("dm") - + if (path.includes(user.uid)) + setIsUserAuthed(true) + else + location.href = "/app" /*// Send entered message var payload = { body: "entered", @@ -102,7 +106,7 @@ function Chat() { return (
- {(authUser && doneLoading) && ( + {(authUser && doneLoading && isUserAuthed) && (
{/* Left Side of Page */}
From fcdc95505e798e3cc14aa210d474dc38010e52e0 Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Fri, 19 Apr 2024 11:24:34 -0400 Subject: [PATCH 4/4] Straggler --- frontend-next/src/components/app/map/geo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend-next/src/components/app/map/geo.js b/frontend-next/src/components/app/map/geo.js index 5ca4908..c5446d9 100644 --- a/frontend-next/src/components/app/map/geo.js +++ b/frontend-next/src/components/app/map/geo.js @@ -42,7 +42,7 @@ function FriendMarkers(user) { }); } } - +} /** * Geo Component for Wrapping Map