Improve status display via context (#2992)

packages/apps/src/Content/Status.tsx

@@ -4,10 +4,10 @@
 
 import { EventRecord } from '@polkadot/types/interfaces';
 import { KeyringOptions } from '@polkadot/ui-keyring/options/types';
-import { ActionStatus, QueueStatus, QueueTx, QueueAction$Add } from '@polkadot/react-components/Status/types';
+import { ActionStatus } from '@polkadot/react-components/Status/types';
 
-import React, { useEffect } from 'react';
-import { Status as StatusDisplay } from '@polkadot/react-components';
+import React, { useContext, useEffect } from 'react';
+import { Status as StatusDisplay, StatusContext } from '@polkadot/react-components';
 import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 import { stringToU8a } from '@polkadot/util';
 import { xxhashAsHex } from '@polkadot/util-crypto';
@@ -16,9 +16,6 @@ import { useTranslation } from '../translate';
 
 interface Props {
   optionsAll?: KeyringOptions;
-  queueAction: QueueAction$Add;
-  stqueue: QueueStatus[];
-  txqueue: QueueTx[];
 }
 
 let prevEventHash: string;
@@ -64,7 +61,8 @@ function filterEvents (allAccounts: string[], t: <T = string> (key: string, opts
     .filter((item): item is ActionStatus => !!item);
 }
 
-function Status ({ optionsAll, queueAction, stqueue, txqueue }: Props): React.ReactElement<Props> {
+function Status ({ optionsAll }: Props): React.ReactElement<Props> {
+  const { queueAction } = useContext(StatusContext);
   const { api, isApiReady } = useApi();
   const { allAccounts } = useAccounts();
   const { t } = useTranslation();
@@ -77,10 +75,7 @@ function Status ({ optionsAll, queueAction, stqueue, txqueue }: Props): React.Re
   }, [allAccounts, events, optionsAll, queueAction, t]);
 
   return (
-    <StatusDisplay
-      stqueue={stqueue}
-      txqueue={txqueue}
-    />
+    <StatusDisplay />
   );
 }
 

packages/apps/src/Content/index.tsx

@@ -34,7 +34,7 @@ function Content ({ className }: Props): React.ReactElement<Props> {
   const location = useLocation();
   const { t } = useTranslation();
   const { isApiConnected, isApiReady } = useApi();
-  const { queueAction, stqueue, txqueue } = useContext(StatusContext);
+  const { queueAction } = useContext(StatusContext);
   const { Component, display: { needsApi }, name } = useMemo(
     (): Route => {
       const app = location.pathname.slice(1) || '';
@@ -64,11 +64,7 @@ function Content ({ className }: Props): React.ReactElement<Props> {
                 />
               </ErrorBoundary>
             </Suspense>
-            <Status
-              queueAction={queueAction}
-              stqueue={stqueue}
-              txqueue={txqueue}
-            />
+            <Status />
           </>
         )
       }

packages/react-components/src/Status/index.tsx

@@ -4,7 +4,7 @@
 
 import { QueueStatus, QueueTx, QueueTxStatus } from './types';
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { registry } from '@polkadot/react-api';
 
@@ -21,8 +21,6 @@ export { StatusContext };
 
 interface Props {
   className?: string;
-  stqueue?: QueueStatus[];
-  txqueue?: QueueTx[];
 }
 
 function iconName (status: string): any {
@@ -150,29 +148,33 @@ function renderItem ({ error, extrinsic, id, removeItem, rpc, status }: QueueTx)
 }
 
 function filterSt (stqueue?: QueueStatus[]): QueueStatus[] {
-  return (stqueue || []).filter(({ isCompleted }): boolean => !isCompleted);
+  return (stqueue || []).filter(({ isCompleted }) => !isCompleted);
 }
 
 function filterTx (txqueue?: QueueTx[]): [QueueTx[], QueueTx[]] {
-  const allTx = (txqueue || []).filter(({ status }): boolean => !['completed', 'incomplete'].includes(status));
+  const allTx = (txqueue || []).filter(({ status }) => !['completed', 'incomplete'].includes(status));
 
-  return [allTx, allTx.filter(({ status }): boolean => STATUS_COMPLETE.includes(status))];
+  return [allTx, allTx.filter(({ status }) => STATUS_COMPLETE.includes(status))];
 }
 
-function Status ({ className = '', stqueue, txqueue }: Props): React.ReactElement<Props> | null {
+function Status ({ className = '' }: Props): React.ReactElement<Props> | null {
+  const { stqueue, txqueue } = useContext(StatusContext);
+  const [allSt, setAllSt] = useState<QueueStatus[]>([]);
+  const [[allTx, completedTx], setAllTx] = useState<[QueueTx[], QueueTx[]]>([[], []]);
   const { t } = useTranslation();
-  const allSt = useMemo(
-    (): QueueStatus[] => filterSt(stqueue),
-    [stqueue]
-  );
-  const [allTx, completedTx] = useMemo(
-    (): [QueueTx[], QueueTx[]] => filterTx(txqueue),
-    [txqueue]
-  );
+
+  useEffect((): void => {
+    setAllSt(filterSt(stqueue));
+  }, [stqueue]);
+
+  useEffect((): void => {
+    setAllTx(filterTx(txqueue));
+  }, [txqueue]);
+
   const _onDismiss = useCallback(
     (): void => {
-      allSt.map((s): void => s.removeItem());
-      completedTx.map((t): void => t.removeItem());
+      allSt.map((s) => s.removeItem());
+      completedTx.map((t) => t.removeItem());
     },
     [allSt, completedTx]
   );