feat: create networkStats hook, update components to prevent rerender.

Signed-off-by: Eugene Panteleymonchuk <[email protected]>

client/src/features/visualizer-threejs/wrapper/KeyPanel.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { memo } from "react";
 import { BlockState } from "@iota/sdk-wasm-nova/web";
 
 import "./KeyPanel.scss";
-import { StatsPanel } from "~features/visualizer-threejs/wrapper/StatsPanel";
+import StatsPanel from "~features/visualizer-threejs/wrapper/StatsPanel";
 
 export const KeyPanel = ({ network }: { network: string }) => {
     const statuses: {
@@ -63,3 +63,5 @@ export const KeyPanel = ({ network }: { network: string }) => {
         </div>
     );
 };
+
+export default memo(KeyPanel);

client/src/features/visualizer-threejs/wrapper/StatsPanel.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { useNetworkStats } from "~helpers/stardust/hooks/useNetworkStats";
+import React, { memo } from "react";
+import { useNetworkStats } from "~helpers/nova/hooks/useNetworkStats";
 
 export const StatsPanel = ({ network }: { network: string }) => {
     const [blocksPerSecond] = useNetworkStats(network);
@@ -14,3 +14,5 @@ export const StatsPanel = ({ network }: { network: string }) => {
         </div>
     );
 };
+
+export default memo(StatsPanel);

client/src/features/visualizer-threejs/wrapper/Wrapper.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Modal from "~/app/components/Modal";
 import { TSelectFeedItemNova, TSelectNode } from "~/app/types/visualizer.types";
 import { INetwork } from "~/models/config/INetwork";
-import { KeyPanel } from "./KeyPanel";
+import KeyPanel from "./KeyPanel";
 import mainHeader from "~assets/modals/visualizer/main-header.json";
 import { SelectedFeedInfo } from "./SelectedFeedInfo";
 

client/src/helpers/nova/hooks/useNetworkStats.ts

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import { useIsMounted } from "~helpers/hooks/useIsMounted";
+import { ServiceFactory } from "~factories/serviceFactory";
+import { NOVA } from "~models/config/protocolVersion";
+import { NovaApiClient } from "~services/nova/novaApiClient";
+
+/**
+ * Periodicaly refresh network stats.
+ * @param network The network in context.
+ * @returns The network stats.
+ */
+export function useNetworkStats(network: string): [string] {
+    const isMounted = useIsMounted();
+    const [apiClient] = useState(ServiceFactory.get<NovaApiClient>(`api-client-${NOVA}`));
+    const [updateTimerId, setUpdateTimerId] = useState<NodeJS.Timer | null>(null);
+    const [blocksPerSecond, setBlocksPerSecond] = useState<string>("--");
+
+    useEffect(() => {
+        if (network) {
+            updateNetworkStats();
+        }
+
+        return () => {
+            if (updateTimerId) {
+                clearTimeout(updateTimerId);
+                setUpdateTimerId(null);
+            }
+        };
+    }, [network]);
+
+    const updateNetworkStats = () => {
+        if (isMounted && apiClient && network) {
+            apiClient
+                .stats({
+                    network,
+                    includeHistory: true,
+                })
+                .then((ips) => {
+                    const itemsPerSecond = ips.itemsPerSecond ?? 0;
+                    setBlocksPerSecond(itemsPerSecond >= 0 ? itemsPerSecond.toFixed(2) : "--");
+                })
+                .catch((err) => {
+                    console.error(err);
+                })
+                .finally(() => {
+                    setUpdateTimerId(setTimeout(async () => updateNetworkStats(), 4000));
+                });
+        }
+    };
+
+    return [blocksPerSecond];
+}