Add Search to Nearby Tab (#89)

frontend-next/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["next/babel", "next/core-web-vitals"],
+  "extends": ["next", "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

@@ -8,40 +8,9 @@ import { red } from '@mui/material/colors';
 
 // ONLY nearby markers
 function NearbyRoomMarkers({ loc, user, markers }) {
-  if (!markers || !loc || !user) {
-    return [null, null];
-  }
-
   const [markerArr, setMarkerArr] = useState([]);
   const [hoveredRoom, setHoveredRoom] = useState(null);
 
-  // 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;
-  };
-
-  const handleRoomHover = (roomObj) => {
-    setHoveredRoom(
-      <Overlay offset={[0, 100]}>
-        <div className="fixed bg-cyan-500 p-2 shadow-md rounded-lg">
-          <p className="font-bold text-white">{roomObj.name}</p>
-        </div>
-      </Overlay>
-    );
-  };
-
-  const handleRoomUnhover = (roomObj) => {
-    setHoveredRoom(null);
-  };
-
   // Mostly copied Nick's code from before
   useEffect(() => {
     if (loc && user) {
@@ -70,6 +39,37 @@ function NearbyRoomMarkers({ loc, user, markers }) {
       });
     }
   }, []);
+  
+  if (!markers || !loc || !user) {
+    return [null, null];
+  }
+
+  // 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;
+  };
+
+  const handleRoomHover = (roomObj) => {
+    setHoveredRoom(
+      <Overlay offset={[0, 100]}>
+        <div className="fixed bg-cyan-500 p-2 shadow-md rounded-lg">
+          <p className="font-bold text-white">{roomObj.name}</p>
+        </div>
+      </Overlay>
+    );
+  };
+
+  const handleRoomUnhover = (roomObj) => {
+    setHoveredRoom(null);
+  };
 
   return [markerArr, hoveredRoom];
 }

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

@@ -10,7 +10,7 @@ import { database } from "../../../../firebase-config";
 import { ref, set, get } from "firebase/database";
 
 // Component Imports
-import { ChatRoomSidebar } from "../datatypes";
+import { NearbySidebar } from "./nearby";
 
 // Friend Imports (TEMP)
 import { Friend, FriendRequest } from "../friends/friends";
@@ -88,56 +88,11 @@ function classNames(...classes) {
  * @returns {Object} - App Page Sidebar Component
  */
 export function Sidebar({user,location,loadingLoc}) {
-  const [nearbyArr, setNearbyArr] = useState([])
-  const [nearbyArrReady, setNearbyArrReady] = useState(false)
   const [friends, setFriends] = useState([])
   const [friendRequests, setFriendRequests] = useState(null)
   const [dms, setDMs] = useState((<div>No DMs</div>))
   const [myRoomArr, setMyRoomArr] = useState([])
 
-  useEffect(() => {
-    var myRoomArr = [];
-    // Add myRooms to Sidebar
-    for (var room in user.rooms) {
-      get(ref(database, `/rooms/${user.rooms[room].path}/${user.rooms[room].name}-${user.rooms[room].timestamp}`)).then((snapshot) => {
-        var newRoom = (
-          <ChatRoomSidebar
-            roomObj={snapshot.val()}
-            key={snapshot.val().timestamp}
-          />
-        );
-        myRoomArr.push(newRoom);
-      })
-    }
-    setMyRoomArr(myRoomArr)
-  }, [])
-
-  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) {
-            var newRoom = (
-              <ChatRoomSidebar
-                roomObj={rooms[room]}
-                key={rooms[room].timestamp}
-              />
-            );
-            nearbyArr.push(newRoom);
-          }
-          } else {
-            nearbyArr.push(<div className="pt-5">No Nearby Rooms<br />Create One?</div>)
-          }
-          setNearbyArr(nearbyArr)
-          setNearbyArrReady(true)
-      })
-    }
-  }, [location])
-
   useEffect(() => {
     if (user && user.friends) {
       get(ref(database, "/users/")).then((snapshot) => {
@@ -236,8 +191,7 @@ export function Sidebar({user,location,loadingLoc}) {
             <Tab.Panel>
               <div className="overflow-y-auto h-[90%]">
                 <div>
-                  {loadingLoc && <div>Loading...</div>}
-                  {nearbyArrReady && nearbyArr}
+                  <NearbySidebar location={location}/>
                 </div>
               </div>
             </Tab.Panel>

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

@@ -0,0 +1,84 @@
+import {useEffect, useState} from "react";
+
+import {database} from "../../../../firebase-config";
+import {get, ref} from "firebase/database";
+import { useForm } from "react-hook-form"
+import { ChatRoomSidebar } from "../datatypes";
+
+
+export function NearbySidebar({location}) {
+    const [nearbyArr, setNearbyArr] = useState([])
+    const [displayedRooms, setDisplayedRooms] = useState([])
+    const [nearbyArrReady, setNearbyArrReady] = useState(false)
+    const {register, watch, setFocus} = useForm({defaultValues: {search: null}})
+
+    // Search Bar Value
+    const search = watch("search")
+
+    // Search Bar Component
+    function SearchBar() {
+        return (
+            <div className="w-[97%]">
+                <input type="text" placeholder="Search" {...register("search")} className="w-full p-2 border-2 border-gray-300 rounded-lg col-span-3" value={null} />
+            </div>
+        )
+    }
+
+    // Filters Rooms Based on Search
+    useEffect(() => {
+        if (search != "") {
+            var rooms = []
+            for (var nearbyRoom in nearbyArr) {
+                if (nearbyArr[nearbyRoom].props.roomObj.name.toLowerCase().includes(search.toLowerCase()) || nearbyArr[nearbyRoom].props.roomObj.description.toLowerCase().includes(search.toLowerCase())) {
+                    rooms.push(<ChatRoomSidebar roomObj={nearbyArr[nearbyRoom].props.roomObj} key={nearbyArr[nearbyRoom].props.roomObj.timestamp}/>)
+                }
+            }
+        } else {
+            rooms = nearbyArr
+        }
+        setDisplayedRooms(rooms)
+    }, [search])
+
+    // Returns cursor to search bar on render
+    useEffect(() => {
+        setFocus("search")
+    }, [displayedRooms])
+
+    // Sets Initial Array of Nearby Rooms
+    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) {
+                var newRoom = (
+                  <ChatRoomSidebar
+                    roomObj={rooms[room]}
+                    key={rooms[room].timestamp}
+                  />
+                );
+                nearbyArr.push(newRoom);
+              }
+              } else {
+                nearbyArr.push()
+              }
+              setNearbyArr(nearbyArr)
+              setDisplayedRooms(nearbyArr)
+              setNearbyArrReady(true)
+          })
+        }
+      }, [location])
+
+
+      return (
+        <div>
+            <SearchBar/>
+            {nearbyArrReady && displayedRooms}
+            {!nearbyArrReady && <div>Loading...</div>}
+            {nearbyArrReady && nearbyArr.length === 0 && <div className="pt-5">No Nearby Rooms<br />Create One?</div>}
+        </div>
+      )
+}