Adjust/simplify validator list rendering (#5345)

packages/page-staking/src/Overview/CurrentList.tsx

@@ -6,7 +6,7 @@ import type { Authors } from '@polkadot/react-query/BlockAuthors';
 import type { AccountId } from '@polkadot/types/interfaces';
 import type { SortedTargets, ValidatorInfo } from '../types';
 
-import React, { useCallback, useContext, useMemo, useRef, useState } from 'react';
+import React, { useContext, useMemo, useRef, useState } from 'react';
 
 import { Table } from '@polkadot/react-components';
 import { useApi, useCall, useLoadingDelay, useSavedFlags } from '@polkadot/react-hooks';
@@ -55,20 +55,17 @@ function filterAccounts (accounts: string[] = [], elected: string[], favorites:
 }
 
 function accountsToString (accounts: AccountId[]): string[] {
-  return accounts.map((accountId) => accountId.toString());
+  return accounts.map((a) => a.toString());
 }
 
 function getFiltered (stakingOverview: DeriveStakingOverview, favorites: string[], next?: string[]): Filtered {
   const allElected = accountsToString(stakingOverview.nextElected);
   const validatorIds = accountsToString(stakingOverview.validators);
-  const validators = filterAccounts(validatorIds, allElected, favorites, []);
-  const elected = filterAccounts(allElected, allElected, favorites, validatorIds);
-  const waiting = filterAccounts(next, [], favorites, allElected);
 
   return {
-    elected,
-    validators,
-    waiting
+    elected: filterAccounts(allElected, allElected, favorites, validatorIds),
+    validators: filterAccounts(validatorIds, allElected, favorites, []),
+    waiting: filterAccounts(next, [], favorites, allElected)
   };
 }
 
@@ -91,8 +88,19 @@ function CurrentList ({ favorites, hasQueries, isIntentions, paraValidators = DE
     [favorites, stakingOverview, targets]
   );
 
+  const addresses = useMemo(
+    () => isIntentions
+      ? (isLoading || !nominatedBy || !elected || !waiting)
+        ? undefined
+        : elected.concat(waiting)
+      : isLoading || !validators
+        ? undefined
+        : validators,
+    [elected, isIntentions, isLoading, nominatedBy, validators, waiting]
+  );
+
   const infoMap = useMemo(
-    () => targets.validators?.reduce((result: Record<string, ValidatorInfo>, info): Record<string, ValidatorInfo> => {
+    () => targets.validators?.reduce<Record<string, ValidatorInfo>>((result, info) => {
       result[info.key] = info;
 
       return result;
@@ -100,98 +108,80 @@ function CurrentList ({ favorites, hasQueries, isIntentions, paraValidators = DE
     [targets]
   );
 
-  const headerWaitingRef = useRef([
-    [t('intentions'), 'start', 2],
-    [t('nominators'), 'expand'],
-    [t('commission'), 'number'],
-    [],
-    []
-  ]);
+  const headerRef = useRef(
+    isIntentions
+      ? [
+        [t('intentions'), 'start', 2],
+        [t('nominators'), 'expand'],
+        [t('commission'), 'number'],
+        [],
+        []
+      ]
+      : [
+        [t('validators'), 'start', 2],
+        [t('other stake'), 'expand'],
+        [t('own stake'), 'media--1100'],
+        [t('commission')],
+        [t('points')],
+        [t('last #')],
+        [],
+        [undefined, 'media--1200']
+      ]
+  );
 
-  const headerActiveRef = useRef([
-    [t('validators'), 'start', 2],
-    [t('other stake'), 'expand'],
-    [t('own stake'), 'media--1100'],
-    [t('commission')],
-    [t('points')],
-    [t('last #')],
-    [],
-    [undefined, 'media--1200']
-  ]);
-
-  const _renderRows = useCallback(
-    (addresses?: AccountExtend[], isMain?: boolean): React.ReactNode[] =>
-      (addresses || []).map(([address, isElected, isFavorite]): React.ReactNode => (
+  return (
+    <Table
+      empty={
+        !isLoading && (
+          isIntentions
+            ? waiting && nominatedBy && t<string>('No waiting validators found')
+            : recentlyOnline && validators && infoMap && t<string>('No active validators found')
+        )
+      }
+      emptySpinner={
+        <>
+          {!waiting && <div>{t<string>('Retrieving validators')}</div>}
+          {!infoMap && <div>{t<string>('Retrieving validator info')}</div>}
+          {isIntentions
+            ? !nominatedBy && <div>{t<string>('Retrieving nominators')}</div>
+            : !recentlyOnline && <div>{t<string>('Retrieving online status')}</div>
+          }
+        </>
+      }
+      filter={
+        <Filtering
+          nameFilter={nameFilter}
+          setNameFilter={setNameFilter}
+          setWithIdentity={setToggle.withIdentity}
+          withIdentity={toggles.withIdentity}
+        />
+      }
+      header={headerRef.current}
+      legend={
+        <Legend isRelay={!isIntentions && !!(api.query.parasShared || api.query.shared)?.activeValidatorIndices} />
+      }
+    >
+      {addresses?.map(([address, isElected, isFavorite]): React.ReactNode => (
         <Address
           address={address}
           filterName={nameFilter}
           hasQueries={hasQueries}
           isElected={isElected}
           isFavorite={isFavorite}
-          isMain={isMain}
-          isPara={paraValidators[address]}
+          isMain={!isIntentions}
+          isPara={isIntentions ? false : paraValidators[address]}
           key={address}
           lastBlock={byAuthor[address]}
-          nominatedBy={nominatedBy ? (nominatedBy[address] || []) : undefined}
+          nominatedBy={nominatedBy?.[address]}
           points={eraPoints[address]}
           recentlyOnline={recentlyOnline?.[address]}
           toggleFavorite={toggleFavorite}
           validatorInfo={infoMap?.[address]}
           withIdentity={toggles.withIdentity}
         />
-      )),
-    [byAuthor, eraPoints, hasQueries, infoMap, nameFilter, nominatedBy, paraValidators, recentlyOnline, toggleFavorite, toggles]
+      ))}
+    </Table>
   );
-
-  return isIntentions
-    ? (
-      <Table
-        empty={!isLoading && waiting && nominatedBy && t<string>('No waiting validators found')}
-        emptySpinner={
-          <>
-            {!waiting && <div>{t<string>('Retrieving validators')}</div>}
-            {!infoMap && <div>{t<string>('Retrieving validator info')}</div>}
-            {!nominatedBy && <div>{t<string>('Retrieving nominators')}</div>}
-          </>
-        }
-        filter={
-          <Filtering
-            nameFilter={nameFilter}
-            setNameFilter={setNameFilter}
-            setWithIdentity={setToggle.withIdentity}
-            withIdentity={toggles.withIdentity}
-          />
-        }
-        header={headerWaitingRef.current}
-        legend={<Legend />}
-      >
-        {(isLoading || !nominatedBy) ? undefined : _renderRows(elected, false).concat(_renderRows(waiting, false))}
-      </Table>
-    )
-    : (
-      <Table
-        empty={!isLoading && recentlyOnline && validators && infoMap && t<string>('No active validators found')}
-        emptySpinner={
-          <>
-            {!validators && <div>{t<string>('Retrieving validators')}</div>}
-            {!infoMap && <div>{t<string>('Retrieving validator info')}</div>}
-            {!recentlyOnline && <div>{t<string>('Retrieving online status')}</div>}
-          </>
-        }
-        filter={
-          <Filtering
-            nameFilter={nameFilter}
-            setNameFilter={setNameFilter}
-            setWithIdentity={setToggle.withIdentity}
-            withIdentity={toggles.withIdentity}
-          />
-        }
-        header={headerActiveRef.current}
-        legend={<Legend isRelay={!!(api.query.parasShared || api.query.shared)?.activeValidatorIndices} />}
-      >
-        {isLoading ? undefined : _renderRows(validators, true)}
-      </Table>
-    );
 }
 
 export default React.memo(CurrentList);