-
👥
+
+
+
Join Room
Enter room details to join your group
@@ -241,4 +278,4 @@ export default function HomePage() {
)}
);
-}
\ No newline at end of file
+}
diff --git a/Frontend/src/pages/HostRoomPage.jsx b/Frontend/src/pages/HostRoomPage.jsx
index 959994e..60cbd24 100644
--- a/Frontend/src/pages/HostRoomPage.jsx
+++ b/Frontend/src/pages/HostRoomPage.jsx
@@ -1,6 +1,6 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
import { useParams, useNavigate } from "react-router-dom";
-import { useMap } from "../context/MapContext";
+import { useMap } from "../context/useMap";
import MapView from "../components/MapView";
import LiveChat from "../components/LiveChat";
import SOSOverlay from "../components/SOSOverlay";
@@ -132,14 +132,14 @@ export default function HostRoomPage() {
QRCode.toDataURL(joinUrl, { width: 256, height: 256 })
.then(setQrCode)
.catch((err) => console.error("QR generation error:", err));
- }, [roomId]);
+ }, [joinUrl]);
useEffect(() => {
// Generate watch QR code
QRCode.toDataURL(watchUrl, { width: 256, height: 256 })
.then(setWatchQrCode)
.catch((err) => console.error("Watch QR generation error:", err));
- }, [roomId]);
+ }, [watchUrl]);
// Fetch watchers periodically
useEffect(() => {
@@ -174,7 +174,7 @@ export default function HostRoomPage() {
}, [syncRoomLocations]);
// Start location tracking when host enters room
- const handleLocationUpdate = (latitude, longitude, accuracy = null, speed = null) => {
+ const handleLocationUpdate = useCallback((latitude, longitude, accuracy = null, speed = null) => {
accuracyManagerRef.current.addReading(accuracy);
const filtered = locationSmootherRef.current.filter(latitude, longitude, accuracy, speed);
@@ -208,9 +208,9 @@ export default function HostRoomPage() {
accuracy: accuracy,
});
}
- };
+ }, [currentRoom, setLocations, socket, user]);
- const startLocationTracking = () => {
+ const startLocationTracking = useCallback(() => {
if (!currentRoom || !user) {
setError("Room not joined yet");
return;
@@ -256,7 +256,7 @@ export default function HostRoomPage() {
timeout: 10000,
maximumAge: 3000,
});
- };
+ }, [currentRoom, handleLocationUpdate, setError, user]);
useEffect(() => {
if (!currentRoom || !user) {
@@ -281,7 +281,7 @@ export default function HostRoomPage() {
watchIdRef.current = null;
}
};
- }, [currentRoom, user, socket, setError]);
+ }, [currentRoom, user, socket, setError, startLocationTracking]);
const resetTripState = () => {
tripStateRef.current = {
@@ -445,7 +445,7 @@ export default function HostRoomPage() {
if (results.length === 0) {
setTripSearchError("No results found");
}
- } catch (err) {
+ } catch {
setTripSearchError("Search failed");
} finally {
setIsTripSearching(false);
diff --git a/Frontend/src/pages/JoinRoomPage.jsx b/Frontend/src/pages/JoinRoomPage.jsx
index 322766a..15506dc 100644
--- a/Frontend/src/pages/JoinRoomPage.jsx
+++ b/Frontend/src/pages/JoinRoomPage.jsx
@@ -1,18 +1,19 @@
-import { useState, useEffect, useRef } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import { useMap } from "../context/MapContext";
+import { useEffect, useRef, useState } from "react";
+import { MapPin, Users } from "lucide-react";
+import { useNavigate, useParams } from "react-router-dom";
import AuthMenu from "../components/AuthMenu";
+import { useMap } from "../context/useMap";
export default function JoinRoomPage() {
const { roomId } = useParams();
const navigate = useNavigate();
- const { joinRoom, currentRoom, isLoading, error } = useMap();
+ const { joinRoom, isLoading, error } = useMap();
const [memberName, setMemberName] = useState("");
const [roomInfo, setRoomInfo] = useState(null);
const [localError, setLocalError] = useState("");
- const normalizedRoomId = (roomId || "").toUpperCase();
const [showMenu, setShowMenu] = useState(false);
const menuRef = useRef(null);
+ const normalizedRoomId = (roomId || "").toUpperCase();
useEffect(() => {
if (!showMenu) return;
@@ -27,7 +28,6 @@ export default function JoinRoomPage() {
return () => document.removeEventListener("mousedown", handleClickOutside);
}, [showMenu]);
- // Fetch room info on mount
useEffect(() => {
if (roomId && roomId !== normalizedRoomId) {
navigate(`/join/${normalizedRoomId}`, { replace: true });
@@ -44,7 +44,7 @@ export default function JoinRoomPage() {
} else {
setLocalError(data.error || "Room not found");
}
- } catch (err) {
+ } catch {
setLocalError("Failed to fetch room information");
}
};
@@ -70,7 +70,7 @@ export default function JoinRoomPage() {
return (
-
+
-
+
-
👥
+
+
+
Join Group
{roomInfo && (
- Host: {roomInfo.hostName}
+ Host: {roomInfo.hostName}
)}
-
-
Group Code
-
{normalizedRoomId}
+
+
+ Group Code
+
+
+ {normalizedRoomId}
+
@@ -124,7 +132,7 @@ export default function JoinRoomPage() {
{(localError || error) && (
-
+
{localError || error}
)}
@@ -147,8 +155,11 @@ export default function JoinRoomPage() {
-
-
📍 Your location will be shared with the group
+
+
+
+ Your location will be shared with the group
+
diff --git a/Frontend/src/pages/MemberRoomPage.jsx b/Frontend/src/pages/MemberRoomPage.jsx
index 5519915..78bb2b6 100644
--- a/Frontend/src/pages/MemberRoomPage.jsx
+++ b/Frontend/src/pages/MemberRoomPage.jsx
@@ -1,6 +1,6 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
import { useParams, useNavigate } from "react-router-dom";
-import { useMap } from "../context/MapContext";
+import { useMap } from "../context/useMap";
import MapView from "../components/MapView";
import LiveChat from "../components/LiveChat";
import SOSOverlay from "../components/SOSOverlay";
@@ -104,7 +104,7 @@ export default function MemberRoomPage() {
}, [syncRoomLocations]);
// Start location tracking when member enters room
- const handleLocationUpdate = (latitude, longitude) => {
+ const handleLocationUpdate = useCallback((latitude, longitude) => {
const { lat, lng } = locationSmootherRef.current.filter(latitude, longitude);
if (socket) {
@@ -130,9 +130,9 @@ export default function MemberRoomPage() {
},
];
});
- };
+ }, [currentRoom, setLocations, socket, user]);
- const startLocationTracking = () => {
+ const startLocationTracking = useCallback(() => {
if (!currentRoom || !user) {
setError("Room not joined yet");
return;
@@ -177,7 +177,7 @@ export default function MemberRoomPage() {
timeout: 15000,
maximumAge: 0,
});
- };
+ }, [currentRoom, handleLocationUpdate, setError, user]);
useEffect(() => {
if (!currentRoom || !user) return;
@@ -197,7 +197,7 @@ export default function MemberRoomPage() {
watchIdRef.current = null;
}
};
- }, [currentRoom, user, socket, setError]);
+ }, [currentRoom, user, socket, setError, startLocationTracking]);
const resetTripState = () => {
tripStateRef.current = {
@@ -361,7 +361,7 @@ export default function MemberRoomPage() {
if (results.length === 0) {
setTripSearchError("No results found");
}
- } catch (err) {
+ } catch {
setTripSearchError("Search failed");
} finally {
setIsTripSearching(false);
diff --git a/Frontend/src/pages/WatchRoomPage.jsx b/Frontend/src/pages/WatchRoomPage.jsx
index 4edf013..076dd8a 100644
--- a/Frontend/src/pages/WatchRoomPage.jsx
+++ b/Frontend/src/pages/WatchRoomPage.jsx
@@ -1,9 +1,8 @@
-import { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import { useMap } from "../context/MapContext";
+import { useEffect, useState } from "react";
+import { Eye, X } from "lucide-react";
+import { useNavigate, useParams } from "react-router-dom";
import MapView from "../components/MapView";
-import { getAuthUser } from "../utils/authStorage";
-import QRCode from "qrcode";
+import { useMap } from "../context/useMap";
import "./MemberRoomPage.css";
export default function WatchRoomPage() {
@@ -12,29 +11,15 @@ export default function WatchRoomPage() {
const isMobile = typeof window !== "undefined" && window.innerWidth <= 640;
const {
currentRoom,
- user,
locations,
- setCurrentRoom,
roomSettings,
- setError,
joinRoom,
- isLoading,
} = useMap();
-
- const [showWatchQR, setShowWatchQR] = useState(false);
- const [watchQrCode, setWatchQrCode] = useState("");
+
const [watcherName, setWatcherName] = useState("");
const [isJoining, setIsJoining] = useState(false);
const [roomInfo, setRoomInfo] = useState(null);
- const watchUrl = `${window.location.origin}/watch/${roomId}`;
- useEffect(() => {
- QRCode.toDataURL(watchUrl, { width: 256, height: 256 })
- .then(setWatchQrCode)
- .catch((err) => console.error("QR generation error:", err));
- }, [roomId]);
-
- // Fetch room info
useEffect(() => {
const API_URL = import.meta.env.VITE_SOCKET_URL || "http://localhost:5000";
const fetchRoomInfo = async () => {
@@ -54,11 +39,10 @@ export default function WatchRoomPage() {
const handleJoinAsWatcher = async (e) => {
e.preventDefault();
if (!watcherName.trim()) return;
-
+
setIsJoining(true);
try {
await joinRoom(roomId.toUpperCase(), watcherName.trim(), "watcher");
- // Don't navigate - just stay here and show the map
} catch (err) {
alert(err.message || "Failed to join as watcher");
} finally {
@@ -66,23 +50,17 @@ export default function WatchRoomPage() {
}
};
- const handleLeaveRoom = async () => {
+ const handleLeaveRoom = () => {
if (window.confirm("Are you sure you want to stop watching?")) {
navigate("/");
}
};
- const copyWatchLink = () => {
- navigator.clipboard.writeText(watchUrl);
- alert("Watch link copied to clipboard!");
- };
-
- // If not joined yet, show join form
if (!currentRoom) {
return (