From c996ace09b9b075efc4a5c8e5c71e67805b72906 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Mon, 3 May 2021 14:51:57 +0300
Subject: [PATCH] Squash event extraction for block details (#5193)

---
 .../src/BlockInfo/Justifications.tsx          |  4 +-
 packages/page-explorer/src/BlockInfo/Logs.tsx |  4 +-
 .../page-explorer/src/BlockInfo/Summary.tsx   | 64 ++++++-------------
 3 files changed, 26 insertions(+), 46 deletions(-)

diff --git a/packages/page-explorer/src/BlockInfo/Justifications.tsx b/packages/page-explorer/src/BlockInfo/Justifications.tsx
index d4a2832467..fe3c775f37 100644
--- a/packages/page-explorer/src/BlockInfo/Justifications.tsx
+++ b/packages/page-explorer/src/BlockInfo/Justifications.tsx
@@ -38,7 +38,9 @@ function formatTuple (tuple: Tuple): React.ReactNode {
 function JustificationList ({ value }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
 
-  const headerRef = useRef([[t('justifications'), 'start']]);
+  const headerRef = useRef([
+    [t('justifications'), 'start']
+  ]);
 
   const justifications = value.unwrapOr(null);
 
diff --git a/packages/page-explorer/src/BlockInfo/Logs.tsx b/packages/page-explorer/src/BlockInfo/Logs.tsx
index b9f8852baf..b2c5650df2 100644
--- a/packages/page-explorer/src/BlockInfo/Logs.tsx
+++ b/packages/page-explorer/src/BlockInfo/Logs.tsx
@@ -101,7 +101,9 @@ function formatItem (item: DigestItem): React.ReactNode {
 function Logs ({ value }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
 
-  const headerRef = useRef([[t('logs'), 'start']]);
+  const headerRef = useRef([
+    [t('logs'), 'start']
+  ]);
 
   return (
     <Table
diff --git a/packages/page-explorer/src/BlockInfo/Summary.tsx b/packages/page-explorer/src/BlockInfo/Summary.tsx
index 635048613a..4f0453d9ff 100644
--- a/packages/page-explorer/src/BlockInfo/Summary.tsx
+++ b/packages/page-explorer/src/BlockInfo/Summary.tsx
@@ -19,51 +19,27 @@ interface Props {
   signedBlock?: SignedBlock;
 }
 
+function extractEventDetails (events?: KeyedEvent[]): [BN?, BN?, BN?] {
+  return events
+    ? events.reduce(([deposits, transfers, weight], { record: { event: { data, method, section } } }) => [
+      section === 'balances' && method === 'Deposit'
+        ? deposits.iadd(data[1] as Balance)
+        : deposits,
+      section === 'balances' && method === 'Transfer'
+        ? transfers.iadd(data[2] as Balance)
+        : transfers,
+      section === 'system' && ['ExtrinsicFailed', 'ExtrinsicSuccess'].includes(method)
+        ? weight.iadd(((method === 'ExtrinsicSuccess' ? data[0] : data[1]) as DispatchInfo).weight)
+        : weight
+    ], [new BN(0), new BN(0), new BN(0)])
+    : [];
+}
+
 function Summary ({ events, maxBlockWeight, signedBlock }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
 
-  const totalWeight = useMemo(
-    () => events
-      ?.filter(({ record: { event: { method, section } } }) =>
-        section === 'system' &&
-        ['ExtrinsicFailed', 'ExtrinsicSuccess'].includes(method)
-      )
-      .reduce((weight: BN, { record: { event: { data, method } } }) =>
-        weight.iadd(
-          (method === 'ExtrinsicSuccess'
-            ? data[0] as DispatchInfo
-            : data[1] as DispatchInfo
-          ).weight
-        ), new BN(0)
-      ),
-    [events]
-  );
-
-  const deposits = useMemo(
-    () => events
-      ?.filter(({ record: { event: { method, section } } }) =>
-        section === 'balances' &&
-        ['Deposit'].includes(method)
-      )
-      .reduce((deposits: BN, { record: { event: { data } } }) =>
-        deposits.iadd(
-          data[1] as Balance
-        ), new BN(0)
-      ),
-    [events]
-  );
-
-  const transfers = useMemo(
-    () => events
-      ?.filter(({ record: { event: { method, section } } }) =>
-        section === 'balances' &&
-        ['Transfer'].includes(method)
-      )
-      .reduce((deposits: BN, { record: { event: { data } } }) =>
-        deposits.iadd(
-          data[2] as Balance
-        ), new BN(0)
-      ),
+  const [deposits, transfers, weight] = useMemo(
+    () => extractEventDetails(events),
     [events]
   );
 
@@ -88,10 +64,10 @@ function Summary ({ events, maxBlockWeight, signedBlock }: Props): React.ReactEl
             progress={{
               hideValue: true,
               total: maxBlockWeight,
-              value: totalWeight
+              value: weight
             }}
           >
-            {formatNumber(totalWeight)}
+            {formatNumber(weight)}
           </CardSummary>
         </section>
       )}