From b8a732eea58d6160922aa15e076538c183813e1c Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Fri, 19 Apr 2024 09:08:48 -0400 Subject: [PATCH 1/2] Add Nearby Rooms Search --- .../src/components/app/sidebar/home.js | 50 +---------- .../src/components/app/sidebar/nearby.js | 84 +++++++++++++++++++ 2 files changed, 86 insertions(+), 48 deletions(-) create mode 100644 frontend-next/src/components/app/sidebar/nearby.js diff --git a/frontend-next/src/components/app/sidebar/home.js b/frontend-next/src/components/app/sidebar/home.js index 3d28ef8..a21014f 100644 --- a/frontend-next/src/components/app/sidebar/home.js +++ b/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((
No DMs
)) 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 = ( - - ); - 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 = ( - - ); - nearbyArr.push(newRoom); - } - } else { - nearbyArr.push(
No Nearby Rooms
Create One?
) - } - 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}) {
- {loadingLoc &&
Loading...
} - {nearbyArrReady && nearbyArr} +
diff --git a/frontend-next/src/components/app/sidebar/nearby.js b/frontend-next/src/components/app/sidebar/nearby.js new file mode 100644 index 0000000..35a791f --- /dev/null +++ b/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 ( +
+ +
+ ) + } + + // 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() + } + } + } 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 = ( + + ); + nearbyArr.push(newRoom); + } + } else { + nearbyArr.push() + } + setNearbyArr(nearbyArr) + setDisplayedRooms(nearbyArr) + setNearbyArrReady(true) + }) + } + }, [location]) + + + return ( +
+ + {nearbyArrReady && displayedRooms} + {!nearbyArrReady &&
Loading...
} + {nearbyArrReady && nearbyArr.length === 0 &&
No Nearby Rooms
Create One?
} +
+ ) +} \ No newline at end of file From 803432db8e1b6e7352822df4b00d815c40519c8f Mon Sep 17 00:00:00 2001 From: Nicholas Pease Date: Fri, 19 Apr 2024 09:13:41 -0400 Subject: [PATCH 2/2] Linting Fixes --- frontend-next/.eslintrc.json | 2 +- frontend-next/src/components/app/map/geo.js | 62 ++++++++++----------- 2 files changed, 32 insertions(+), 32 deletions(-) diff --git a/frontend-next/.eslintrc.json b/frontend-next/.eslintrc.json index a12e071..4380c90 100644 --- a/frontend-next/.eslintrc.json +++ b/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", diff --git a/frontend-next/src/components/app/map/geo.js b/frontend-next/src/components/app/map/geo.js index 6611dc6..2e17e59 100644 --- a/frontend-next/src/components/app/map/geo.js +++ b/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 doesn't work here - const handleRoomMarkerClick = (roomObj) => { - window.location.href = - "/chat?room=" + path + roomObj.name + "-" + roomObj.timestamp; - }; - - const handleRoomHover = (roomObj) => { - setHoveredRoom( - -
-

{roomObj.name}

-
- - ); - }; - - 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 doesn't work here + const handleRoomMarkerClick = (roomObj) => { + window.location.href = + "/chat?room=" + path + roomObj.name + "-" + roomObj.timestamp; + }; + + const handleRoomHover = (roomObj) => { + setHoveredRoom( + +
+

{roomObj.name}

+
+ + ); + }; + + const handleRoomUnhover = (roomObj) => { + setHoveredRoom(null); + }; return [markerArr, hoveredRoom]; }