Refactor delegates monitor view to new project architecture - Closes #4252

packages/views/screens/router/routesMap.js

@@ -3,7 +3,7 @@ import BlockDetails from '@block/manager/blockDetailsManager';
 import Blocks from '@block/manager/blocksManager';
 import Bookmarks from '@bookmark/manager/BookmarkListManager';
 import Dashboard from '@screens/managers/dashboard';
-import DelegatesMonitor from '@screens/managers/monitor/delegates';
+import DelegatesMonitor from '@dpos/validator/components/delegatesMonitorView';
 import DelegatesPerformanceModal from '@screens/managers/wallet/delegatePerformanceModal';
 import HwWalletLogin from '@screens/managers/hwWalletLogin';
 import Login from '@auth/components/Signin';

src/modules/dpos/validator/components/activeDelegatesTab/index.js

@@ -0,0 +1,21 @@
+import React, { useContext } from 'react';
+import DelegateTabContext from '../../context/delegateTabContext';
+import DelegatesTable from '../delegatesTable';
+
+const ActiveDelegatesTab = () => {
+  const {
+    blocks, delegatesWithForgingTimes, filters, watchList, t, activeTab,
+  } = useContext(DelegateTabContext);
+  return (
+    <DelegatesTable
+      blocks={blocks}
+      delegates={delegatesWithForgingTimes}
+      filters={filters}
+      watchList={watchList}
+      t={t}
+      activeTab={activeTab}
+    />
+  );
+};
+
+export default ActiveDelegatesTab;

packages/views/screens/managers/monitor/delegates/delegates.js → src/modules/dpos/validator/components/delegatesMonitorView/delegates.js

@@ -1,16 +1,22 @@
-import React, { useState, useEffect } from 'react';
+/* eslint-disable complexity */
+import React, { useState, useEffect, useCallback } from 'react';
 
 import { Input } from 'src/theme';
 import Box from 'src/theme/box';
 import BoxHeader from 'src/theme/box/header';
 import BoxContent from 'src/theme/box/content';
 import BoxTabs from 'src/theme/tabs';
 import { ROUND_LENGTH } from '@dpos/validator/consts';
+import DelegateTabContext from '../../context/delegateTabContext';
+import DelegatesOverview from '../overview/delegatesOverview';
+import ForgingDetails from '../overview/forgingDetails';
+import LatestVotes from '../latestVotes';
+import DelegatesTable from '../delegatesTable';
+import ActiveDelegatesTab from '../activeDelegatesTab';
+import StandByDelegatesTab from '../standByDelegatesTab';
+import SanctionedDelegatesTab from '../sanctionedDelegatesTab';
+import WatchedDelegatesTab from '../watchedDelegatesTab';
 import styles from './delegates.css';
-import DelegatesOverview from './overview/delegatesOverview';
-import ForgingDetails from './overview/forgingDetails';
-import LatestVotes from './latestVotes';
-import DelegatesTable from './delegatesTable';
 
 // eslint-disable-next-line max-statements
 const DelegatesMonitor = ({
@@ -113,6 +119,14 @@ const DelegatesMonitor = ({
     });
   }
 
+  const displayTab = useCallback((tab) => {
+    if (tab === 'active') return <ActiveDelegatesTab />;
+    if (tab === 'standby') return <StandByDelegatesTab />;
+    if (tab === 'sanctioned') return <SanctionedDelegatesTab />;
+    if (tab === 'watched') return <WatchedDelegatesTab />;
+    return <DelegatesTable />;
+  }, [activeTab]);
+
   return (
     <div>
       <DelegatesOverview
@@ -150,18 +164,22 @@ const DelegatesMonitor = ({
           {activeTab === 'votes' ? (
             <LatestVotes votes={votes} t={t} delegates={votedDelegates} />
           ) : (
-            <DelegatesTable
-              setActiveTab={setActiveTab}
-              delegates={delegatesWithForgingTimes}
-              blocks={blocks}
-              watchList={watchList}
-              watchedDelegates={watchedDelegates}
-              standByDelegates={standByDelegates}
-              sanctionedDelegates={sanctionedDelegates}
-              filters={filters}
-              t={t}
-              activeTab={activeTab}
-            />
+            <DelegateTabContext.Provider
+              value={{
+                blocks,
+                delegatesWithForgingTimes,
+                watchList,
+                filters,
+                t,
+                activeTab,
+                setActiveTab,
+                watchedDelegates,
+                standByDelegates,
+                sanctionedDelegates,
+              }}
+            >
+              {displayTab(activeTab)}
+            </DelegateTabContext.Provider>
           )}
         </BoxContent>
       </Box>