From 056a194ede338657300514da5732b27359edd35c Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Mon, 27 May 2024 09:53:20 +0800
Subject: [PATCH] Add formatting logic for multi-hop traceroutes

---
 .../PageComponents/Messages/TraceRoute.tsx       | 16 +++++++++-------
 src/core/stores/deviceStore.ts                   |  1 -
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/PageComponents/Messages/TraceRoute.tsx b/src/components/PageComponents/Messages/TraceRoute.tsx
index 86c4c8bb..e1857b79 100644
--- a/src/components/PageComponents/Messages/TraceRoute.tsx
+++ b/src/components/PageComponents/Messages/TraceRoute.tsx
@@ -1,9 +1,5 @@
-import type { MessageWithState } from "@app/core/stores/deviceStore.js";
+import { useDevice } from "@app/core/stores/deviceStore.js";
 import type { Protobuf } from "@meshtastic/js";
-import {
-  WaypointsIcon,
-  ArrowRightLeft,
-} from "lucide-react";
 
 export interface TraceRouteProps {
   from?: Protobuf.Mesh.NodeInfo;
@@ -11,11 +7,14 @@ export interface TraceRouteProps {
   route?: Protobuf.Mesh.RouteDiscovery;
 }
 
+
 export const TraceRoute = ({
   from,
   to,
   route,
 }: TraceRouteProps): JSX.Element => {
+  const { nodes } = useDevice();
+
   return route.length == 0 ? (
     <div className="ml-5 flex">
       <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
@@ -25,9 +24,12 @@ export const TraceRoute = ({
    ) : ( 
     <div className="ml-5 flex">
       <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
-      {route}
+      {from?.user?.longName}↔
+      {route.map((hop) => (
+         nodes.get(hop).user?.longName + "↔"
+     ))}
+      {to?.user?.longName}
       </span>
     </div>
-
   );
 };
diff --git a/src/core/stores/deviceStore.ts b/src/core/stores/deviceStore.ts
index a792fb4c..dc82e1cb 100644
--- a/src/core/stores/deviceStore.ts
+++ b/src/core/stores/deviceStore.ts
@@ -514,7 +514,6 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                 } else {
                    device.traceroutes.set(traceroute.from, [traceroute]);
                 }
-                console.log(device.traceroutes);
               }),
             );
           },