feat: more strict ts typings and subscription hooks

main/background.ts

@@ -1,10 +1,10 @@
 import path from "path";
-import { app, ipcMain, shell } from "electron";
+import { app, ipcMain, shell, BrowserWindow } from "electron";
 import serve from "electron-serve";
-import { createWindow } from "./helpers";
 import parsePrometheusTextFormat from "parse-prometheus-text-format";
-import { MinorParser } from "./types/Minor";
-import { Metrics } from "../types/metrics";
+import { createWindow } from "./helpers";
+import { PrometheusMetricParser } from "./types/prometheus";
+import { SetMetricsStateActionPayload } from "../types/metrics";
 
 const isProd = process.env.NODE_ENV === "production";
 
@@ -14,7 +14,8 @@ if (isProd) {
   app.setPath("userData", `${app.getPath("userData")} (development)`);
 }
 
-let mainWindow = null;
+let mainWindow: BrowserWindow;
+
 (async () => {
   await app.whenReady();
 
@@ -45,22 +46,22 @@ ipcMain.on("message", async (event, arg) => {
   event.reply("message", `${arg} World!`);
 });
 
-function metricStringParse(item): number | null {
+function metricStringParse(item: PrometheusMetricParser | undefined): number | null {
   if (!item) return null;
   return +item.metrics[0].value;
 }
 
-async function getMetrics(): Promise<Metrics> {
+async function getMetrics(): Promise<SetMetricsStateActionPayload> {
   console.log("DEBUG: getMetrics start");
   const res = await fetch("http://testnet-3.arweave.net:1984/metrics");
   const data = await res.text();
 
-  const parsed: MinorParser[] = parsePrometheusTextFormat(data);
+  const parsed: PrometheusMetricParser[] = parsePrometheusTextFormat(data) || [];
   let dataUnpacked = 0;
   let dataPacked = 0;
   let storageAvailable = 0;
   const packingItem = parsed.find(
-    (item: MinorParser) => item.name === "v2_index_data_size_by_packing",
+    (item: PrometheusMetricParser) => item.name === "v2_index_data_size_by_packing",
   );
   if (packingItem) {
     packingItem.metrics.forEach((item) => {
@@ -77,14 +78,14 @@ async function getMetrics(): Promise<Metrics> {
     });
   }
   const hashRate = metricStringParse(
-    parsed.find((item: MinorParser) => item.name === "average_network_hash_rate"),
+    parsed.find((item: PrometheusMetricParser) => item.name === "average_network_hash_rate"),
   );
   const earnings = metricStringParse(
-    parsed.find((item: MinorParser) => item.name === "average_block_reward"),
+    parsed.find((item: PrometheusMetricParser) => item.name === "average_block_reward"),
   );
 
   const vdf_step_time_milliseconds_bucket = parsed.find(
-    (item: MinorParser) => item.name === "vdf_step_time_milliseconds",
+    (item: PrometheusMetricParser) => item.name === "vdf_step_time_milliseconds",
   );
   let vdfTimeLowerBound: number | null = null;
   if (vdf_step_time_milliseconds_bucket) {
@@ -98,7 +99,7 @@ async function getMetrics(): Promise<Metrics> {
     }
   }
   const weaveSize = metricStringParse(
-    parsed.find((item: MinorParser) => item.name === "weave_size"),
+    parsed.find((item: PrometheusMetricParser) => item.name === "weave_size"),
   );
   console.log("DEBUG: getMetrics complete");
   return {
@@ -114,19 +115,19 @@ async function getMetrics(): Promise<Metrics> {
 
 // TODO make generic function for creating pub+sub endpoints
 // TODO make class for subscription management
-let cachedMetrics : Metrics | null = null;
+let cachedMetrics: SetMetricsStateActionPayload | null = null;
 let cachedMetricsStr = "";
 // TODO list of webContents
 // let cachedMetricsSubList = [];
 let cachedMetricsIsSubActive = false;
-let cachedMetricsTimeout : NodeJS.Timeout | null = null;
+let cachedMetricsTimeout: NodeJS.Timeout | null = null;
 let cachedMetricsUpdateInProgress = false;
 
 async function cachedMetricsUpdate() {
   try {
     cachedMetricsUpdateInProgress = true;
     cachedMetrics = await getMetrics();
-  } catch(err) {
+  } catch (err) {
     console.error(err);
   }
   cachedMetricsUpdateInProgress = false;
@@ -155,7 +156,7 @@ async function cachedMetricsUpdatePing() {
   // prod active value 1000
   // debug active value 10000 (do not kill testnet node)
   const delay = cachedMetricsIsSubActive ? 10000 : 60000;
-  cachedMetricsTimeout = setTimeout(async ()=>{
+  cachedMetricsTimeout = setTimeout(async () => {
     // extra check needed
     if (!isAlive) return;
     cachedMetricsTimeout = null;
@@ -165,10 +166,10 @@ async function cachedMetricsUpdatePing() {
   }, delay);
 }
 
-(async function(){
+(async function () {
   await cachedMetricsUpdate();
   cachedMetricsUpdatePing();
-})()
+})();
 
 ipcMain.on("metricsSub", async () => {
   cachedMetricsIsSubActive = true;
@@ -178,7 +179,6 @@ ipcMain.on("metricsUnsub", async () => {
   cachedMetricsIsSubActive = false;
 });
 
-
 ipcMain.on("open-url", async (_event, arg) => {
   shell.openExternal(arg);
 });

main/helpers/create-window.ts

@@ -15,11 +15,14 @@ export const createWindow = (
   const key = "window-state";
   const name = `window-state-${windowName}`;
   const store = new Store<Rectangle>({ name });
-  const defaultSize = {
-    width: options.width,
-    height: options.height,
+  const defaultSize: Rectangle = {
+    width: options.width || 800,
+    height: options.height || 600,
+    x: 0,
+    y: 0,
   };
-  let state = {};
+
+  let state: Rectangle = { x: 0, y: 0, width: 0, height: 0 };
 
   const restore = () => store.get(key, defaultSize);
 
@@ -34,7 +37,7 @@ export const createWindow = (
     };
   };
 
-  const windowWithinBounds = (windowState, bounds) => {
+  const windowWithinBounds = (windowState: Rectangle, bounds: Rectangle) => {
     return (
       windowState.x >= bounds.x &&
       windowState.y >= bounds.y &&
@@ -51,7 +54,7 @@ export const createWindow = (
     });
   };
 
-  const ensureVisibleOnSomeDisplay = (windowState) => {
+  const ensureVisibleOnSomeDisplay = (windowState: Rectangle) => {
     const visible = screen.getAllDisplays().some((display) => {
       return windowWithinBounds(windowState, display.bounds);
     });

main/preload.ts

@@ -1,5 +1,5 @@
 import { contextBridge, ipcRenderer, IpcRendererEvent } from "electron";
-import { Metrics } from "../types/metrics";
+import { SetMetricsStateActionPayload } from "../types/metrics";
 
 ipcRenderer.on("metricsPush", (_event, msg) => {
   console.log("DEBUG metricsPush FE", msg);
@@ -8,12 +8,12 @@ const handler = {
   send(channel: string, value: unknown) {
     ipcRenderer.send(channel, value);
   },
-  metricsSub: (handler: (_event: unknown, res: Metrics) => void) => {
+  metricsSub: (handler: (_event: unknown, res: SetMetricsStateActionPayload) => void) => {
     console.log("DEBUG metricsSub FE");
     ipcRenderer.on("metricsPush", handler);
     ipcRenderer.send("metricsSub", {});
   },
-  metricsUnsub: (handler: (_event: unknown, res: Metrics) => void) => {
+  metricsUnsub: (handler: (_event: unknown, res: SetMetricsStateActionPayload) => void) => {
     console.log("DEBUG metricsUnsub FE");
     ipcRenderer.off("metricsPush", handler);
     ipcRenderer.send("metricsUnsub", {});

main/types/Minor.ts → main/types/prometheus.ts

@@ -1,4 +1,4 @@
-export type MinorParser = {
+export type PrometheusMetricParser = {
   name: string;
   help: string;
   type: string;

package.json

@@ -44,6 +44,7 @@
   },
   "devDependencies": {
     "@types/react": "^18.2.31",
+    "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
     "autoprefixer": "^10.4.16",

renderer/components/Charts/DataRelated.tsx

@@ -1,16 +1,11 @@
 import { BottomArrow, TopArrow } from "./Arrows";
+import { useDataPacked, useStorageAvailable, useWeaveSize } from "../../store/metricsSliceHooks";
 
-interface DataRelatedChartProps {
-  dataPacked: number | null;
-  storageAvailable: number | null;
-  weaveSize: number | null;
-}
+export default function DataRelatedChart() {
+  const dataPacked = useDataPacked();
+  const storageAvailable = useStorageAvailable();
+  const weaveSize = useWeaveSize();
 
-export default function DataRelatedChart({
-  dataPacked,
-  storageAvailable,
-  weaveSize,
-}: DataRelatedChartProps) {
   // NOTE maybe this component should pick all stuff from storage directly
   return (
     <div className="w-96 h-20 flex items-center mt-20">
@@ -20,7 +15,7 @@ export default function DataRelatedChart({
           width: "2%",
         }}
       >
-        <TopArrow value={dataPacked} color="#7BF05E" />
+        {typeof dataPacked === "number" && <TopArrow value={dataPacked} color="#7BF05E" />}
       </div>
 
       <div
@@ -29,11 +24,13 @@ export default function DataRelatedChart({
           width: "4%",
         }}
       >
-        <BottomArrow value={storageAvailable} color="#1D2988" />
+        {typeof storageAvailable === "number" && (
+          <BottomArrow value={storageAvailable} color="#1D2988" />
+        )}
       </div>
 
       <div className="w-full bg-[#A7A7A7] hover:bg-[#989797] h-full cursor-pointer relative group">
-        <TopArrow value={weaveSize} color="#A7A7A7" />
+        {typeof weaveSize === "number" && <TopArrow value={weaveSize} color="#A7A7A7" />}
       </div>
     </div>
   );