diff --git a/frontend-next/src/components/app/datatypes.js b/frontend-next/src/components/app/datatypes.js index ed72e03..c03cd9c 100644 --- a/frontend-next/src/components/app/datatypes.js +++ b/frontend-next/src/components/app/datatypes.js @@ -84,7 +84,7 @@ export async function RMF(message) { // Rich Message Formatting for Chat Maps if (URLmatch[i].includes("/chat?")) { var roomName = URLmatch[i].split("?")[1].split("/")[2].split("-")[0].replaceAll("%20"," ") - newMessage.push((invites you to {roomName})) + newMessage.push((invites you to {roomName})) } } else { await imageProcessing("https://"+URLmatch[i]).then((result) => { diff --git a/frontend-next/src/components/app/map/geo.js b/frontend-next/src/components/app/map/geo.js index 8bd43b3..ecc4d38 100644 --- a/frontend-next/src/components/app/map/geo.js +++ b/frontend-next/src/components/app/map/geo.js @@ -1,7 +1,7 @@ import { Map, Marker, ZoomControl, Overlay } from "pigeon-maps"; import { database } from "../../../../firebase-config"; import { ref, get} from "firebase/database"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import ChatBubbleTwoToneIcon from '@mui/icons-material/ChatBubbleTwoTone'; import PersonOutlineTwoToneIcon from '@mui/icons-material/PersonOutlineTwoTone'; import { red } from '@mui/material/colors'; @@ -19,30 +19,30 @@ export function Geo({ loc, zoom, moveable, user }) { const [hovering, setHovering] = useState(false); const [hoverText, setHoverText] = useState(""); const [hoverAnchor, setHoverAnchor] = useState([null,null]); + const [nearbyMarkersFinal, setNearbyMarkers] = useState(null); - if (moveable) { - if (user.rooms) { - // 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)}} - > - - ) - }) - } - + if (moveable && user.rooms) { + // 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)}} + > + + ) + }) + } + useEffect(() => { // Load Nearby Markers - var nearbyMarkers = null; - if (loc) { + if (moveable && loc) { const path = String(loc.latitude.toFixed(2)).replace(".", "") +"/" +String(loc.longitude.toFixed(2)).replace(".", "") +"/"; get(ref(database, `/rooms/${path}`)).then((snapshot) => { + console.log("ran") if (snapshot.exists()) { nearbyMarkers = snapshot.val(); if (nearbyMarkers) { @@ -58,11 +58,12 @@ export function Geo({ loc, zoom, moveable, user }) { ) }) + setNearbyMarkers(nearbyMarkers); } } }) } - } + }, []) if (!loc) { return
Getting Location...
; @@ -77,7 +78,7 @@ export function Geo({ loc, zoom, moveable, user }) { attribution={false} > {zoom && } - {moveable && nearbyMarkers} + {moveable && nearbyMarkersFinal} {moveable && myRoomsMarkers} { /* Overlay */}