Most functions working

frontend-next/package-lock.json

@@ -16,6 +16,7 @@
         "react-beforeunload": "^2.6.0",
         "react-dom": "^18.2.0",
         "react-firebase-hooks": "^5.1.1",
+        "react-geolocated": "^4.1.2",
         "react-hook-form": "^7.50.1"
       },
       "devDependencies": {
@@ -4565,6 +4566,14 @@
         "react": ">= 16.8.0"
       }
     },
+    "node_modules/react-geolocated": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/react-geolocated/-/react-geolocated-4.1.2.tgz",
+      "integrity": "sha512-/Ec26Wb1h06bB/axHYclBxrG0Yqob0T0W9awRi87cyedC3rMnpOR+Aqb7Q26FAEF+dNWXIpVDGNw1YZtlPUAEw==",
+      "peerDependencies": {
+        "react": ">= 16.8.0 < 19.0.0"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.51.1",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.1.tgz",

frontend-next/package.json

@@ -17,6 +17,7 @@
     "react-beforeunload": "^2.6.0",
     "react-dom": "^18.2.0",
     "react-firebase-hooks": "^5.1.1",
+    "react-geolocated": "^4.1.2",
     "react-hook-form": "^7.50.1"
   },
   "devDependencies": {

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

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import { auth, database } from "../../../firebase-config";
 import { ref, onValue, set, remove, get } from "firebase/database";
 import { useAuthState } from "react-firebase-hooks/auth"
+import { useGeolocated } from "react-geolocated";
 
 // Refactored Component Imports
 // Data Structure Imports
@@ -24,9 +25,7 @@ function Home() {
   // State variables for app page
   const [user, setUser] = useState(null);
   const [mainTab, setMainTab] = useState("home"); // Primary tab
-  const [location, setLocation] = useState(null); // location variable [lat,long]
   const [loadingLoc, setLoadingLoc] = useState(true); // location variable loading, true = loading, false = finished loading
-
   const [authUser, loading] = useAuthState(auth)
 
   useEffect(() => {
@@ -42,15 +41,20 @@ function Home() {
     }
   }, [authUser])
 
+  const { coords } =
+        useGeolocated({
+            positionOptions: {
+                enableHighAccuracy: false,
+            },
+            userDecisionTimeout: 5000,
+        });
+
   useEffect(() => {
-    if ("geolocation" in navigator && user) {
-      // Retrieve latitude & longitude coordinates from `navigator.geolocation` Web API
-      navigator.geolocation.getCurrentPosition(({ coords }) => {
-        setLocation(coords);
+    console.log(coords)
+    if (coords) {
         setLoadingLoc(false);
-      })
     }
-  })
+  }, [coords])
 
   return (
     <div>
@@ -66,7 +70,7 @@ function Home() {
             {/* Main Page Section */}
             <div className="mr-2 h-[calc(100%-110px)]">
               {mainTab == "home" && !loadingLoc && (
-                <MainTabHome loc={location} user={user} />
+                <MainTabHome loc={coords} user={user} />
               )}
               {mainTab == "home" && loadingLoc && (
                 <MainTabHome loc={null} user={user} />
@@ -76,7 +80,8 @@ function Home() {
           {/* Sidebar (Right Side of Page) */}
             <Home_Sidebar
               user={user}
-              location={location}
+              location={coords}
+              loadingLoc={loadingLoc}
             />
         </div>
       )}

frontend-next/src/components/app/datatypes.js

@@ -102,14 +102,10 @@ export function Member({ memberObj }) {
 }
 
 // Chat Room Object for myRooms and Nearby in sidebar
-export function ChatRoomSidebar({ roomObj, click }) {
-  // TODO: Gross fix but it works
-  function clicker() {
-    click(roomObj);
-  }
+export function ChatRoomSidebar({ roomObj }) {
   return (
     <div
-      onClick={clicker}
+      onClick={() => location.href = "/chat?room=" + roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp}
       className="border-[black] border-1 shadow-lg p-2 m-2 rounded-lg cursor-pointer"
     >
       <div className="col-span-2">

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

@@ -1,16 +1,15 @@
 import { Form, useForm } from "react-hook-form";
 import { database } from "../../../../firebase-config";
-import { ref, set } from "firebase/database";
+import { ref, set, get } from "firebase/database";
+import { useEffect, useState } from "react";
 
+import { ChatRoomSidebar, Marker } from "../datatypes";
 // Sidebar on Home Page, with various functionality (create, nearby, my rooms)
 
 // CreateRoom Module for Sidebar Create Tab
 function CreateRoom({ loc }) {
   var { register, control, reset, handleSubmit } = useForm();
 
-  
-
-
   function createRoom(data) {
     reset();
     var path =
@@ -52,15 +51,51 @@ function CreateRoom({ loc }) {
 }
 
 export function Home_Sidebar({
-  tab,
-  nearby,
-  loadingNearby,
-  setTab,
-  isRoomLoading,
-  myRooms,
-  loadingLoc,
+  user,
   location,
+  loadingLoc
 }) {
+  const [tab, setTab] = useState("rooms");
+  const [nearbyArr, setNearbyArr] = useState([])
+  const [nearbyArrReady, setNearbyArrReady] = useState(false)
+
+  // Add myRooms to Sidebar
+  var myRoomArr = [];
+  for (var room in user.rooms) {
+    var newRoom = (
+      <ChatRoomSidebar
+        roomObj={user.rooms[room]}
+        key={user.rooms[room].timestamp}
+      />
+    );
+    myRoomArr.push(newRoom);
+  }
+
+  useEffect(() => {
+    var nearbyArr = []
+    if (location) {
+      var path = String(location.latitude.toFixed(2)).replace(".", "") + "/" + String(location.longitude.toFixed(2)).replace(".", "");
+      get(ref(database, `/rooms/${path}`)).then((snapshot) => {
+        // Add nearby to Sidebar
+        if (snapshot.exists()) {
+          var rooms = snapshot.val()
+          for (var room in rooms) {
+            console.log(rooms[room])
+            var newRoom = (
+              <ChatRoomSidebar
+                roomObj={rooms[room]}
+                key={rooms[room].timestamp}
+              />
+            );
+            nearbyArr.push(newRoom);
+          }
+          }
+          setNearbyArr(nearbyArr)
+          setNearbyArrReady(true)
+      })
+    }
+  }, [location])
+
   return (
     <div className="h-dvh">
       <div className="bg-white shadow-2xl rounded-lg m-2 h-[98%]">
@@ -107,24 +142,23 @@ export function Home_Sidebar({
         {tab == "nearby" && (
           <div className="overflow-y-auto h-[90%]">
             <div>
-              {!nearby && !loadingNearby && (
+              {!nearbyArr && !loadingLoc && (
                 <div>
                   No Nearby Rooms
                   <br />
                   Create One?
                 </div>
               )}
-              {loadingNearby && <div>Loading...</div>}
-              {nearby}
+              {loadingLoc && <div>Loading...</div>}
+              {nearbyArrReady && nearbyArr}
             </div>
           </div>
         )}
         {tab == "rooms" && (
           <div className="overflow-y-auto h-[90%]">
             <div>
-              {isRoomLoading && <div>Loading</div>}
-              {!myRooms && !isRoomLoading && <div>No User Saved Rooms</div>}
-              {myRooms}
+              {!myRoomArr && <div>No User Saved Rooms</div>}
+              {myRoomArr}
             </div>
           </div>
         )}