diff --git a/src/pages/Nodes.tsx b/src/pages/Nodes.tsx index 038d81a8..4b6303fd 100644 --- a/src/pages/Nodes.tsx +++ b/src/pages/Nodes.tsx @@ -1,3 +1,5 @@ +import { NodeOptionsDialog } from "@app/components/Dialog/NodeOptionsDialog"; +import { TracerouteResponseDialog } from "@app/components/Dialog/TracerouteResponseDialog"; import Footer from "@app/components/UI/Footer"; import { useAppStore } from "@app/core/stores/appStore"; import { Sidebar } from "@components/Sidebar.js"; @@ -7,10 +9,10 @@ import { Table } from "@components/generic/Table/index.js"; import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.js"; import { useDevice } from "@core/stores/deviceStore.js"; import { Hashicon } from "@emeraldpay/hashicon-react"; -import { Protobuf } from "@meshtastic/js"; +import { Protobuf, type Types } from "@meshtastic/js"; import { numberToHexUnpadded } from "@noble/curves/abstract/utils"; import { LockIcon, LockOpenIcon, TrashIcon } from "lucide-react"; -import { Fragment } from "react"; +import { Fragment, useCallback, useEffect, useState } from "react"; import { base16 } from "rfc4648"; export interface DeleteNoteDialogProps { @@ -19,13 +21,36 @@ export interface DeleteNoteDialogProps { } export const NodesPage = (): JSX.Element => { - const { nodes, hardware, setDialogOpen } = useDevice(); + const { nodes, hardware, setDialogOpen, connection } = useDevice(); const { setNodeNumToBeRemoved } = useAppStore(); + const [selectedNode, setSelectedNode] = useState< + Protobuf.Mesh.NodeInfo | undefined + >(undefined); + const [selectedTraceroute, setSelectedTraceroute] = useState< + Types.PacketMetadata | undefined + >(); const filteredNodes = Array.from(nodes.values()).filter( (n) => n.num !== hardware.myNodeNum, ); + useEffect(() => { + connection?.events.onTraceRoutePacket.subscribe(handleTraceroute); + return () => { + connection?.events.onTraceRoutePacket.unsubscribe(handleTraceroute); + }; + }, [ + connection?.events.onTraceRoutePacket.subscribe, + connection?.events.onTraceRoutePacket.unsubscribe, + ]); + + const handleTraceroute = useCallback( + (traceroute: Types.PacketMetadata) => { + setSelectedTraceroute(traceroute); + }, + [], + ); + return ( <> @@ -45,7 +70,7 @@ export const NodesPage = (): JSX.Element => { ]} rows={filteredNodes.map((node) => [ , -

+

setSelectedNode(node)}> {node.user?.longName ?? (node.user?.macaddr ? `Meshtastic ${base16 @@ -105,6 +130,16 @@ export const NodesPage = (): JSX.Element => { , ])} /> + setSelectedNode(undefined)} + /> + setSelectedTraceroute(undefined)} + />