From 61d5c79151acc58fac2d842200cf0154dc0b1bb5 Mon Sep 17 00:00:00 2001 From: Oleg Makarenko Date: Fri, 14 Oct 2022 20:58:13 +0300 Subject: [PATCH] [wallet/mobile] task: cleanup History screen and transaction store module --- .../organisms/AggregateTransactionDetails.js | 2 +- src/screens/History.js | 81 +++++++------ src/store/transaction.js | 107 ++++++------------ 3 files changed, 77 insertions(+), 113 deletions(-) diff --git a/src/components/organisms/AggregateTransactionDetails.js b/src/components/organisms/AggregateTransactionDetails.js index 4b8d374..9761861 100644 --- a/src/components/organisms/AggregateTransactionDetails.js +++ b/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); diff --git a/src/screens/History.js b/src/screens/History.js index 04d3b8c..438aa86 100644 --- a/src/screens/History.js +++ b/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 ( - this.showDetails(index)}> - - - ); + 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 ( '' + index + 'history'} ListEmptyComponent={EmptyListMessage(!isLoading)} contentContainerStyle={{ flexGrow: 1 }} - refreshControl={ - - } + renderItem={({ item, index }) => ( + this.showDetails(index)}> + + + )} + refreshControl={} /> - {currentTransaction && this.isAggregate(currentTransaction) && ( + {selectedTransaction && isAggregate(selectedTransaction) && ( 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); diff --git a/src/store/transaction.js b/src/store/transaction.js index 997dec9..de61659 100644 --- a/src/store/transaction.js +++ b/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,7 +145,7 @@ export default { selectedNetwork, cosignatoryOf ); - const transactionAwaitingSignature = + const isTransactionAwaitingSignature = !isMultisig && transactions.some( transaction => @@ -188,7 +153,7 @@ export default { transactionAwaitingSignatureByAccount(transaction, selectedAccount, cosignatoryOf) ); - commit({ type: 'transaction/setPendingSignature', payload: transactionAwaitingSignature }); + commit({ type: 'transaction/setPendingSignature', payload: isTransactionAwaitingSignature }); } catch (e) { console.log('Failed to checkPendingSignatures', e); }