[wallet/mobile] task: cleanup History screen and transaction store mo…

…dule

src/components/organisms/AggregateTransactionDetails.js

@@ -141,7 +141,7 @@ class AggregateTransactionDetails extends Component {
             })
             .catch(error => {
                 Router.showMessage({
-                    message: error.message,
+                    message: `${translate('t_notranslate.loadTransactionDetails')}.\n${error.message}`,
                     type: 'danger',
                 });
                 onError(error);

src/screens/History.js

@@ -14,6 +14,7 @@ import {
 } from '@src/components';
 import { connect } from 'react-redux';
 import MultisigFilter from '@src/components/molecules/MultisigFilter';
+import { Router } from '@src/Router';
 import store from '@src/store';
 import translate from '@src/locales/i18n';
 import { TransactionType } from 'symbol-sdk';
@@ -37,18 +38,18 @@ const styles = StyleSheet.create({
 
 class History extends Component {
     state = {
-        showingDetails: -1,
+        selectedTransactionIndex: -1,
     };
 
     showDetails = index => {
-        const { showingDetails } = this.state;
-        if (showingDetails === index) {
+        const { selectedTransactionIndex } = this.state;
+        if (selectedTransactionIndex === index) {
             this.setState({
-                showingDetails: -1,
+                selectedTransactionIndex: -1,
             });
         } else {
             this.setState({
-                showingDetails: index,
+                selectedTransactionIndex: index,
             });
         }
     };
@@ -78,41 +79,38 @@ class History extends Component {
 
     loadNextPage = () => {
         const { isLastPage } = this.props;
-        if (!isLastPage) {
-            store.dispatchAction({ type: 'transaction/loadNextPage' });
-        }
-    };
 
-    isAggregate = transaction => {
-        return (
-            transaction.transactionType === TransactionType.AGGREGATE_BONDED ||
-            transaction.transactionType === TransactionType.AGGREGATE_COMPLETE
-        );
-    };
+        if (isLastPage) {
+            return;
+        }
 
-    renderTransactionItem = showingDetailsIndex => ({ item, index }) => {
-        return (
-            <ListItem onPress={() => this.showDetails(index)}>
-                <TransactionItem
-                    transaction={item}
-                    showDetails={showingDetailsIndex === index && !this.isAggregate(item)}
-                    componentId={this.props.componentId}
-                />
-            </ListItem>
-        );
+        try {
+            store.dispatchAction({ type: 'transaction/loadNextPage' });
+        } catch (error) {
+            Router.showMessage({
+                message: `${translate('t_notranslate.loadTransactionList')}.\n${error.message}`,
+                type: 'danger',
+            });
+        }
     };
 
     render() {
-        const { cosignatoryOf, onOpenMenu, onOpenSettings, transactions, loading, addressFilter, filter, isNextLoading } = this.props;
-        const { showingDetails } = this.state;
-        const isLoading = isNextLoading || loading;
+        const { cosignatoryOf, onOpenMenu, onOpenSettings, transactions, isLoading, addressFilter, filter } = this.props;
+        const { selectedTransactionIndex } = this.state;
         const allFilters = [
             { value: 'ALL', label: translate('history.all') },
             { value: 'SENT', label: translate('history.sent') },
             { value: 'RECEIVED', label: translate('history.received') },
             { value: 'BLOCKED', label: translate('history.blocked') },
         ];
-        const currentTransaction = transactions[showingDetails];
+        const selectedTransaction = transactions[selectedTransactionIndex];
+
+        const isAggregate = transaction => {
+            return (
+                transaction.transactionType === TransactionType.AGGREGATE_BONDED ||
+                transaction.transactionType === TransactionType.AGGREGATE_COMPLETE
+            );
+        };
 
         return (
             <GradientBackground
@@ -152,24 +150,26 @@ class History extends Component {
                 <ListContainer style={styles.list} isScrollable={false} isLoading={isLoading}>
                     <FlatList
                         data={transactions}
-                        renderItem={this.renderTransactionItem(showingDetails)}
                         onEndReachedThreshold={0.9}
                         onEndReached={this.loadNextPage}
                         keyExtractor={(item, index) => '' + index + 'history'}
                         ListEmptyComponent={EmptyListMessage(!isLoading)}
                         contentContainerStyle={{ flexGrow: 1 }}
-                        refreshControl={
-                            <RefreshControl
-                                //refresh control used for the Pull to Refresh
-                                refreshing={false}
-                                onRefresh={this.onRefresh}
-                            />
-                        }
+                        renderItem={({ item, index }) => (
+                            <ListItem onPress={() => this.showDetails(index)}>
+                                <TransactionItem
+                                    transaction={item}
+                                    showDetails={selectedTransactionIndex === index && !isAggregate(item)}
+                                    componentId={this.props.componentId}
+                                />
+                            </ListItem>
+                        )}
+                        refreshControl={<RefreshControl refreshing={false} onRefresh={this.onRefresh} />}
                     />
                 </ListContainer>
-                {currentTransaction && this.isAggregate(currentTransaction) && (
+                {selectedTransaction && isAggregate(selectedTransaction) && (
                     <AggregateTransactionDetails
-                        transaction={currentTransaction}
+                        transaction={selectedTransaction}
                         onClose={() => this.showDetails(-1)}
                         onError={this.onRefresh}
                         {...this.props}
@@ -187,6 +187,5 @@ export default connect(state => ({
     isLastPage: state.transaction.isLastPage,
     addressFilter: state.transaction.addressFilter,
     filter: state.transaction.filter,
-    loading: state.transaction.loading,
-    isNextLoading: state.transaction.isNextLoading,
+    isLoading: state.transaction.isLoading,
 }))(History);

src/store/transaction.js

@@ -1,32 +1,20 @@
 import FetchTransactionService from '@src/services/FetchTransactionService';
 import { transactionAwaitingSignatureByAccount } from '@src/utils/transaction';
 
-export type Filter = 'SENT' | 'RECEIVED' | 'ALL' | 'BLOCKED';
-
 export default {
     namespace: 'transaction',
     state: {
-        loading: false,
-        isNextLoading: false,
-        subscription: null,
+        isLoading: false,
         addressFilter: '',
         filter: 'ALL',
         transactions: [],
-        page: 0,
+        pageNumber: 0,
         isLastPage: false,
         pendingSignature: false,
     },
     mutations: {
         setLoading(state, payload) {
-            state.transaction.loading = payload;
-            return state;
-        },
-        setLoadingNext(state, payload) {
-            state.transaction.isNextLoading = payload;
-            return state;
-        },
-        setSubscription(state, payload) {
-            state.transaction.subscription = payload;
+            state.transaction.isLoading = payload;
             return state;
         },
         setAddressFilter(state, payload) {
@@ -45,8 +33,8 @@ export default {
             state.transaction.transactions.push(...payload);
             return state;
         },
-        setPage(state, payload) {
-            state.transaction.page = payload;
+        setPageNumber(state, payload) {
+            state.transaction.pageNumber = payload;
             return state;
         },
         setIsLastPage(state, payload) {
@@ -59,72 +47,59 @@ export default {
         },
     },
     actions: {
-        init: async ({ commit, state, dispatchAction }) => {
-            commit({
-                type: 'transaction/setAddressFilter',
-                payload: state.account.selectedAccountAddress,
-            });
+        init: async ({ dispatchAction }) => {
             await dispatchAction({ type: 'transaction/reset' });
             try {
                 await dispatchAction({ type: 'transaction/loadNextPage' });
-                await dispatchAction({
-                    type: 'transaction/checkPendingSignatures',
-                });
+                await dispatchAction({ type: 'transaction/checkPendingSignatures' });
             } catch (e) {
                 await dispatchAction({ type: 'transaction/reset' });
             }
         },
-        reset: async ({ commit }) => {
-            commit({ type: 'transaction/setPage', payload: 0 });
+        reset: async ({ commit, state }) => {
+            const { selectedAccountAddress } = state.account;
+            commit({ type: 'transaction/setAddressFilter', payload: selectedAccountAddress });
+            commit({ type: 'transaction/setPageNumber', payload: 0 });
             commit({ type: 'transaction/setLoading', payload: false });
             commit({ type: 'transaction/setIsLastPage', payload: false });
             commit({ type: 'transaction/setTransactions', payload: [] });
         },
         loadNextPage: async ({ commit, dispatchAction, state }) => {
-            if (state.transaction.loading) return;
+            const { addressFilter, filter, isLoading, pageNumber } = state.transaction;
+            const { cosignatoryOf, multisigGraphInfo } = state.account;
+            const { selectedNetwork } = state.network;
+            const nextPage = pageNumber + 1;
+
+            if (isLoading) return;
+
             commit({ type: 'transaction/setLoading', payload: true });
-            setTimeout(() => {
-                commit({ type: 'transaction/setLoadingNext', payload: true });
-            });
 
-            if ((!state.account.cosignatoryOf || !state.account.cosignatoryOf.length) && !!state.account.multisigGraphInfo) {
+            if ((!cosignatoryOf || !cosignatoryOf.length) && !!multisigGraphInfo) {
                 await dispatchAction({ type: 'account/loadCosignatoryOf' });
             }
 
-            const nextPage = state.transaction.page + 1;
             try {
                 const transactions = await FetchTransactionService.getTransactionsFromAddress(
-                    state.transaction.addressFilter,
+                    addressFilter,
                     nextPage,
-                    state.transaction.filter,
-                    state.network.selectedNetwork,
-                    state.account.cosignatoryOf
+                    filter,
+                    selectedNetwork,
+                    cosignatoryOf
                 );
 
                 if (transactions.length === 0) {
-                    commit({
-                        type: 'transaction/setIsLastPage',
-                        payload: true,
-                    });
+                    commit({ type: 'transaction/setIsLastPage', payload: true });
                 } else {
                     dispatchAction({
                         type: 'transaction/addTransactions',
                         payload: transactions,
                     });
                 }
-                commit({ type: 'transaction/setPage', payload: nextPage });
+                commit({ type: 'transaction/setPageNumber', payload: nextPage });
                 commit({ type: 'transaction/setLoading', payload: false });
-                commit({
-                    type: 'transaction/setLoadingNext',
-                    payload: false,
-                });
             } catch (error) {
-                console.log(error);
-                commit({
-                    type: 'transaction/setLoadingNext',
-                    payload: false,
-                });
                 commit({ type: 'transaction/setLoading', payload: false });
+                throw error;
             }
         },
         addTransactions: async ({ commit, state }, transactions) => {
@@ -143,26 +118,16 @@ export default {
                 return filter === 'BLOCKED' ? isBlackListed : !isBlackListed;
             });
 
-            commit({
-                type: 'transaction/addTransactions',
-                payload: filteredTransactions,
-            });
+            commit({ type: 'transaction/addTransactions', payload: filteredTransactions });
         },
-        changeFilters: async ({ commit, state, dispatchAction }, { addressFilter, filter }) => {
-            if (state.transaction.subscription) {
-                state.transaction.subscription.unsubscribe();
-            }
+        changeFilters: async ({ commit, dispatchAction }, { addressFilter, filter }) => {
             dispatchAction({ type: 'transaction/reset' });
-            if (addressFilter)
-                commit({
-                    type: 'transaction/setAddressFilter',
-                    payload: addressFilter,
-                });
-            if (filter)
-                commit({
-                    type: 'transaction/setDirectionFilter',
-                    payload: filter,
-                });
+            if (addressFilter) {
+                commit({ type: 'transaction/setAddressFilter', payload: addressFilter });
+            }
+            if (filter) {
+                commit({ type: 'transaction/setDirectionFilter', payload: filter });
+            }
             dispatchAction({ type: 'transaction/loadNextPage' });
         },
         checkPendingSignatures: async ({ commit, state }) => {
@@ -180,15 +145,15 @@ export default {
                     selectedNetwork,
                     cosignatoryOf
                 );
-                const transactionAwaitingSignature =
+                const isTransactionAwaitingSignature =
                     !isMultisig &&
                     transactions.some(
                         transaction =>
                             !addressBook.getContactByAddress(transaction.signerAddress)?.isBlackListed &&
                             transactionAwaitingSignatureByAccount(transaction, selectedAccount, cosignatoryOf)
                     );
 
-                commit({ type: 'transaction/setPendingSignature', payload: transactionAwaitingSignature });
+                commit({ type: 'transaction/setPendingSignature', payload: isTransactionAwaitingSignature });
             } catch (e) {
                 console.log('Failed to checkPendingSignatures', e);
             }