diff --git a/src/components/map/DualMapView.tsx b/src/components/map/DualMapView.tsx index 39baab2..7f793a1 100644 --- a/src/components/map/DualMapView.tsx +++ b/src/components/map/DualMapView.tsx @@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react'; import dynamic from 'next/dynamic'; -import type { Participant, MapViewport, Waypoint } from '@/types'; +import type { Participant, MapViewport, Waypoint, ParticipantLocation } from '@/types'; import { isInC3NavArea } from '@/lib/c3nav'; import { useRoomStore } from '@/stores/room'; import NavigationPanel from './NavigationPanel'; @@ -32,7 +32,7 @@ interface DualMapViewProps { participants: Participant[]; waypoints?: Waypoint[]; currentUserId?: string; - currentLocation?: { latitude: number; longitude: number } | null; + currentLocation?: ParticipantLocation | null; eventId?: string; initialMode?: MapMode; onParticipantClick?: (participant: Participant) => void; @@ -152,6 +152,10 @@ export default function DualMapView({ )} diff --git a/src/components/map/NavigationPanel.tsx b/src/components/map/NavigationPanel.tsx index c7c9baf..6b442f8 100644 --- a/src/components/map/NavigationPanel.tsx +++ b/src/components/map/NavigationPanel.tsx @@ -1,35 +1,53 @@ 'use client'; import { useRoomStore } from '@/stores/room'; -import type { Participant, Waypoint } from '@/types'; +import type { Participant, Waypoint, ParticipantLocation } from '@/types'; interface NavigationPanelProps { selectedParticipant?: Participant | null; selectedWaypoint?: Waypoint | null; + currentLocation?: ParticipantLocation | null; + allParticipants: Participant[]; + waypoints: Waypoint[]; + currentUserId?: string; onClose: () => void; } export default function NavigationPanel({ selectedParticipant, selectedWaypoint, + currentLocation, + allParticipants, + waypoints, + currentUserId, onClose, }: NavigationPanelProps) { - const { navigateTo, activeRoute, clearRoute, currentParticipantId } = useRoomStore(); + const { navigateTo, activeRoute, clearRoute } = useRoomStore(); const target = selectedParticipant || selectedWaypoint; if (!target) return null; const isParticipant = !!selectedParticipant; - const isSelf = isParticipant && selectedParticipant.id === currentParticipantId; + const isSelf = isParticipant && selectedParticipant.id === currentUserId; const hasLocation = isParticipant ? !!selectedParticipant.location : !!selectedWaypoint?.location; const handleNavigate = () => { if (isParticipant && selectedParticipant) { - navigateTo({ type: 'participant', id: selectedParticipant.id }); + navigateTo( + { type: 'participant', id: selectedParticipant.id }, + currentLocation || undefined, + allParticipants, + waypoints + ); } else if (selectedWaypoint) { - navigateTo({ type: 'waypoint', id: selectedWaypoint.id }); + navigateTo( + { type: 'waypoint', id: selectedWaypoint.id }, + currentLocation || undefined, + allParticipants, + waypoints + ); } }; diff --git a/src/stores/room.ts b/src/stores/room.ts index 5480113..04f4725 100644 --- a/src/stores/room.ts +++ b/src/stores/room.ts @@ -65,7 +65,12 @@ interface RoomState { removeWaypoint: (waypointId: string) => void; // Route actions - navigateTo: (target: { type: 'participant' | 'waypoint'; id: string }) => Promise; + navigateTo: ( + target: { type: 'participant' | 'waypoint'; id: string }, + currentLocation: ParticipantLocation | undefined, + allParticipants: Participant[], + waypoints: Waypoint[] + ) => Promise; clearRoute: () => void; // Internal @@ -192,12 +197,16 @@ export const useRoomStore = create((set, get) => ({ set({ room: { ...room } }); }, - navigateTo: async (target: { type: 'participant' | 'waypoint'; id: string }) => { - const { participants, room, currentParticipantId } = get(); + navigateTo: async ( + target: { type: 'participant' | 'waypoint'; id: string }, + currentLocation: ParticipantLocation | undefined, + allParticipants: Participant[], + allWaypoints: Waypoint[] + ) => { + const { room } = get(); - // Get current user's location - const currentUser = participants.find((p) => p.id === currentParticipantId); - if (!currentUser?.location) { + // Check current user's location (passed from hook, not store) + if (!currentLocation) { set({ activeRoute: { id: nanoid(), @@ -214,12 +223,12 @@ export const useRoomStore = create((set, get) => ({ return; } - // Get destination + // Get destination from passed participants/waypoints (not stale store data) let destLocation: { latitude: number; longitude: number; indoor?: { level: number; x: number; y: number } } | null = null; let destName = ''; if (target.type === 'participant') { - const participant = participants.find((p) => p.id === target.id); + const participant = allParticipants.find((p) => p.id === target.id); if (participant?.location) { destLocation = { latitude: participant.location.latitude, @@ -229,7 +238,7 @@ export const useRoomStore = create((set, get) => ({ destName = participant.name; } } else if (target.type === 'waypoint') { - const waypoint = room?.waypoints.find((w) => w.id === target.id); + const waypoint = allWaypoints.find((w) => w.id === target.id); if (waypoint) { destLocation = { latitude: waypoint.location.latitude, @@ -244,7 +253,7 @@ export const useRoomStore = create((set, get) => ({ set({ activeRoute: { id: nanoid(), - from: { type: 'current', name: currentUser.name }, + from: { type: 'current', name: 'You' }, to: { type: target.type, id: target.id, name: destName || 'Unknown' }, segments: [], totalDistance: 0, @@ -261,7 +270,7 @@ export const useRoomStore = create((set, get) => ({ set({ activeRoute: { id: nanoid(), - from: { type: 'current', name: currentUser.name }, + from: { type: 'current', name: 'You' }, to: { type: target.type, id: target.id, name: destName }, segments: [], totalDistance: 0, @@ -277,9 +286,9 @@ export const useRoomStore = create((set, get) => ({ headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ origin: { - latitude: currentUser.location.latitude, - longitude: currentUser.location.longitude, - indoor: currentUser.location.indoor, + latitude: currentLocation.latitude, + longitude: currentLocation.longitude, + indoor: currentLocation.indoor, }, destination: destLocation, mode: 'walking', @@ -293,7 +302,7 @@ export const useRoomStore = create((set, get) => ({ set({ activeRoute: { id: nanoid(), - from: { type: 'current', name: currentUser.name }, + from: { type: 'current', name: 'You' }, to: { type: target.type, id: target.id, name: destName }, segments: data.route.segments, totalDistance: data.route.totalDistance, @@ -306,7 +315,7 @@ export const useRoomStore = create((set, get) => ({ set({ activeRoute: { id: nanoid(), - from: { type: 'current', name: currentUser.name }, + from: { type: 'current', name: 'You' }, to: { type: target.type, id: target.id, name: destName }, segments: [], totalDistance: 0, @@ -322,7 +331,7 @@ export const useRoomStore = create((set, get) => ({ set({ activeRoute: { id: nanoid(), - from: { type: 'current', name: currentUser.name }, + from: { type: 'current', name: 'You' }, to: { type: target.type, id: target.id, name: destName }, segments: [], totalDistance: 0,