fix device metrics & position widget

src/components/Sidebar.tsx

@@ -1,11 +1,10 @@
 import type React from "react";
-import { useEffect, useState } from "react";
 
 import { useDevice } from "@app/core/providers/useDevice.js";
 import { toMGRS } from "@app/core/utils/toMGRS.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
-import { Protobuf, Types } from "@meshtastic/meshtasticjs";
+import { Types } from "@meshtastic/meshtasticjs";
 
 import { BatteryWidget } from "./Widgets/BatteryWidget.js";
 import { ConfiguringWidget } from "./Widgets/ConfiguringWidget.js";
@@ -16,23 +15,9 @@ import { PositionWidget } from "./Widgets/PositionWidget.js";
 
 export const Sidebar = (): JSX.Element => {
   const { removeDevice } = useDeviceStore();
-  const { connection, hardware, nodes, status } = useDevice();
+  const { connection, hardware, nodes, status, currentMetrics } = useDevice();
   const { selectedDevice, setSelectedDevice } = useAppStore();
-  const [telemtery, setTelemetry] = useState<Protobuf.DeviceMetrics>();
-  const [grid, setGrid] = useState<string>("");
-  const [batteryHistory, setBatteryHistory] = useState<number[]>([]);
-
-  useEffect(() => {
-    const device = nodes.find((n) => n.data.num === hardware.myNodeNum);
-    if (device?.deviceMetrics?.length) {
-      setTelemetry(device.deviceMetrics[device.deviceMetrics?.length]);
-    }
-    if (device?.data.position) {
-      setGrid(
-        toMGRS(device.data.position.latitudeI, device.data.position.longitudeI)
-      );
-    }
-  }, [nodes, hardware.myNodeNum]);
+  const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
 
   return (
     <div className="relative flex w-80 flex-shrink-0 flex-col gap-2 border-x border-slate-200 bg-slate-50 p-2">
@@ -70,15 +55,23 @@ export const Sidebar = (): JSX.Element => {
       <div className="flex flex-col gap-3">
         <NodeInfoWidget hardware={hardware} />
         <BatteryWidget
-          batteryLevel={telemtery?.batteryLevel ?? 0}
-          voltage={telemtery?.voltage ?? 0}
+          batteryLevel={currentMetrics.batteryLevel}
+          voltage={currentMetrics.voltage}
         />
+        {JSON.stringify(
+          nodes.find((n) => n.data.num === hardware.myNodeNum)?.deviceMetrics
+        )}
         <PeersWidget
           peers={nodes
             .map((n) => n.data)
             .filter((n) => n.num !== hardware.myNodeNum)}
         />
-        <PositionWidget grid={grid} />
+        <PositionWidget
+          grid={toMGRS(
+            myNode?.data.position?.latitudeI,
+            myNode?.data.position?.longitudeI
+          )}
+        />
 
         <ConfiguringWidget />
       </div>

src/core/stores/deviceStore.ts

@@ -51,6 +51,7 @@ export interface Device {
   activePeer: number;
   waypoints: Protobuf.Waypoint[];
   regionUnset: boolean;
+  currentMetrics: Protobuf.DeviceMetrics;
 
   setReady(ready: boolean): void;
   setStatus: (status: Types.DeviceStatusEnum) => void;
@@ -104,6 +105,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
           activePeer: 0,
           waypoints: [],
           regionUnset: false,
+          currentMetrics: Protobuf.DeviceMetrics.create(),
 
           setReady: (ready: boolean) => {
             set(
@@ -229,6 +231,27 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                 if (node) {
                   switch (metrics.data.variant.oneofKind) {
                     case "deviceMetrics":
+                      if (device) {
+                        if (metrics.data.variant.deviceMetrics.batteryLevel) {
+                          device.currentMetrics.batteryLevel =
+                            metrics.data.variant.deviceMetrics.batteryLevel;
+                        }
+                        if (metrics.data.variant.deviceMetrics.voltage) {
+                          device.currentMetrics.voltage =
+                            metrics.data.variant.deviceMetrics.voltage;
+                        }
+                        if (metrics.data.variant.deviceMetrics.airUtilTx) {
+                          device.currentMetrics.airUtilTx =
+                            metrics.data.variant.deviceMetrics.airUtilTx;
+                        }
+                        if (
+                          metrics.data.variant.deviceMetrics.channelUtilization
+                        ) {
+                          device.currentMetrics.channelUtilization =
+                            metrics.data.variant.deviceMetrics.channelUtilization;
+                        }
+                      }
+
                       node.deviceMetrics.push(
                         metrics.data.variant.deviceMetrics
                       );