npease/ChatMaps
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Merge branch 'main' into npease-bugfix-room-load

Browse Source
This commit is contained in:
Nicholas Pease
2024-04-19 11:34:33 -04:00
committed by GitHub
parent d98de59fcf ca691d2203
commit 6fb88acf44
3 changed files with 116 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-next/src/app/app/page.js
+11 -1
View File
@@ -7,7 +7,7 @@ import Drawer from '@mui/material/Drawer';
// Firebase Imports
import { auth, database } from "../../../firebase-config";
import { ref, onValue } from "firebase/database";
import { ref, onValue, set } from "firebase/database";
import { useAuthState } from "react-firebase-hooks/auth"
// Component Imports
@@ -63,6 +63,16 @@ function Home() {
});
}, [])
// Saves users last loc to profile for friends map
useEffect(() => {
if (coords && user) {
set(ref(database,`users/${user.uid}/location`), {
latitude: coords.latitude,
longitude: coords.longitude
})
}
}, [coords, user])
return (
<div className="overflow-hidden h-dvh">
{user && (
frontend-next/src/app/dm/page.js
+6 -2
View File
@@ -26,6 +26,7 @@ function Chat() {
const [doneLoading, setDoneLoading] = useState(false) // is the page done loading or not
const [authUser, authLoading] = useAuthState(auth) // auth user object (used to obtain other user object)
const [drawerOpen, setDrawerOpen] = useState(true); // drawer open state
const [isUserAuthed, setIsUserAuthed] = useState(false); // is the user authenticated or not
var windowSize = useWindowSize()
useEffect(() => {
@@ -57,7 +58,10 @@ function Chat() {
if (user) {
const searchParams = new URLSearchParams(document.location.search);
var path = searchParams.get("dm")
if (path.includes(user.uid))
setIsUserAuthed(true)
else
location.href = "/app"
/*// Send entered message
var payload = {
body: "entered",
@@ -102,7 +106,7 @@ function Chat() {
return (
<div>
{(authUser && doneLoading) && (
{(authUser && doneLoading && isUserAuthed) && (
<div className="overflow-hidden h-dvh">
{/* Left Side of Page */}
<div className="overflow-hidden h-dvh md:mr-[400px]">
frontend-next/src/components/app/map/geo.js
+99 -75
View File
@@ -1,77 +1,47 @@
import { Map, Marker, ZoomControl, Overlay } from "pigeon-maps";
import { database } from "../../../../firebase-config";
import { ref, get} from "firebase/database";
import { useState, useEffect } from "react";
import { useState } from "react";
import ChatBubbleTwoToneIcon from '@mui/icons-material/ChatBubbleTwoTone';
import PersonOutlineTwoToneIcon from '@mui/icons-material/PersonOutlineTwoTone';
import { red } from '@mui/material/colors';
// ONLY nearby markers
function NearbyRoomMarkers({ loc, user, markers }) {
const [markerArr, setMarkerArr] = useState([]);
const [hoveredRoom, setHoveredRoom] = useState(null);
/**
* Nearby Markers Grabber
* @param {JSON} location - Location Object {latitude, longitude}
* @returns {Array} - Array of Markers {<Marker>}
*/
function NearbyMarkers(location) {
const [newMarkers, setNewMarkers] = useState(null);
if (location) {
const path = String(location.latitude.toFixed(2)).replace(".", "") +"/" +String(location.longitude.toFixed(2)).replace(".", "") +"/";
get(ref(database, `/rooms/${path}`)).then((snapshot) => {
if (snapshot.exists()) {
const rooms = snapshot.val();
setNewMarkers(rooms)
}
})
}
return newMarkers;
}
// Mostly copied Nick's code from before
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 (
// Want to change this to be something other than markers (or something extra)
<Marker
key={markerKey}
anchor={[roomObj.latitude, roomObj.longitude]}
onClick={() => handleRoomMarkerClick(roomObj)}
onMouseOver={() => handleRoomHover(roomObj)}
onMouseOut={() => handleRoomUnhover(roomObj)}
style={{pointerEvents:'auto'} /* So stupid */}
>
<ChatBubbleTwoToneIcon color="primary" fontSize="large"/>
</Marker>
);
});
setMarkerArr(newMarkers);
/**
* Friend Markers Grabber
* @param {JSON} user - User Object
* @returns {Array} - Array of Markers {<Marker>}
*/
function FriendMarkers(user) {
var friendMarkers = []
if (user && "friends" in user && "friends" in user.friends) {
for (var friend in user.friends.friends) {
get(ref(database, `/users/${friend}`)).then((snapshot) => {
var friendData = snapshot.val();
if (friendData.location) {
friendMarkers.push(friendData);
}
});
}
}, []);
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];
}
/**
@@ -83,15 +53,61 @@ function NearbyRoomMarkers({ loc, user, markers }) {
* @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;
};
export function Geo({ loc, zoom, moveable, user }) {
const [hovering, setHovering] = useState(false);
const [hoverText, setHoverText] = useState("");
const [hoverAnchor, setHoverAnchor] = useState([null,null]);
if (moveable) {
// Load My Rooms Markers
var myRoomsMarkers = Object.values(user.rooms).map((roomObj) => {
return (<Marker
key={roomObj.path + "-" + roomObj.name}
anchor={[roomObj.latitude, roomObj.longitude]}
onClick={() => {window.location.href = "/chat?room=" + roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp;}}
style={{pointerEvents:'auto'} /* So stupid */}
onMouseOver={() => {setHoverText(roomObj.name);setHovering(true);setHoverAnchor([roomObj.latitude, roomObj.longitude])}}
onMouseOut={() => {setHovering(false)}}
>
<ChatBubbleTwoToneIcon color="primary" fontSize="large"/>
</Marker>)
})
// Load Nearby Markers
var nearbyMarkers = NearbyMarkers(loc);
if (nearbyMarkers) {
var nearbyMarkers = Object.values(nearbyMarkers).map((roomObj) => {
return (<Marker
key={roomObj.path + "-" + roomObj.name}
anchor={[roomObj.latitude, roomObj.longitude]}
onClick={() => {window.location.href = "/chat?room=" + roomObj.path + "/" + roomObj.name + "-" + roomObj.timestamp;}}
style={{pointerEvents:'auto'} /* So stupid */}
onMouseOver={() => {setHoverText(roomObj.name);setHovering(true);setHoverAnchor([roomObj.latitude, roomObj.longitude])}}
onMouseOut={() => {setHovering(false)}}
>
<ChatBubbleTwoToneIcon color="secondary" fontSize="large"/>
</Marker>)
})
}
// Load Friend Markers
var friendMarkers = FriendMarkers(user);
friendMarkers = Object.values(user.rooms).map((friendData) => {
return (<Marker
key={friendData.path + "-" + friendData.name}
anchor={[friendData.latitude, friendData.longitude]}
onClick={() => {window.location.href = "/chat?room=" + friendData.path + "/" + friendData.name + "-" + friendData.timestamp;}}
style={{pointerEvents:'auto'} /* So stupid */}
onMouseOver={() => {setHoverText(friendData.username);setHovering(true);setHoverAnchor([friendData.location.latitude, friendData.location.longitude])}}
onMouseOut={() => {setHovering(false)}}
>
<img src={friendData.pfp} className="w-[50px]"/>
</Marker>)
})
}
// SCUFFED AF
var rooms = NearbyRoomMarkers({ loc, user, markers });
var room_markers = rooms[0];
var room_overlay = rooms[1];
if (!loc) {
return <div>Getting Location...</div>;
@@ -105,16 +121,24 @@ export function Geo({ loc, zoom, moveable, markers, user }) {
touchEvents={moveable}
attribution={false}
>
{
room_overlay /* Renders the room name overlay when you mouse over room */
}
{zoom && <ZoomControl />}
{room_markers /* Renders the actual room markers */}
{moveable && nearbyMarkers}
{moveable && myRoomsMarkers}
{moveable && friendMarkers}
{ /* Overlay */}
{hovering && (
<Overlay anchor={hoverAnchor} offset={[0, 0]}>
<div className="bg-white rounded-lg p-2">
<p className="text-lg">{hoverText}</p>
</div>
</Overlay>
)}
{user && ( // Shows the user marker
<Marker
anchor={[loc.latitude, loc.longitude]}
color="red"
onClick={handleUserMarkerClick}
style={{pointerEvents:'auto'} /* So stupid */}
>
<PersonOutlineTwoToneIcon sx={{ color: red[500] }} fontSize="large"/>