Nearby Room Fix / ChatMaps URL Formatting Fix (#103)

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((<span className="italic" key={roomName}>invites you to <Link href={"https://"+URLmatch[i]} className="underline">{roomName}</Link></span>))
+            newMessage.push((<span className="italic" key={roomName}>invites you to <Link href={"https://"+URLmatch[i]} className="underline" target="_blank">{roomName}</Link></span>))
           }
         } else {
           await imageProcessing("https://"+URLmatch[i]).then((result) => {

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 (<Marker
-          key={roomObj.path + "-" + roomObj.name}
-          anchor={[roomObj.latitude, roomObj.longitude]}
-          onClick={() => {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)}}
-        >
-          <ChatBubbleTwoToneIcon color="primary" fontSize="large"/>
-        </Marker>)
-      })
-    }
-  
+  if (moveable && user.rooms) {
+    // Load My Rooms Markers
+    var myRoomsMarkers = Object.values(user.rooms).map((roomObj) => {
+      return (<Marker
+        key={roomObj.path + "-" + roomObj.name}
+        anchor={[roomObj.latitude, roomObj.longitude]}
+        onClick={() => {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)}}
+      >
+        <ChatBubbleTwoToneIcon color="primary" fontSize="large"/>
+      </Marker>)
+    })
+  }
 
+  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 }) {
                 <ChatBubbleTwoToneIcon color="secondary" fontSize="large"/>
               </Marker>)
             })
+            setNearbyMarkers(nearbyMarkers);
           }
         }
       })
     }
-  }
+  }, [])
 
   if (!loc) {
     return <div>Getting Location...</div>;
@@ -77,7 +78,7 @@ export function Geo({ loc, zoom, moveable, user }) {
           attribution={false}
         >
           {zoom && <ZoomControl />}
-          {moveable && nearbyMarkers}
+          {moveable && nearbyMarkersFinal}
           {moveable && myRoomsMarkers}
 
           { /* Overlay */}