update route properly when room coordinates change

Author: mt-fns

backend/src/dbInterface.ts

@@ -111,6 +111,8 @@ export const queryBuildingsAndRooms =
           school
           usage
           capacity
+          lat
+          long
         }
       }
     }

frontend/components/Map.tsx

@@ -2,21 +2,18 @@
 import "mapbox-gl/dist/mapbox-gl.css";
 
 import { Building } from "@common/types";
-import mbxDirections from "@mapbox/mapbox-sdk/services/directions";
 import Box from "@mui/material/Box";
 import { DarkModeContext } from "app/clientLayout";
-import { useSearchParams } from "next/navigation";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import {
-  Layer,
   LngLatBoundsLike,
   Map,
   MapRef,
   Marker,
   Source,
+  Layer,
 } from "react-map-gl/mapbox";
 import { useDebounceValue } from "usehooks-ts";
-import BuildingDrawer from "views/BuildingDrawer";
 
 import { MAPBOX_ACCESS_TOKEN } from "../config";
 import useBuildings from "../hooks/useBuildings";
@@ -69,12 +66,18 @@ if (!MAPBOX_ACCESS_TOKEN) {
 }
 
 export const MapComponent = () => {
+  // Use debounce to allow moving from marker to popup without popup hiding
+  const [currentHover, setCurrentHover] = useState<Building | null>(null);
+  const [debouncedCurrentHover] = useDebounceValue(currentHover, 50);
+  const [routeGeoJSON, setRouteGeoJSON] = useState<any | null>(null);
+  const [distances, setDistances] = useState<number[]>([]);
+  const [roomIdToFocus, setRoomIdToFocus] = useState<string>("");
+
+  const mapRef = useRef<MapRef>(null);
+
   const { buildings } = useBuildings();
   const { isDarkMode } = useContext(DarkModeContext);
   const { userLat, userLng } = useUserLocation();
-
-  const [roomIdToFocus, setRoomIdToFocus] = useState<string>("");
-
   const { room } = useRoom(roomIdToFocus);
 
   // TODO check if I need to only call this once? this is currently getting called every user change
@@ -87,32 +90,25 @@ export const MapComponent = () => {
   }, []);
 
   useEffect(() => {
+    console.log("HERE");
     if (!userLat || !userLng || !roomIdToFocus) return;
-    if (!room) return;
-
-    // -33.917347,151.2286926
+    console.log("test1");
+    // Only set route once
+    if (routeGeoJSON && routeGeoJSON.geometry) return;
+    console.log("tes2");
+    console.log(geometry);
 
     setRouteGeoJSON({
       type: "Feature",
       properties: {},
       geometry,
     });
-  }, [userLat, userLng, roomIdToFocus]);
-
-  const mapRef = useRef<MapRef>(null);
-
-  // Use debounce to allow moving from marker to popup without popup hiding
-  const [currentHover, setCurrentHover] = useState<Building | null>(null);
-  const [debouncedCurrentHover] = useDebounceValue(currentHover, 50);
-
-  const [routeGeoJSON, setRouteGeoJSON] = useState<any | null>(null);
+  }, [userLat, userLng, roomIdToFocus, geometry]);
 
   const style = isDarkMode
     ? "mapbox://styles/bengodw/cmcimql2101qo01sp7dricgzq"
     : "mapbox://styles/bengodw/cmcimp1tz002p01rcfzbd8btn";
 
-  const [distances, setDistances] = useState<number[]>([]);
-
   useEffect(() => {
     if (buildings && userLat && userLng && isInBounds(userLat, userLng)) {
       setDistances(
@@ -123,19 +119,6 @@ export const MapComponent = () => {
     }
   }, [buildings, userLat, userLng]);
 
-  // // TODO refactor to fetch room coordinates
-  // const handleMarkerClick = async (building: Building) => {
-  //   if (!userLat || !userLng) return;
-
-  //   const { geometry } = await useMapboxNavigation(userLat, userLng, building);
-
-  //   setRouteGeoJSON({
-  //     type: "Feature",
-  //     properties: {},
-  //     geometry,
-  //   });
-  // };
-
   return (
     <div style={{ height: "100%", position: "relative" }}>
       <Map
@@ -167,16 +150,18 @@ export const MapComponent = () => {
           </Marker>
         )}
 
-        <RoomMapMarker
-          roomId={roomIdToFocus}
-          roomLocation={(lat, long) => {
-            mapRef.current?.flyTo({
-              center: [long, lat],
-              zoom: 19.5,
-              duration: 1000,
-            });
-          }}
-        />
+        {roomIdToFocus && (
+          <RoomMapMarker
+            roomId={roomIdToFocus}
+            roomLocation={(lat, long) => {
+              mapRef.current?.flyTo({
+                center: [long, lat],
+                zoom: 19.5,
+                duration: 1000,
+              });
+            }}
+          />
+        )}
 
         {routeGeoJSON && (
           <>
@@ -190,7 +175,7 @@ export const MapComponent = () => {
                 "line-join": "round",
               }}
               paint={{
-                "line-color": "#1DB954",
+                "line-color": "#1976d2",
                 "line-width": 4,
               }}
             />

frontend/components/RoomMapMarker.tsx

@@ -1,61 +1,77 @@
 "use client";
-import Image from "next/image";
-import { useEffect, useState } from "react";
-import { Marker } from "react-map-gl/mapbox";
 
-type RoomMarkersData = {
-  [roomId: string]: [number, number];
-};
+import { alpha } from "@mui/material";
+import { Typography } from "@mui/material";
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+import useRoom from "hooks/useRoom";
+import React, { useEffect, useRef } from "react";
+import { Marker } from "react-map-gl/mapbox";
 
-type RoomMarker = {
-  id: string;
-  lat: number;
-  long: number;
-};
+interface RoomMapMarkerProps {
+  roomId: string;
+  roomLocation?: (lat: number, long: number) => void;
+}
 
-const RoomMapMarker = ({
+const RoomMapMarker: React.FC<RoomMapMarkerProps> = ({
   roomId,
   roomLocation,
-}: {
-  roomId?: string;
-  roomLocation?: (lat: number, long: number) => void;
 }) => {
-  // Changing data structure to {[id: string, lat: number, long: number]...}
-  const [roomMarker, setRoomMarker] = useState<RoomMarker | null>(null);
+  const { room } = useRoom(roomId);
+  const hasFocusedRef = useRef(false);
+  const theme = useTheme();
+
   useEffect(() => {
-    if (!roomId) return;
-    fetch("/roommarkers.json")
-      .then((res) => res.json())
-      .then((markersData) => {
-        const data = markersData as RoomMarkersData;
-        const roomCoords = data[roomId];
-
-        if (roomCoords) {
-          const [longitude, latitude] = roomCoords;
-          const marker: RoomMarker = {
-            id: roomId,
-            lat: latitude,
-            long: longitude,
-          };
-          setRoomMarker(marker);
-
-          if (roomLocation) {
-            roomLocation(latitude, longitude);
-          }
-        }
-      })
-      .catch((err) => console.error("Failed to load room markers:", err));
-  }, [roomId, roomLocation]);
-
-  if (!roomMarker) return null;
+    if (!hasFocusedRef.current && room && roomLocation) {
+      roomLocation(room.lat, room.long);
+      hasFocusedRef.current = true;
+    }
+  }, [room, roomLocation]);
+
+  if (!room) return null;
+  const blue = "#1976d2";
+
   return (
-    <Marker
-      key={roomMarker.id}
-      latitude={roomMarker.lat}
-      longitude={roomMarker.long}
-      anchor="bottom"
-    >
-      <Image src="/MapPin.png" alt="Room pin" width={30} height={30} />
+    <Marker latitude={room.lat} longitude={room.long} anchor="bottom">
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          position: "relative",
+        }}
+      >
+        <Typography
+          sx={{
+            fontSize: 11,
+            fontWeight: 500,
+            textShadow:
+              theme.palette.mode === "light"
+                ? "-.5px -.5px 1px #f2f2f2, .5px -.5px 1px #f2f2f2, -.5px .5px 1px #f2f2f2, .5px .5px 1px #f2f2f2"
+                : "",
+            color: theme.palette.text.primary,
+            marginBottom: 1,
+            userSelect: "none",
+          }}
+        >
+          {room.name}
+        </Typography>
+
+        <Box
+          sx={(theme) => ({
+            width: 18,
+            height: 18,
+            borderRadius: "50%",
+            border: `5px solid ${blue}`,
+            backgroundColor: "white",
+            boxShadow: `0px 0px 6px 4px ${alpha(blue, 0.5)}`,
+            position: "relative",
+            "&:hover": {
+              cursor: "pointer",
+            },
+          })}
+        />
+      </div>
     </Marker>
   );
 };

frontend/hooks/useMapboxNavigation.ts

@@ -4,17 +4,21 @@ import { Room } from "@common/types";
 import useSWRImmutable from "swr/immutable";
 
 const fetchRoute = async (
-  userLat: number,
-  userLng: number,
-  roomLat: number,
-  roomLong: number
+  userLat: number | undefined,
+  userLng: number | undefined,
+  roomLat: number | undefined,
+  roomLong: number | undefined
 ) => {
   if (!MAPBOX_ACCESS_TOKEN) {
     throw new Error("Missing Mapbox access token");
   }
 
+  if (!userLat || !userLng || !roomLat || !roomLong) {
+    throw new Error("Invalid user or room coordinate");
+  }
+
   const directionsClient = mbxDirections({ accessToken: MAPBOX_ACCESS_TOKEN });
-  console.log(userLat, userLng);
+  console.log(userLat, userLng, roomLat, roomLong);
   try {
     const response = await directionsClient
       .getDirections({
@@ -27,10 +31,10 @@ const fetchRoute = async (
       })
       .send();
 
+    console.log("TEST", response.body.routes[0].geometry);
     return response.body.routes[0].geometry;
     // TODO proper typing here
   } catch (error: any) {
-    console.log(error);
     throw error;
   }
 };
@@ -42,9 +46,13 @@ const useMapboxNavigation = (
 ) => {
   /** TODO add proper types */
 
-  console.log("TEST", room);
   const { data, error } = useSWRImmutable(
-    [userLat, userLng, room ? room.lat : null, room ? room.long : null],
+    [
+      userLat,
+      userLng,
+      room ? room.lat : undefined,
+      room ? room.long : undefined,
+    ],
     fetchRoute
   );