diff --git a/frontend/src/pages/Chat.tsx b/frontend/src/pages/Chat.tsx index 2dfede9..ca4920e 100644 --- a/frontend/src/pages/Chat.tsx +++ b/frontend/src/pages/Chat.tsx @@ -60,7 +60,7 @@ export const Chat = () => { className="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" > {channels.map(([id]) => ( - + ))} @@ -78,6 +78,7 @@ export const Chat = () => { onClick={() => setSelectedChannel(id)} role="button" tabIndex={0} + key={`channel-selector-${id}`} > Channel {id} @@ -91,7 +92,7 @@ export const Chat = () => {

Channel {selectedChannel}

- +
- + @@ -121,11 +120,16 @@ export const Chat = () => { {selectedChannel ? chat?.channels[selectedChannel].messages.map((message, i) => { const nodeFrom = nodes[message.from] || null; - const nodeSender = nodes[message.sender] || null; + const senders = message.sender + .map((s) => nodes[s]) + .filter(Boolean); const nodeTo = nodes[message.to] || null; const distanceFromSender = - nodeFrom && nodeSender - ? calculateDistanceBetweenNodes(nodeFrom, nodeSender) + nodeFrom && senders.length + ? senders + .filter((s) => s.position) + .map((s) => calculateDistanceBetweenNodes(nodeFrom, s)) + .filter(Boolean) : null; return ( @@ -153,19 +157,23 @@ export const Chat = () => {
@@ -100,9 +101,7 @@ export const Chat = () => { From - Via - Via To - {nodeSender && ( - ( + + {s.shortname ?? "UNK"} + {idx < senders.length - 1 ? ", " : ""} + + )) + ) : ( + - {nodes[message.sender] - ? nodes[message.sender].shortname - : "UNK"} - + UNK + )} @@ -193,7 +201,9 @@ export const Chat = () => { className="p-1 text-nowrap border border-gray-400" align="right" > - {distanceFromSender && `${distanceFromSender} km`} + {distanceFromSender?.length + ? distanceFromSender.map((d) => `${d} km`).join(", ") + : ""} {message.text} diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts index 978d984..1c2e6ce 100644 --- a/frontend/src/types/index.ts +++ b/frontend/src/types/index.ts @@ -110,7 +110,7 @@ export interface IMessage { id: number; to: string; from: string; - sender: string; + sender: string[]; hops_away: number; timestamp: number; message: string;