Hide scheduled < bestNumber (#5804)

* Hide scheduled < bestNumber

* filtering

* Apply suggestions from code review

packages/page-democracy/src/Execute/DispatchQueue.tsx

@@ -3,7 +3,7 @@
 
 import type { DeriveDispatch } from '@polkadot/api-derive/types';
 
-import React, { useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 
 import { Table } from '@polkadot/react-components';
 import { useApi, useBestNumber, useCall } from '@polkadot/react-hooks';
@@ -21,6 +21,11 @@ function DispatchQueue ({ className }: Props): React.ReactElement<Props> | null
   const bestNumber = useBestNumber();
   const queued = useCall<DeriveDispatch[]>(api.derive.democracy.dispatchQueue);
 
+  const filtered = useMemo(
+    () => bestNumber && queued && queued.filter(({ at }) => at.gte(bestNumber)),
+    [bestNumber, queued]
+  );
+
   const headerRef = useRef([
     [t('dispatch queue'), 'start', 2],
     [t('enact')],
@@ -31,10 +36,10 @@ function DispatchQueue ({ className }: Props): React.ReactElement<Props> | null
   return (
     <Table
       className={className}
-      empty={queued && t<string>('Nothing queued for execution')}
+      empty={filtered && t<string>('Nothing queued for execution')}
       header={headerRef.current}
     >
-      {bestNumber && queued?.filter(({ at }) => bestNumber.lte(at)).map((entry): React.ReactNode => (
+      {filtered?.map((entry): React.ReactNode => (
         <DispatchEntry
           key={entry.index.toString()}
           value={entry}

packages/page-democracy/src/Execute/Scheduled.tsx

@@ -1,22 +1,22 @@
 // Copyright 2017-2021 @polkadot/app-democracy authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { BlockNumber } from '@polkadot/types/interfaces';
 import type { ScheduledExt } from './types';
 
 import React from 'react';
 
 import { CallExpander } from '@polkadot/react-components';
-import { useBestNumber } from '@polkadot/react-hooks';
 import { BlockToTime } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
 interface Props {
+  bestNumber?: BlockNumber;
   className?: string;
   value: ScheduledExt;
 }
 
-function Scheduled ({ className = '', value: { blockNumber, call, maybeId, maybePeriodic } }: Props): React.ReactElement<Props> {
-  const bestNumber = useBestNumber();
+function Scheduled ({ bestNumber, className = '', value: { blockNumber, call, maybeId, maybePeriodic } }: Props): React.ReactElement<Props> {
   const period = maybePeriodic.unwrapOr(null);
   const name = maybeId.unwrapOr(null);
 

packages/page-democracy/src/Execute/Scheduler.tsx

@@ -5,10 +5,10 @@ import type { Option } from '@polkadot/types';
 import type { BlockNumber, Scheduled } from '@polkadot/types/interfaces';
 import type { ScheduledExt } from './types';
 
-import React, { useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 
 import { Table } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
+import { useApi, useBestNumber, useCall } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 import ScheduledView from './Scheduled';
@@ -39,8 +39,14 @@ const transformEntries = {
 function Schedule ({ className = '' }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
+  const bestNumber = useBestNumber();
   const items = useCall<ScheduledExt[]>(api.query.scheduler.agenda.entries, undefined, transformEntries);
 
+  const filtered = useMemo(
+    () => bestNumber && items && items.filter(({ blockNumber }) => blockNumber.gte(bestNumber)),
+    [bestNumber, items]
+  );
+
   const headerRef = useRef([
     [t('scheduled'), 'start'],
     [t('id'), 'start'],
@@ -52,13 +58,14 @@ function Schedule ({ className = '' }: Props): React.ReactElement<Props> {
   return (
     <Table
       className={className}
-      empty={items?.length === 0 && t<string>('No active schedules')}
+      empty={filtered && t<string>('No active schedules')}
       header={headerRef.current}
     >
-      {items?.map((scheduled): React.ReactNode => (
+      {filtered?.map((value): React.ReactNode => (
         <ScheduledView
-          key={scheduled.key}
-          value={scheduled}
+          bestNumber={bestNumber}
+          key={value.key}
+          value={value}
         />
       ))}
     </Table>