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

@@ -81,17 +81,18 @@ return (
 
 // Map module for main page and chat room sidebar
 // TODO: MAKE NOT MOVABLE
-function Geo({loc, zoom, movable}) {
+function Geo({loc, zoom, movable, locMarker, markers}) {
   if (loc) {
     return (
-      <Map className="rounded-lg" center={[loc.latitude, loc.longitude]} defaultZoom={14}>
-        <Marker width={50} anchor={[loc.latitude, loc.longitude]} color="red"/>
+      <Map center={[loc.latitude, loc.longitude]} defaultZoom={zoom}>
+        {markers && markers}
+        {locMarker && <Marker width={30} anchor={[loc.latitude, loc.longitude]} color="red"/>}
         {zoom && <ZoomControl />}
       </Map>
     )
   } else {
     return (
-      <Map className="rounded-lg" defaultCenter={[0, 0]} defaultZoom={14}/>
+      <Map className="rounded-lg" defaultCenter={[0, 0]} defaultZoom={zoom}/>
     )
   }
   
@@ -99,7 +100,6 @@ function Geo({loc, zoom, movable}) {
 
 // Module for Welcome Message on main tab landing page
 function WelcomeMessage() {
-  //TODO: REALLY GROSS WAY TO GET COOKIES, NEED NEW WAY TO STORE USER DATA WITHOUT API CALLS. THIS PAGE HAS TO BE CLIENT SIDE DUE TO MAPS / GEOLOCATION
   const [data, setData] = useState(null)
   const [isLoading, setLoading] = useState(true)
   useEffect(() => {
@@ -128,12 +128,12 @@ function WelcomeMessage() {
 
 // Main Tabs
 // Primary App Landing Page
-function MainTabHome({loc}) {
+function MainTabHome({loc, markers}) {
   return (
     <>
     <WelcomeMessage />
     <div className='h-[calc(100%-110px)] m-5 rounded-lg'>
-      <Geo loc={loc} zoom={true} movable={true}/>
+      <Geo loc={loc} zoom={14} movable={true} locMarker={true} markers={markers}/>
     </div>
     </>
   )
@@ -214,6 +214,7 @@ function Home() {
   const [chatroomUsersLoading ,setChatroomUsersLoading] = useState(true)
   const [users, setUsers] = useState(null) // all users from firebase
   const [alreadyLeft, setAlreadyLeft] = useState(false) // if already left from room
+  const [markers, setMarkers] = useState([])
 
   // Grabs user data, saves to user, then lists the users saved rooms
   useEffect(() => {
@@ -224,10 +225,13 @@ function Home() {
         var rooms = snapshot.val()
         setMyRoomsObj(rooms)
         var roomArr = []
+        var markerArr = markers
         for (var room in rooms) {
           var newRoom = <ChatRoomSidebar roomObj={rooms[room]} key={rooms[room].timestamp} click={selectChatRoom}/>
+          markerArr.push(<Marker width={30} anchor={[rooms[room].latitude, rooms[room].longitude]} color="blue"/>)
           roomArr.push(newRoom)
         }
+        setMarkers(markerArr)
         setRoomData(roomArr)
         setRoomLoading(false)
       })
@@ -241,15 +245,18 @@ function Home() {
       navigator.geolocation.getCurrentPosition(({ coords }) => {
         setLocation(coords)
         setLoadingLoc(false)
+        var nearbyArr = []
         var path = String(coords.latitude.toFixed(2)).replace(".","")+"/"+String(coords.longitude.toFixed(2)).replace(".","")
-        setLoadingNearby(true)
-        onValue(ref(database, `/rooms/${path}`), (snapshot) => {
-          var nearbyArr = []
+        var markersArr = markers
+        get(ref(database, `/rooms/${path}`)).then((snapshot) => {
           if (snapshot.exists()) {
             var data = snapshot.val()
             for (var room in data) {
               nearbyArr.push(<ChatRoomSidebar roomObj={data[room]} click={selectChatRoom}/>)
+              // TODO: RANDOM LAST DIGIT TO MOVE AROUND THE MAP
+              markersArr.push(<Marker width={30} anchor={[data[room].latitude, data[room].longitude]} color="blue"/>)
             }
+            setMarkers(markersArr)
             setLoadingNearby(false)
             setNearby(nearbyArr)
           } else {
@@ -451,8 +458,8 @@ function Home() {
         </div>
         {/* Main Page Section */}
         <div className="mr-2 h-[calc(100%-110px)]">
-          {(mainTab == "home" && !loadingLoc) && <MainTabHome loc={location}/>}
-          {(mainTab == "home" && loadingLoc) && <MainTabHome loc={null}/>}
+          {(mainTab == "home" && !loadingLoc) && <MainTabHome loc={location} markers={markers}/>}
+          {(mainTab == "home" && loadingLoc) && <MainTabHome loc={null} markers={markers}/>}
           {mainTab == "chat" && <MainTabChatRoom roomObj={chatRoomObj}/>}
         </div>
       </div>
@@ -489,8 +496,8 @@ function Home() {
       <div className="h-dvh">
         <div className="m-2 h-[98%] grid grid-cols-1">
           <div className='bg-white rounded-lg m-2 shadow-2xl relative'>
-              <div className='w-[100%] h-[100%] opacity-50 absolute'>
-                <Geo loc={{latitude: chatRoomObj.latitude.toFixed(3), longitude: chatRoomObj.longitude.toFixed(3)}} zoom={false} movable={false}/>
+              <div className='w-[100%] h-[100%] opacity-50 absolute rounded-lg z-10'>
+                <Geo loc={{latitude: parseFloat(chatRoomObj.latitude.toFixed(2)), longitude: parseFloat(chatRoomObj.longitude.toFixed(2))}} zoom={12} movable={false} marker={false}/>
               </div>
               <div className='z-10 top-0 left-0 w-[100%] h-[100%] absolute text-left pl-3 pt-2'>
                 <span className='font-bold text-[24px]'>{chatRoomObj.name}</span><br/>