Map Markers Fixed (#63)

frontend-next/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": "next/core-web-vitals",
+  "extends": ["next/babel","next/core-web-vitals" ],
   "rules": {
     "no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
     "jsx-a11y/alt-text": "off",

frontend-next/src/components/app/map/geo.js

@@ -1,32 +1,87 @@
 import { Map, Marker, ZoomControl } from "pigeon-maps";
+import { database } from "../../../../firebase-config";
+import { ref, get } from "firebase/database";
+import { useState, useEffect } from "react";
+
+// ONLY nearby markers
+function NearbyRoomMarkers({ loc, user }) {
+  const [markerArr, setMarkerArr] = useState([]);
+
+  // Room path in DB
+  const path =
+    String(loc.latitude.toFixed(2)).replace(".", "") +
+    "/" +
+    String(loc.longitude.toFixed(2)).replace(".", "") +
+    "/";
+
+  // Sorry for the href but <Link> doesn't work here
+  const handleRoomMarkerClick = (roomObj) => {
+    window.location.href =
+      "/chat?room=" + path + roomObj.name + "-" + roomObj.timestamp;
+  };
+
+  // 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;
+            console.log("RoomObj", roomObj);
+
+            return (
+              // Want to change this to be something other than markers (or something extra)
+              <Marker
+                key={markerKey}
+                anchor={[roomObj.latitude, roomObj.longitude]}
+                color="blue"
+                onClick={() => handleRoomMarkerClick(roomObj)}
+              ></Marker>
+            );
+          });
+          setMarkerArr(newMarkers);
+        }
+      });
+    }
+  }, []);
+
+  return markerArr;
+}
 
 /**
  * Geo Component for Wrapping Map
  * @constructor
  * @prop {JSON} loc - Location Object {latitude, longitude}
  * @prop {Number} zoom - Zoom Level
- * @prop {Boolean} locMarker - Show Location Marker
- * @prop {Markers[]} markers - Array of Markers
+ * @prop {Boolean} moveable - Moveable Map
+ * @prop {Boolean} markers - Enable Markers
  * @returns {Map} - Geo Component (As Map)
  */
-export function Geo({ loc, zoom, locMarker, markers }) {
-  if (loc) {
-    return (
-      <Map center={[loc.latitude, loc.longitude]} defaultZoom={zoom}>
-        {markers && markers}
-        {locMarker && (
-          <Marker
-            width={30}
-            anchor={[loc.latitude, loc.longitude]}
-            color="red"
-          />
-        )}
-        {zoom && <ZoomControl />}
-      </Map>
-    );
+export function Geo({ loc, zoom, moveable, markers, user }) {
+  const handleUserMarkerClick = () => {
+    window.location.href = "/user?uid=" + user.uid;
+  }
+
+  if (!loc) {
+    return <div>Getting Location...</div>;
   } else {
     return (
-      <Map className="rounded-lg" defaultCenter={[0, 0]} defaultZoom={zoom} />
+      <>
+        <Map
+          center={[loc.latitude, loc.longitude]}
+          defaultZoom={zoom}
+          mouseEvents={moveable}
+          touchEvents={moveable}
+        >
+          {zoom && <ZoomControl />}
+          {markers && NearbyRoomMarkers({ loc, user })}
+          {user && ( // Shows the user marker
+            <Marker anchor={[loc.latitude, loc.longitude]} color="red" onClick={handleUserMarkerClick} />
+          )}
+        </Map>
+      </>
     );
   }
 }

frontend-next/src/components/app/page/home.js

@@ -5,7 +5,7 @@ import { Geo } from "../map/geo";
  * @prop {JSON} user - User Object
  * @returns {Object} - Welcome Message Component
  */
- function WelcomeMessage({ user }) {
+function WelcomeMessage({ user }) {
   return (
     <div className="bg-white rounded-lg m-2 mt-4 text-left p-2 pl-5">
       <div>
@@ -23,7 +23,7 @@ import { Geo } from "../map/geo";
  * @prop {JSON} user - User Object
  * @returns {Object} - Home Page Component
  */
-export function HomePage({ loc, markers, user }) {
+export function HomePage({ loc, user }) {
   return (
     <>
       <WelcomeMessage user={user} />
@@ -31,9 +31,9 @@ export function HomePage({ loc, markers, user }) {
         <Geo
           loc={loc}
           zoom={14}
-          movable={true}
-          locMarker={true}
-          markers={markers}
+          moveable={true}
+          markers={true}
+          user={user}
         />
       </div>
     </>

frontend-next/src/components/app/profile/ProfileRoom.js

@@ -17,7 +17,8 @@ export function ProfileRoom({ room }) {
         <Geo
           loc={{ latitude: room.latitude, longitude: room.longitude }}
           zoom={12}
-          locMarker={false}
+          moveable={false}
+          markers={false}
         />
       </div>
       <div className="relative z-2 top-[-235px] text-left p-2">

frontend-next/src/components/app/sidebar/chat.js

@@ -43,8 +43,8 @@ export function Sidebar({chatRoomObj}) {
                 longitude: parseFloat(chatRoomObj.longitude.toFixed(2)),
               }}
               zoom={12}
-              movable={false}
-              marker={false}
+              moveable={false}
+              markers={false}
             />
           </div>
           <div className="z-10 top-0 left-0 w-[100%] h-[100%] absolute text-left pl-3 pt-2">