Merge remote-tracking branch 'origin/632-view-on-map-button' into search-map-button

Author: bengodw

backend/src/dbInterface.ts

@@ -85,6 +85,8 @@ type BuildingsAndRoomsRes = {
       school: string;
       usage: string;
       capacity: number;
+      lat: number;
+      long: number;
     }>;
   }>;
 };
@@ -109,6 +111,8 @@ export const queryBuildingsAndRooms =
           school
           usage
           capacity
+          lat
+          long
         }
       }
     }

common/types.ts

@@ -17,6 +17,8 @@ export type Room = {
   capacity: number;
   usage: string;
   school: string;
+  lat: number;
+  long: number;
 };
 
 export type Booking = {

frontend/components/Map.tsx

@@ -2,21 +2,11 @@
 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,
-} from "react-map-gl/mapbox";
+import { LngLatBoundsLike, Map, MapRef, Marker } 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";
@@ -66,25 +56,6 @@ if (!MAPBOX_ACCESS_TOKEN) {
   throw new Error("Missing Mapbox access token");
 }
 
-const directionsClient = mbxDirections({ accessToken: MAPBOX_ACCESS_TOKEN });
-
-const fetchRoute = async (start: [number, number], end: [number, number]) => {
-  try {
-    const response = await directionsClient
-      .getDirections({
-        profile: "walking", // or 'driving', 'cycling'
-        geometries: "geojson",
-        waypoints: [{ coordinates: start }, { coordinates: end }],
-      })
-      .send();
-
-    return response.body.routes[0].geometry;
-  } catch (error: any) {
-    console.error("Route fetch error:", error.response?.body || error.message);
-    throw error;
-  }
-};
-
 export const MapComponent = () => {
   const { buildings } = useBuildings();
   const { isDarkMode } = useContext(DarkModeContext);
@@ -100,20 +71,12 @@ export const MapComponent = () => {
     setRoomIdToFocus(params.get("roomId") ?? undefined);
   }, []);
 
-  // useEffect(() => {
-  //   // Run only on client side, no Suspense issues
-  //   const params = new URLSearchParams(window.location.search);
-  //   setRoomIdToFocus(params.get("roomId") ?? undefined);
-  // }, []);
-  // const roomIdToFocus = useSearchParams().get("roomId") ?? undefined;
   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);
-
   const style = isDarkMode
     ? "mapbox://styles/bengodw/cmcimql2101qo01sp7dricgzq"
     : "mapbox://styles/bengodw/cmcimp1tz002p01rcfzbd8btn";
@@ -130,21 +93,6 @@ export const MapComponent = () => {
     }
   }, [buildings, userLat, userLng]);
 
-  const handleMarkerClick = async (building: Building) => {
-    if (!userLat || !userLng) return;
-
-    const geometry = await fetchRoute(
-      [userLng, userLat],
-      [building.long, building.lat]
-    );
-
-    setRouteGeoJSON({
-      type: "Feature",
-      properties: {},
-      geometry,
-    });
-  };
-
   return (
     <div style={{ height: "100%", position: "relative" }}>
       <Map
@@ -160,7 +108,6 @@ export const MapComponent = () => {
             key={building.id}
             latitude={building.lat}
             longitude={building.long}
-            onClick={() => handleMarkerClick(building)}
           >
             <MapMarker
               buildingId={building.id}
@@ -177,34 +124,17 @@ export const MapComponent = () => {
           </Marker>
         )}
 
-        <RoomMapMarker
-          roomId={roomIdToFocus}
-          roomLocation={(lat, long) => {
-            mapRef.current?.flyTo({
-              center: [long, lat],
-              zoom: 19.5,
-              duration: 1000,
-            });
-          }}
-        />
-
-        {routeGeoJSON && (
-          <>
-            <Source id="route" type="geojson" data={routeGeoJSON} />
-            <Layer
-              id="route-line"
-              type="line"
-              source="route"
-              layout={{
-                "line-cap": "round",
-                "line-join": "round",
-              }}
-              paint={{
-                "line-color": "#1DB954",
-                "line-width": 4,
-              }}
-            />
-          </>
+        {roomIdToFocus && (
+          <RoomMapMarker
+            roomId={roomIdToFocus}
+            roomLocation={(lat, long) => {
+              mapRef.current?.flyTo({
+                center: [long, lat],
+                zoom: 19.5,
+                duration: 1000,
+              });
+            }}
+          />
         )}
       </Map>
     </div>

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>
   );
 };