update types for mapbox navigation

Author: mt-fns

frontend/components/Map.tsx

@@ -73,37 +73,31 @@ export const MapComponent = () => {
   const { isDarkMode } = useContext(DarkModeContext);
   const { userLat, userLng } = useUserLocation();
 
-  const [roomIdToFocus, setRoomIdToFocus] = useState<string | undefined>(
-    undefined
-  );
+  const [roomIdToFocus, setRoomIdToFocus] = useState<string>("");
+
+  const { room } = useRoom(roomIdToFocus);
 
-  const [initialUserCoordinate, setIntialUserCoordinate] = useState<{
-    lat: number;
-    lng: number;
-  } | null>(null);
+  // TODO check if I need to only call this once? this is currently getting called every user change
+  const { geometry } = useMapboxNavigation(userLat, userLng, room);
 
   useEffect(() => {
     // Run only on client side, no Suspense issues
     const params = new URLSearchParams(window.location.search);
-    setRoomIdToFocus(params.get("roomId") ?? undefined);
+    setRoomIdToFocus(params.get("roomId") ?? "");
   }, []);
 
-  // TODO refactor hook usage here
   useEffect(() => {
     if (!userLat || !userLng || !roomIdToFocus) return;
-    const { room } = useRoom(roomIdToFocus);
-    if (!initialUserCoordinate) {
-      if (!room) return;
-      const { geometry } = useMapboxNavigation(userLat, userLng, room);
-
-      setRouteGeoJSON({
-        type: "Feature",
-        properties: {},
-        geometry,
-      });
-      setIntialUserCoordinate({ lat: userLat, lng: userLng });
-    }
-  }, [userLat, userLng, roomIdToFocus, initialUserCoordinate]);
+    if (!room) return;
+
+    // -33.917347,151.2286926
+
+    setRouteGeoJSON({
+      type: "Feature",
+      properties: {},
+      geometry,
+    });
+  }, [userLat, userLng, roomIdToFocus]);
 
   const mapRef = useRef<MapRef>(null);
 

frontend/hooks/useMapboxNavigation.ts

@@ -14,7 +14,7 @@ const fetchRoute = async (
   }
 
   const directionsClient = mbxDirections({ accessToken: MAPBOX_ACCESS_TOKEN });
-
+  console.log(userLat, userLng);
   try {
     const response = await directionsClient
       .getDirections({
@@ -30,16 +30,21 @@ const fetchRoute = async (
     return response.body.routes[0].geometry;
     // TODO proper typing here
   } catch (error: any) {
-    console.error("Route fetch error:", error.response?.body || error.message);
+    console.log(error);
     throw error;
   }
 };
 
-const useMapboxNavigation = (userLat: number, userLng: number, room: Room) => {
+const useMapboxNavigation = (
+  userLat: number | undefined,
+  userLng: number | undefined,
+  room: Room | undefined
+) => {
   /** TODO add proper types */
 
+  console.log("TEST", room);
   const { data, error } = useSWRImmutable(
-    [userLat, userLng, room.lat, room.long],
+    [userLat, userLng, room ? room.lat : null, room ? room.long : null],
     fetchRoute
   );