From 05727e7c90f5ff1320a9775af3aee9e9e9179b96 Mon Sep 17 00:00:00 2001
From: Andrea Franz <andrea@gravityblast.com>
Date: Thu, 27 Feb 2020 17:59:19 +0100
Subject: [PATCH] avoid loading the same block multiple times

---
 .../client/src/actions/blocks.ts              | 22 ++++++++++++++++++-
 .../src/components/TransactionsListItem.tsx   |  2 +-
 .../client/src/reducers/blocks.ts             | 20 +++++++++++++++--
 3 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/apps/simple-wallet/client/src/actions/blocks.ts b/apps/simple-wallet/client/src/actions/blocks.ts
index ed0093d..9ab7842 100644
--- a/apps/simple-wallet/client/src/actions/blocks.ts
+++ b/apps/simple-wallet/client/src/actions/blocks.ts
@@ -1,5 +1,12 @@
 import { Dispatch } from 'redux';
 import { config } from '../global';
+import { RootState } from '../reducers';
+
+export const BLOCK_LOADING = "BLOCK_LOADING";
+export interface BlockLoadingAction {
+  type: typeof BLOCK_LOADING
+  number: number
+}
 
 export const BLOCK_LOADED = "BLOCK_LOADED";
 export interface BlockLoadedAction {
@@ -9,6 +16,7 @@ export interface BlockLoadedAction {
 }
 
 export type BlocksActions =
+  BlockLoadingAction |
   BlockLoadedAction;
 
 export const blockLoaded = (number: number, timestamp: number): BlockLoadedAction => ({
@@ -17,8 +25,20 @@ export const blockLoaded = (number: number, timestamp: number): BlockLoadedActio
   timestamp,
 });
 
+export const loadingBlock = (number: number): BlockLoadingAction => ({
+  type: BLOCK_LOADING,
+  number,
+});
+
 export const loadBlock = (number: number) => {
-  return (dispatch: Dispatch) => {
+  return (dispatch: Dispatch, getState: () => RootState) => {
+    if (getState().blocks[number] !== undefined) {
+      // block already loaded
+      return;
+    }
+
+    dispatch(loadingBlock(number))
+
     config.web3!.eth.getBlock(number).then(b => {
       let timestamp;
       if (typeof b.timestamp === "string") {
diff --git a/apps/simple-wallet/client/src/components/TransactionsListItem.tsx b/apps/simple-wallet/client/src/components/TransactionsListItem.tsx
index 3e6fdb7..8d7c5cc 100644
--- a/apps/simple-wallet/client/src/components/TransactionsListItem.tsx
+++ b/apps/simple-wallet/client/src/components/TransactionsListItem.tsx
@@ -115,7 +115,7 @@ const TransactionsListItem = (props: Props) => {
   </span>;
 
   const secondary = <span>
-    <span className={classes.block}>from: {fromAddress}</span>
+    <span className={classes.block}>{tx.blockNumber} from: {fromAddress}</span>
     <span className={classes.block}>to: {toAddress}</span>
   </span>;
 
diff --git a/apps/simple-wallet/client/src/reducers/blocks.ts b/apps/simple-wallet/client/src/reducers/blocks.ts
index 1d83ed2..0f438da 100644
--- a/apps/simple-wallet/client/src/reducers/blocks.ts
+++ b/apps/simple-wallet/client/src/reducers/blocks.ts
@@ -1,11 +1,12 @@
 import {
+  BLOCK_LOADING,
   BLOCK_LOADED,
   BlocksActions,
 } from '../actions/blocks';
 
 export interface BlockState {
   number: number
-  timestamp: number
+  timestamp: number | undefined
 }
 
 export interface BlocksState {
@@ -16,11 +17,26 @@ const initialState = {};
 
 export const blocksReducer = (state: BlocksState = initialState, action: BlocksActions): BlocksState => {
   switch (action.type) {
-    case BLOCK_LOADED: {
+    case BLOCK_LOADING: {
       return {
         ...state,
         [action.number]: {
           number: action.number,
+          timestamp: undefined,
+        }
+      }
+    }
+
+    case BLOCK_LOADED: {
+      const blockState = state[action.number];
+      if (blockState === undefined) {
+        return state;
+      }
+
+      return {
+        ...state,
+        [action.number]: {
+          ...blockState,
           timestamp: action.timestamp,
         }
       }