From e9871f6bd599e85bb5832560830ef48c3f7628bd Mon Sep 17 00:00:00 2001
From: Yana <yanok87@users.noreply.github.com>
Date: Thu, 23 Jan 2025 12:03:47 +0200
Subject: [PATCH] fix async func in NodeTableWithAction

---
 .../nodeTable/NodeTableWithAction.tsx         | 47 ++++++++++++++-----
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/explorer-nextjs/src/components/nodeTable/NodeTableWithAction.tsx b/explorer-nextjs/src/components/nodeTable/NodeTableWithAction.tsx
index 104685ea4e..86ef6a7e40 100644
--- a/explorer-nextjs/src/components/nodeTable/NodeTableWithAction.tsx
+++ b/explorer-nextjs/src/components/nodeTable/NodeTableWithAction.tsx
@@ -4,14 +4,25 @@ import type { IObservatoryNode } from "@/app/api/types";
 import { CURRENT_EPOCH_REWARDS } from "@/app/api/urls";
 import NodeTable from "./NodeTable";
 
-const epochRewards = await fetch(CURRENT_EPOCH_REWARDS, {
-  headers: {
-    Accept: "application/json",
-    "Content-Type": "application/json; charset=utf-8",
-  },
-});
-const epochRewardsData: ExplorerData["currentEpochRewardsData"] =
-  await epochRewards.json();
+async function fetchEpochRewards() {
+  try {
+    const response = await fetch(CURRENT_EPOCH_REWARDS, {
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json; charset=utf-8",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch epoch rewards: ${response.statusText}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error("Error fetching epoch rewards:", error);
+    throw new Error("Failed to fetch epoch rewards data");
+  }
+}
 
 function getNodeSaturationPoint(
   totalStake: number,
@@ -28,12 +39,16 @@ function getNodeSaturationPoint(
   return Number(ratio.toFixed());
 }
 
-const mappedNymNodes = (nodes: IObservatoryNode[]) =>
+const mappedNymNodes = (
+  nodes: IObservatoryNode[],
+  epochRewardsData: ExplorerData["currentEpochRewardsData"],
+) =>
   nodes.map((node) => {
     const nodeSaturationPoint = getNodeSaturationPoint(
       node.total_stake,
       epochRewardsData.interval.stake_saturation_point,
     );
+
     return {
       name: node.self_description.moniker,
       nodeId: node.node_id,
@@ -53,12 +68,20 @@ export type MappedNymNode = MappedNymNodes[0];
 
 const NodeTableWithAction = async () => {
   try {
+    // Fetch the epoch rewards data
+    const epochRewardsData: ExplorerData["currentEpochRewardsData"] =
+      await fetchEpochRewards();
+
+    // Fetch the Nym nodes
     const nodes = await getNymNodes();
-    const data = mappedNymNodes(nodes);
+
+    // Map the nodes with the rewards data
+    const data = mappedNymNodes(nodes, epochRewardsData);
+
     return <NodeTable nodes={data} />;
   } catch (error) {
-    console.error(error);
-    return [];
+    console.error("Error in NodeTableWithAction:", error);
+    return <div>Error loading data.</div>; // Render error fallback UI
   }
 };