From 925c6f28fefcb43a55d59c3d741b40fb9b9a36fa Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Fri, 19 Apr 2024 11:09:12 -0400
Subject: [PATCH] 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 {<Marker>}
+ */
 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)
-          <Marker
-            key={roomObj.path + "-" + index}
-            anchor={[roomObj.latitude, roomObj.longitude]}
-            onClick={() => (roomObj) => {window.location.href = "/chat?room=" + path + roomObj.name + "-" + roomObj.timestamp;}}
-            style={{pointerEvents:'auto'} /* So stupid */}
-          >
-            <ChatBubbleTwoToneIcon color="secondary" fontSize="large"/>
-          </Marker>
-        );
-      }); 
-      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 (<Marker
-      key={roomObj.path + "-" + roomObj.name}
-      anchor={[roomObj.latitude, roomObj.longitude]}
-      onClick={() => (roomObj) => {window.location.href = "/chat?room=" + path + roomObj.name + "-" + roomObj.timestamp;}}
-      style={{pointerEvents:'auto'} /* So stupid */}
-    >
-      <ChatBubbleTwoToneIcon color="primary" fontSize="large"/>
-    </Marker>)
-  })
-  return myRoomsMarkers;
-}
-
+/**
+ * Friend Markers Grabber
+ * @param {JSON} user - User Object
+ * @returns {Array} - Array of Markers {<Marker>}
+ */
 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(<Marker
-          anchor={[friendData.location.latitude, friendData.location.longitude]}
-          onClick={() => (friendData) => {window.location.href = "/user?uid=" + friendData.uid;}}
-          style={{pointerEvents:'auto'} /* So stupid */}>
-            <img src={friendData.pfp} className="w-[50px]"/>
-          </Marker>);
-      }
-    });
+  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 (<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>)
+    })
+  
+
+    // Load Nearby Markers
+    var nearbyMarkers = NearbyMarkers(loc);
+    if (nearbyMarkers) {
+      var nearbyMarkers = Object.values(nearbyMarkers).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="secondary" fontSize="large"/>
+        </Marker>)
+      })
+    }
+
+    // Load Friend Markers
+    
+    var friendMarkers = FriendMarkers(user);
+    friendMarkers = Object.values(user.rooms).map((friendData) => {
+      return (<Marker
+        key={friendData.path + "-" + friendData.name}
+        anchor={[friendData.latitude, friendData.longitude]}
+        onClick={() => {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)}}
+      >
+        <img src={friendData.pfp} className="w-[50px]"/>
+      </Marker>)
+    })
+  }
 
-  // SCUFFED AF
-  //var rooms = NearbyRoomMarkers({ loc, user, markers });
 
   if (!loc) {
     return <div>Getting Location...</div>;
@@ -96,14 +124,23 @@ export function Geo({ loc, zoom, moveable, markers, user }) {
           attribution={false}
         >
           {zoom && <ZoomControl />}
-          {NearbyMarkers(loc)}
-          {MyRoomsMarkers(user)}
-          {FriendMarkers(user)}
+          {moveable && nearbyMarkers}
+          {moveable && myRoomsMarkers}
+          {moveable && friendMarkers}
+
+          { /* Overlay */}
+          {hovering && (
+            <Overlay anchor={hoverAnchor} offset={[0, 0]}>
+              <div className="bg-white rounded-lg p-2">
+                <p className="text-lg">{hoverText}</p>
+              </div>
+            </Overlay>
+          )}
+
           {user && ( // Shows the user marker
             <Marker
               anchor={[loc.latitude, loc.longitude]}
               color="red"
-              onClick={handleUserMarkerClick}
               style={{pointerEvents:'auto'} /* So stupid */}
             >
               <PersonOutlineTwoToneIcon sx={{ color: red[500] }} fontSize="large"/>