feature: remove infinite scroll on activity screen (#2503)

* replace infinite scroll with pagination * Fix tests remove logging * Remove commented out style * remove cruft
CityOfZion · Jun 20, 2023 · e4c6143 · e4c6143
1 parent 37c48ef
commit e4c6143
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 32 deletions.
diff --git a/__tests__/components/TransactionHistoryPanel.test.js b/__tests__/components/TransactionHistoryPanel.test.js
@@ -45,7 +45,7 @@ const initialState = {
       batch: false,
       progress: LOADED,
       loadedCount: 1,
-      data: [],
+      data: { transactions: [] },
     },
   },
 }
@@ -114,10 +114,11 @@ describe('TransactionHistoryPanel', () => {
 
   test('correctly renders with NEO and GAS transaction history', () => {
     const transactionState = merge({}, initialState, {
-      spunky: { transactionHistory: { data: transactions } },
+      spunky: {
+        transactionHistory: { data: { entries: transactions, count: 2 } },
+      },
     })
     const { wrapper } = setup(transactionState, false)
-
     const transactionList = wrapper.find('#transactionList')
     expect(transactionList.children().length).toEqual(2)
 

diff --git a/__tests__/components/__snapshots__/TransactionHistoryPanel.test.js.snap b/__tests__/components/__snapshots__/TransactionHistoryPanel.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TransactionHistoryPanel renders without crashing 1`] = `
-<Connect(withData(Connect(withData(withProps(Connect(withActions(Connect(withProgress(withProgressComponents(Connect(withActions(Connect(withActions(Connect(withCall(Connect(withData(Connect(withProgress(withProps(Connect(withData(TransactionHistory)))))))))))))))))))))))
+<Connect(withData(Connect(withData(withProps(Connect(withActions(Connect(withActions(Connect(withCall(Connect(withData(Connect(withProgress(withProps(Connect(withData(TransactionHistory))))))))))))))))))
   showErrorNotification={[Function]}
   showInfoNotification={[Function]}
   showSuccessNotification={[Function]}

diff --git a/app/actions/transactionHistoryActions.js b/app/actions/transactionHistoryActions.js
@@ -213,10 +213,12 @@ export default createActions(
     }
 
     let parsedEntries = []
+    let count = 0
 
     if (chain === 'neo3') {
       const network = net === 'MainNet' ? 'mainnet' : 'testnet'
       const data = await NeoRest.addressTXFull(address, page, network)
+      count = data.totalCount
       parsedEntries = await computeN3Activity(data, address, net)
     } else {
       const network = net === 'MainNet' ? 'mainnet' : 'testnet'
@@ -225,15 +227,16 @@ export default createActions(
         page,
         network,
       )
+      count = data.total_entries
       parsedEntries = await parseAbstractData(data.entries, address, net)
     }
     page += 1
     if (shouldIncrementPagination) {
       if (page === 1) entries = []
       entries.push(...parsedEntries)
-      return entries
+      return { entries, count }
     }
     entries = [...parsedEntries]
-    return entries
+    return { entries, count }
   },
 )
diff --git a/app/components/TransactionHistory/TransactionHistoryPanel/TransactionHistoryPanel.jsx b/app/components/TransactionHistory/TransactionHistoryPanel/TransactionHistoryPanel.jsx
@@ -2,21 +2,26 @@
 import React from 'react'
 import classNames from 'classnames'
 import { intersectionBy } from 'lodash-es'
+import { Center, Box } from '@chakra-ui/react'
 
 import Transactions from './Transactions'
 import Panel from '../../Panel'
 import { pruneConfirmedOrStaleTransaction } from '../../../actions/pendingTransactionActions'
 import styles from './TransactionHistoryPanel.scss'
+import Button from '../../Button'
+import Loader from '../../Loader'
 
 type Props = {
   className: ?string,
   transactions: Array<Object>,
+  count: number,
   handleFetchAdditionalTxData: () => void,
   handleGetPendingTransactionInfo: () => void,
   handleRefreshTxData: () => void,
   pendingTransactions: Array<Object>,
   address: string,
   showSuccessNotification: ({ message: string }) => void,
+  loading: boolean,
 }
 
 const REFRESH_INTERVAL_MS = 30000
@@ -38,20 +43,61 @@ export default class TransactionHistory extends React.Component<Props> {
   }
 
   render() {
-    const { className, transactions } = this.props
+    const {
+      className,
+      transactions,
+      handleFetchAdditionalTxData,
+      loading,
+      count,
+    } = this.props
     const filteredPendingTransactions = this.pruneConfirmedTransactionsFromPending()
     this.pruneReturnedTransactionsFromStorage()
     return (
-      <Panel
-        className={classNames(styles.transactionHistoryPanel, className)}
-        onScroll={this.handleScroll}
-      >
-        <Transactions
-          className={styles.transactions}
-          transactions={transactions}
-          pendingTransactions={filteredPendingTransactions || []}
-        />
-      </Panel>
+      <>
+        <Panel
+          className={classNames(styles.transactionHistoryPanel, className)}
+        >
+          {loading && !transactions.length ? (
+            <Center height="10000px">
+              <Loader />
+            </Center>
+          ) : (
+            <Transactions
+              className={styles.transactions}
+              transactions={transactions}
+              pendingTransactions={filteredPendingTransactions || []}
+            />
+          )}
+        </Panel>
+
+        {!!transactions.length && (
+          <Center
+            width="300px"
+            margin="auto"
+            paddingTop="12px"
+            paddingBottom="12px"
+            display="flex"
+            flexDirection="column"
+          >
+            <Box fontSize="14px" opacity={0.5} marginBottom="12px">
+              Displaying {transactions.length} of {count} transactions
+            </Box>
+
+            <Button
+              onClick={handleFetchAdditionalTxData}
+              primary
+              disabled={transactions.length === count}
+              className={styles.loadMoreButton}
+            >
+              {loading ? (
+                <Loader className={styles.buttonLoadingIndicator} />
+              ) : (
+                'Load more'
+              )}
+            </Button>
+          </Center>
+        )}
+      </>
     )
   }
 
@@ -97,13 +143,9 @@ export default class TransactionHistory extends React.Component<Props> {
       handleGetPendingTransactionInfo()
     }
   }
+}
 
-  handleScroll = (e: SyntheticInputEvent<EventTarget>) => {
-    const { handleFetchAdditionalTxData } = this.props
-    const bottom =
-      e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight
-    if (bottom) {
-      handleFetchAdditionalTxData()
-    }
-  }
+TransactionHistory.defaultProps = {
+  transactions: [],
+  pendingTransactions: [],
 }
diff --git a/app/components/TransactionHistory/TransactionHistoryPanel/TransactionHistoryPanel.scss b/app/components/TransactionHistory/TransactionHistoryPanel/TransactionHistoryPanel.scss
@@ -26,3 +26,22 @@
 .transactions {
   margin: -24px;
 }
+
+.loadMoreButton {
+  height: 40px;
+}
+
+.transactionHistoryPanel {
+  margin-top: -12px;
+}
+
+.buttonLoadingIndicator {
+  position: relative;
+  width: 15px;
+  height: 15px;
+  opacity: 0.4;
+  margin: auto;
+  left: -10px;
+  top: auto;
+  transform: none;
+}
diff --git a/app/components/TransactionHistory/TransactionHistoryPanel/index.js b/app/components/TransactionHistory/TransactionHistoryPanel/index.js
@@ -17,8 +17,9 @@ import {
   showInfoNotification,
 } from '../../../modules/notifications'
 
-const mapTransactionsDataToProps = transactions => ({
-  transactions,
+const mapTransactionsDataToProps = data => ({
+  transactions: data?.entries ?? [],
+  count: data?.count ?? 0,
 })
 
 const mapAccountActionsToProps = (actions, { net, address }) => ({
@@ -64,9 +65,6 @@ export default compose(
   ),
   withAuthData(),
   withNetworkData(),
-  withProgressPanel(transactionHistoryActions, {
-    title: '',
-  }),
   withActions(transactionHistoryActions, mapAccountActionsToProps),
   withActions(getPendingTransactionInfo, mapPendingTransactionActionsToProps),
   withCall(getPendingTransactionInfo),

diff --git a/app/containers/TransactionHistory/TransactionHistory.scss b/app/containers/TransactionHistory/TransactionHistory.scss
@@ -1,8 +1,7 @@
 .transactionHistory {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  max-height: calc(100vh - 120px) !important;
+  height: calc(100vh - 195px) !important;
 
   .transactionHistoryPanel {
     flex: 1 1 auto;