From 3aad970fd6716eccc8853ea8396e0fe411b4679a Mon Sep 17 00:00:00 2001
From: ClarkLach <102780236+ClarkLach@users.noreply.github.com>
Date: Fri, 5 Apr 2024 22:55:00 -0400
Subject: [PATCH 1/4] next/babel error fix

---
 frontend-next/.babelrc       | 5 +++++
 frontend-next/.eslintrc.json | 8 +-------
 2 files changed, 6 insertions(+), 7 deletions(-)
 create mode 100644 frontend-next/.babelrc

diff --git a/frontend-next/.babelrc b/frontend-next/.babelrc
new file mode 100644
index 0000000..36a8560
--- /dev/null
+++ b/frontend-next/.babelrc
@@ -0,0 +1,5 @@
+{
+    "presets": ["next/babel"],
+    "plugins": []
+  }
+  
\ No newline at end of file
diff --git a/frontend-next/.eslintrc.json b/frontend-next/.eslintrc.json
index 471d759..0ad09f5 100644
--- a/frontend-next/.eslintrc.json
+++ b/frontend-next/.eslintrc.json
@@ -1,9 +1,3 @@
 {
-  "extends": "next/core-web-vitals",
-  "rules": {
-    "no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
-    "jsx-a11y/alt-text": "off",
-    "@next/next/no-img-element": "off",
-    "no-console": 1
-  }
+  "extends": ["next/babel","next/core-web-vitals"]
 }

From 1498e2615c922c87e73fe2f52ccf446d3b2933aa Mon Sep 17 00:00:00 2001
From: ClarkLach <102780236+ClarkLach@users.noreply.github.com>
Date: Fri, 5 Apr 2024 22:59:44 -0400
Subject: [PATCH 2/4] Actually Fixed next/babel error

---
 frontend-next/.babelrc       | 5 -----
 frontend-next/.eslintrc.json | 8 +++++++-
 2 files changed, 7 insertions(+), 6 deletions(-)
 delete mode 100644 frontend-next/.babelrc

diff --git a/frontend-next/.babelrc b/frontend-next/.babelrc
deleted file mode 100644
index 36a8560..0000000
--- a/frontend-next/.babelrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-    "presets": ["next/babel"],
-    "plugins": []
-  }
-  
\ No newline at end of file
diff --git a/frontend-next/.eslintrc.json b/frontend-next/.eslintrc.json
index 0ad09f5..b256ceb 100644
--- a/frontend-next/.eslintrc.json
+++ b/frontend-next/.eslintrc.json
@@ -1,3 +1,9 @@
 {
-  "extends": ["next/babel","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",
+    "@next/next/no-img-element": "off",
+    "no-console": 1
+  }
 }

From fc1adb56623c3ad66f7e3a746e31f977597d5f77 Mon Sep 17 00:00:00 2001
From: ClarkLach <102780236+ClarkLach@users.noreply.github.com>
Date: Sat, 6 Apr 2024 01:32:11 -0400
Subject: [PATCH 3/4] Main Page Markers are back.

Still a bit to do here.
---
 frontend-next/src/components/app/map/geo.js   | 76 ++++++++++++++-----
 .../src/components/app/map/marker.js          |  0
 frontend-next/src/components/app/page/home.js | 10 +--
 .../src/components/app/profile/ProfileRoom.js |  3 +-
 .../src/components/app/sidebar/chat.js        |  4 +-
 5 files changed, 68 insertions(+), 25 deletions(-)
 delete mode 100644 frontend-next/src/components/app/map/marker.js

diff --git a/frontend-next/src/components/app/map/geo.js b/frontend-next/src/components/app/map/geo.js
index f5e3182..4453ce6 100644
--- a/frontend-next/src/components/app/map/geo.js
+++ b/frontend-next/src/components/app/map/geo.js
@@ -1,4 +1,51 @@
 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 handleMarkerClick = (name) => {
+    window.location.href = "/chat?room=" + path + name;
+  };
+
+  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 (
+              <Marker
+                key={markerKey}
+                anchor={[roomObj.latitude, roomObj.longitude]}
+                color="blue"
+                onClick={() => handleMarkerClick(roomObj.name)}
+              ></Marker>
+            );
+          });
+          setMarkerArr(newMarkers);
+        }
+      });
+    }
+  }, []);
+
+  return markerArr;
+}
 
 /**
  * Geo Component for Wrapping Map
@@ -6,27 +53,22 @@ import { Map, Marker, ZoomControl } from "pigeon-maps";
  * @prop {JSON} loc - Location Object {latitude, longitude}
  * @prop {Number} zoom - Zoom Level
  * @prop {Boolean} locMarker - Show Location Marker
- * @prop {Markers[]} markers - Array of 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 }) {
+  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}>
+          {zoom && <ZoomControl />}
+          {user && ( // Shows the user marker
+            <Marker anchor={[loc.latitude, loc.longitude]} color="red" />
+          )}
+          {NearbyRoomMarkers({ loc, user })}
+        </Map>
+      </>
     );
   }
 }
diff --git a/frontend-next/src/components/app/map/marker.js b/frontend-next/src/components/app/map/marker.js
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend-next/src/components/app/page/home.js b/frontend-next/src/components/app/page/home.js
index 1fbf3fa..a2bd14b 100644
--- a/frontend-next/src/components/app/page/home.js
+++ b/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>
     </>
diff --git a/frontend-next/src/components/app/profile/ProfileRoom.js b/frontend-next/src/components/app/profile/ProfileRoom.js
index 796978f..8b25a31 100644
--- a/frontend-next/src/components/app/profile/ProfileRoom.js
+++ b/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">
diff --git a/frontend-next/src/components/app/sidebar/chat.js b/frontend-next/src/components/app/sidebar/chat.js
index 401509b..f8d3062 100644
--- a/frontend-next/src/components/app/sidebar/chat.js
+++ b/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">

From 1de58de8dea8d474acbbc9e62d5bca2cef9e6b3c Mon Sep 17 00:00:00 2001
From: ClarkLach <102780236+ClarkLach@users.noreply.github.com>
Date: Sat, 6 Apr 2024 01:46:32 -0400
Subject: [PATCH 4/4] Room/User Links on Map

---
 frontend-next/src/components/app/map/geo.js | 29 +++++++++++++++------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/frontend-next/src/components/app/map/geo.js b/frontend-next/src/components/app/map/geo.js
index 4453ce6..24daf29 100644
--- a/frontend-next/src/components/app/map/geo.js
+++ b/frontend-next/src/components/app/map/geo.js
@@ -3,7 +3,6 @@ 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([]);
@@ -16,10 +15,12 @@ function NearbyRoomMarkers({ loc, user }) {
     "/";
 
   // Sorry for the href but <Link> doesn't work here
-  const handleMarkerClick = (name) => {
-    window.location.href = "/chat?room=" + path + name;
+  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) => {
@@ -28,13 +29,15 @@ function NearbyRoomMarkers({ loc, user }) {
 
           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={() => handleMarkerClick(roomObj.name)}
+                onClick={() => handleRoomMarkerClick(roomObj)}
               ></Marker>
             );
           });
@@ -52,21 +55,31 @@ function NearbyRoomMarkers({ loc, user }) {
  * @constructor
  * @prop {JSON} loc - Location Object {latitude, longitude}
  * @prop {Number} zoom - Zoom Level
- * @prop {Boolean} locMarker - Show Location Marker
+ * @prop {Boolean} moveable - Moveable Map
+ * @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;
+  }
+
   if (!loc) {
     return <div>Getting Location...</div>;
   } else {
     return (
       <>
-        <Map center={[loc.latitude, loc.longitude]} 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" />
+            <Marker anchor={[loc.latitude, loc.longitude]} color="red" onClick={handleUserMarkerClick} />
           )}
-          {NearbyRoomMarkers({ loc, user })}
         </Map>
       </>
     );