diff --git a/packages/react-sdk/src/components/DeveloperTools/DeveloperToolsDialog.tsx b/packages/react-sdk/src/components/DeveloperTools/DeveloperToolsDialog.tsx index bad6e7d4e..9f26b360b 100644 --- a/packages/react-sdk/src/components/DeveloperTools/DeveloperToolsDialog.tsx +++ b/packages/react-sdk/src/components/DeveloperTools/DeveloperToolsDialog.tsx @@ -29,6 +29,7 @@ import { Typography, } from '@mui/material'; import { unstable_useId as useId } from '@mui/utils'; +import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useActiveWhiteboardInstanceStatistics } from '../../state'; import { CommunicationChannelStatisticsView } from './CommunicationChannelStatisticsView'; @@ -47,6 +48,27 @@ export function DeveloperToolsDialog({ const { document, communicationChannel } = useActiveWhiteboardInstanceStatistics(); + const sessions = useMemo( + () => + communicationChannel.sessions + ?.filter( + (s) => + s.sessionId !== communicationChannel.localSessionId && + s.expiresTs - Date.now() > 0, + ) + .map((s) => ({ + ...s, + status: Object.values(communicationChannel.peerConnections).find( + (p) => p.remoteSessionId === s.sessionId, + )?.connectionState, + })), + [ + communicationChannel.sessions, + communicationChannel.localSessionId, + communicationChannel.peerConnections, + ], + ); + const dialogTitleId = useId(); const dialogDescriptionId = useId(); @@ -132,21 +154,7 @@ export function DeveloperToolsDialog({ - - s.sessionId !== communicationChannel.localSessionId && - s.expiresTs - Date.now() > 0, - ) - .map((s) => ({ - ...s, - status: Object.values( - communicationChannel.peerConnections, - ).find((p) => p.remoteSessionId === s.sessionId) - ?.connectionState, - }))} - /> +