From 1ee1d4ebf7cb417ce40623defeea197fbd655498 Mon Sep 17 00:00:00 2001
From: gala1234 <calero.vg@gmail.com>
Date: Thu, 26 May 2022 11:32:57 +0200
Subject: [PATCH] explorer: altering api response to make ui work

---
 explorer/src/api/index.ts                 | 21 +++++++++++++++++----
 explorer/src/components/MixNodes/index.ts |  2 ++
 explorer/src/pages/Mixnodes/index.tsx     | 17 +++++++++++++++++
 explorer/src/typeDefs/explorer-api.ts     |  1 +
 4 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/explorer/src/api/index.ts b/explorer/src/api/index.ts
index 8c0c087f46..49490d1d25 100644
--- a/explorer/src/api/index.ts
+++ b/explorer/src/api/index.ts
@@ -60,8 +60,15 @@ export class Api {
     }
     const res = await fetch(MIXNODES_API);
     const json = await res.json();
-    storeInCache('mixnodes', JSON.stringify(json));
-    return json;
+    // TODO remove hard coded API response
+    const nodeArr = json.map((element: MixNodeResponseItem) => {
+      const node = element;
+      node.delegators_number = 2;
+      return node;
+    });
+
+    storeInCache('mixnodes', JSON.stringify(nodeArr));
+    return nodeArr;
   };
 
   static fetchMixnodesActiveSetByStatus = async (status: MixnodeStatus): Promise<MixNodeResponse> => {
@@ -71,8 +78,14 @@ export class Api {
     }
     const res = await fetch(`${MIXNODES_API}/active-set/${status}`);
     const json = await res.json();
-    storeInCache(`mixnodes-${status}`, JSON.stringify(json));
-    return json;
+    // TODO remove hard coded API response
+    const nodeArr = json.map((element: MixNodeResponseItem) => {
+      const node = element;
+      node.delegators_number = 2;
+      return node;
+    });
+    storeInCache(`mixnodes-${status}`, JSON.stringify(nodeArr));
+    return nodeArr;
   };
 
   static fetchMixnodeByID = async (id: string): Promise<MixNodeResponseItem | undefined> => {
diff --git a/explorer/src/components/MixNodes/index.ts b/explorer/src/components/MixNodes/index.ts
index b9e696e785..26413c6fbc 100644
--- a/explorer/src/components/MixNodes/index.ts
+++ b/explorer/src/components/MixNodes/index.ts
@@ -13,6 +13,7 @@ export type MixnodeRowType = {
   layer: string;
   profit_percentage: string;
   avg_uptime: string;
+  delegators_number: number;
 };
 
 export function mixnodeToGridRow(arrayOfMixnodes?: MixNodeResponse): MixnodeRowType[] {
@@ -37,5 +38,6 @@ export function mixNodeResponseItemToMixnodeRowType(item: MixNodeResponseItem):
     layer: item?.layer || '',
     profit_percentage: `${profitPercentage}%`,
     avg_uptime: `${item.avg_uptime}%` || '-',
+    delegators_number: Number(item.delegators_number) || 0,
   };
 }
diff --git a/explorer/src/pages/Mixnodes/index.tsx b/explorer/src/pages/Mixnodes/index.tsx
index e051af98ed..d9e48db259 100644
--- a/explorer/src/pages/Mixnodes/index.tsx
+++ b/explorer/src/pages/Mixnodes/index.tsx
@@ -231,6 +231,23 @@ export const PageMixnodes: React.FC = () => {
         </MuiLink>
       ),
     },
+    {
+      field: 'delegators_number',
+      headerName: 'Delegators Number',
+      renderHeader: () => <CustomColumnHeading headingTitle="Delegators Number" />,
+      headerClassName: 'MuiDataGrid-header-override',
+      width: 185,
+      headerAlign: 'left',
+      renderCell: (params: GridRenderCellParams) => (
+        <MuiLink
+          sx={{ ...getCellStyles(theme, params.row), textAlign: 'left' }}
+          component={RRDLink}
+          to={`/network-components/mixnode/${params.row.identity_key}`}
+        >
+          {params.value}
+        </MuiLink>
+      ),
+    },
   ];
 
   const handlePageSize = (event: SelectChangeEvent<string>) => {
diff --git a/explorer/src/typeDefs/explorer-api.ts b/explorer/src/typeDefs/explorer-api.ts
index 36dd210181..9bc05c5988 100644
--- a/explorer/src/typeDefs/explorer-api.ts
+++ b/explorer/src/typeDefs/explorer-api.ts
@@ -84,6 +84,7 @@ export interface MixNodeResponseItem {
   };
   mix_node: MixNode;
   avg_uptime: number;
+  delegators_number: number;
 }
 
 export type MixNodeResponse = MixNodeResponseItem[];