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>