FIX: fix wallet/transaction perfomance

potmarion · Jun 30, 2020 · 85f1383 · 85f1383
1 parent 7804ff7
commit 85f1383
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 58 deletions.
diff --git a/BlueComponents.js b/BlueComponents.js
@@ -1,5 +1,5 @@
 /* eslint react/prop-types: "off", react-native/no-inline-styles: "off" */
-import React, { Component, useEffect, useState } from 'react';
+import React, { Component, useState } from 'react';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import PropTypes from 'prop-types';
 import { Icon, Input, Text, Header, ListItem } from 'react-native-elements';
@@ -589,32 +589,28 @@ export class BlueTextCentered extends Component {
   }
 }
 
-export class BlueListItem extends Component {
-  render() {
-    return (
-      <ListItem
-        testID={this.props.testID}
-        bottomDivider
-        containerStyle={{
-          backgroundColor: 'transparent',
-          borderBottomColor: '#ededed',
-          paddingTop: 16,
-          paddingBottom: 16,
-        }}
-        titleStyle={{
-          color: this.props.disabled ? BlueApp.settings.buttonDisabledTextColor : BlueApp.settings.foregroundColor,
-          fontSize: 16,
-          fontWeight: '500',
-        }}
-        subtitleStyle={{ flexWrap: 'wrap', color: BlueApp.settings.alternativeTextColor, fontWeight: '400', fontSize: 14 }}
-        subtitleNumberOfLines={1}
-        titleNumberOfLines={0}
-        Component={TouchableOpacity}
-        {...this.props}
-      />
-    );
-  }
-}
+export const BlueListItem = React.memo(props => (
+  <ListItem
+    testID={props.testID}
+    bottomDivider
+    containerStyle={{
+      backgroundColor: 'transparent',
+      borderBottomColor: '#ededed',
+      paddingTop: 16,
+      paddingBottom: 16,
+    }}
+    titleStyle={{
+      color: props.disabled ? BlueApp.settings.buttonDisabledTextColor : BlueApp.settings.foregroundColor,
+      fontSize: 16,
+      fontWeight: '500',
+    }}
+    subtitleStyle={{ flexWrap: 'wrap', color: BlueApp.settings.alternativeTextColor, fontWeight: '400', fontSize: 14 }}
+    subtitleNumberOfLines={1}
+    titleNumberOfLines={0}
+    Component={TouchableOpacity}
+    {...props}
+  />
+));
 
 export class BlueFormLabel extends Component {
   render() {
@@ -1421,16 +1417,9 @@ export class NewWalletPanel extends Component {
   }
 }
 
-export const BlueTransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUnit.BTC }) => {
+export const BlueTransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUnit.BTC, timeElapsed }) => {
   const [subtitleNumberOfLines, setSubtitleNumberOfLines] = useState(1);
 
-  // re-render component every one minute
-  const [tick, setTick] = useState(0);
-  useEffect(() => {
-    const id = setInterval(() => setTick(tick + 1), 60000 + Math.random() * 5000);
-    return () => clearInterval(id);
-  }, [tick]);
-
   const transactionTimeToReadable = loc.transactionTimeToReadable(item.received);
 
   const txMemo = () => {
@@ -1593,19 +1582,21 @@ export const BlueTransactionListItem = React.memo(({ item, itemPriceUnit = Bitco
   };
 
   return (
-    <BlueListItem
-      leftAvatar={avatar()}
-      title={transactionTimeToReadable}
-      titleNumberOfLines={subtitleNumberOfLines}
-      subtitle={subtitle()}
-      subtitleProps={{ numberOfLines: subtitleNumberOfLines }}
-      onPress={onPress}
-      onLongPress={onLongPress}
-      chevron={false}
-      Component={TouchableOpacity}
-      rightTitle={rowTitle()}
-      rightTitleStyle={rowTitleStyle()}
-    />
+    <View style={{ marginHorizontal: 4 }}>
+      <BlueListItem
+        leftAvatar={avatar()}
+        title={transactionTimeToReadable}
+        titleNumberOfLines={subtitleNumberOfLines}
+        subtitle={subtitle()}
+        subtitleProps={{ numberOfLines: subtitleNumberOfLines }}
+        onPress={onPress}
+        onLongPress={onLongPress}
+        chevron={false}
+        Component={TouchableOpacity}
+        rightTitle={rowTitle()}
+        rightTitleStyle={rowTitleStyle()}
+      />
+    </View>
   );
 });
 

diff --git a/screen/wallets/transactions.js b/screen/wallets/transactions.js
@@ -130,9 +130,6 @@ const styles = StyleSheet.create({
     fontSize: 18,
     marginHorizontal: 8,
   },
-  item: {
-    marginHorizontal: 4,
-  },
   list: {
     backgroundColor: '#FFFFFF',
     flex: 1,
@@ -213,13 +210,18 @@ export default class WalletTransactions extends Component {
     EV(EV.enum.REMOTE_TRANSACTIONS_COUNT_CHANGED, this.refreshTransactionsFunction.bind(this), true);
     const wallet = props.route.params.wallet;
     this.props.navigation.setParams({ wallet: wallet, isLoading: true });
+    this.interval = setInterval(() => {
+      this.setState(prev => ({ timeElapsed: prev.timeElapsed + 1 }));
+    }, 60000);
     this.state = {
       isHandOffUseEnabled: false,
       isLoading: true,
       isManageFundsModalVisible: false,
       showShowFlatListRefreshControl: false,
       wallet: wallet,
+      itemPriceUnit: wallet.getPreferredBalanceUnit(),
       dataSource: this.getTransactions(15),
+      timeElapsed: 0, // this is to force a re-render for FlatList items.
       limit: 15,
       pageSize: 20,
     };
@@ -537,6 +539,7 @@ export default class WalletTransactions extends Component {
   };
 
   componentWillUnmount() {
+    clearInterval(this.interval);
     this._unsubscribeFocus();
   }
 
@@ -549,13 +552,9 @@ export default class WalletTransactions extends Component {
     });
   };
 
-  renderItem = item => {
-    return (
-      <View style={styles.item}>
-        <BlueTransactionListItem item={item.item} itemPriceUnit={this.state.wallet.getPreferredBalanceUnit()} />
-      </View>
-    );
-  };
+  renderItem = item => (
+    <BlueTransactionListItem item={item.item} itemPriceUnit={this.state.itemPriceUnit} timeElapsed={this.state.timeElapsed} />
+  );
 
   onBarCodeRead = ret => {
     if (!this.state.isLoading) {
@@ -739,6 +738,7 @@ export default class WalletTransactions extends Component {
               <RefreshControl onRefresh={() => this.refreshTransactions()} refreshing={this.state.showShowFlatListRefreshControl} />
             }
             data={this.state.dataSource}
+            extraData={this.state.timeElapsed}
             keyExtractor={this._keyExtractor}
             renderItem={this.renderItem}
             contentInset={{ top: 0, left: 0, bottom: 90, right: 0 }}