From fe1c655aac31e3cff8fb1103fce49d7541e3b707 Mon Sep 17 00:00:00 2001 From: Danilo Prates Date: Fri, 16 Oct 2020 19:01:24 -0300 Subject: [PATCH] [DDW-385] Progress - header --- .../wallet/transactions/TransactionsHeader.js | 127 ------------------ .../wallet/transactions/WalletTransactions.js | 14 +- .../transactions/WalletTransactionsHeader.js | 102 ++++++++++++++ .../WalletTransactionsHeader.scss | 8 ++ .../wallet/WalletTransactionsPage.js | 8 +- source/renderer/app/i18n/locales/en-US.json | 1 + source/renderer/app/i18n/locales/ja-JP.json | 1 + 7 files changed, 131 insertions(+), 130 deletions(-) delete mode 100644 source/renderer/app/components/wallet/transactions/TransactionsHeader.js create mode 100644 source/renderer/app/components/wallet/transactions/WalletTransactionsHeader.js create mode 100644 source/renderer/app/components/wallet/transactions/WalletTransactionsHeader.scss diff --git a/source/renderer/app/components/wallet/transactions/TransactionsHeader.js b/source/renderer/app/components/wallet/transactions/TransactionsHeader.js deleted file mode 100644 index 2bcb5639ae..0000000000 --- a/source/renderer/app/components/wallet/transactions/TransactionsHeader.js +++ /dev/null @@ -1,127 +0,0 @@ -// @flow -import React, { Component } from 'react'; -import { observer, inject } from 'mobx-react'; -import { defineMessages, intlShape } from 'react-intl'; -// import VerticalFlexContainer from '../../components/layout/VerticalFlexContainer'; -import FilterDialogContainer from '../dialogs/FilterDialogContainer'; -// /Users/danilo/iohk/daedalus/source/renderer/app/containers/wallet/dialogs/FilterDialogContainer.js -// /Users/danilo/iohk/daedalus/source/renderer/app/components/wallet/transactions/TransactionsHeader.js -import FilterDialog from './FilterDialog'; -import FilterButton from '../../components/wallet/transactions/FilterButton'; -import FilterResultInfo from '../../components/wallet/transactions/FilterResultInfo'; -import TinyButton from '../../components/widgets/forms/TinyButton'; -import type { InjectedProps } from '../../types/injectedPropsType'; -import { formattedWalletAmount } from '../../utils/formatters'; -import { getNumberOfFilterDimensionsApplied } from '../../utils/transaction'; -import type { TransactionFilterOptionsType } from '../../stores/TransactionsStore'; -import { getNetworkExplorerUrlByType } from '../../utils/network'; - -export const messages = defineMessages({ - noTransactions: { - id: 'wallet.transactions.no.transactions', - defaultMessage: '!!!No transactions', - description: 'Message shown when wallet has no transactions yet.', - }, -}); - -type Props = {}; -type State = { - isFilterButtonFaded: boolean, -}; - -@observer -export default class TransactionsHeader extends Component { - static contextTypes = { - intl: intlShape.isRequired, - }; - - state = { - isFilterButtonFaded: false, - }; - - componentDidMount() { - const { dialogs } = this.props.actions; - dialogs.closeActiveDialog.trigger(); - } - - openFilterDialog = () => { - const { dialogs } = this.props.actions; - const { - defaultFilterOptions, - populatedFilterOptions, - } = this.props.stores.transactions; - const { currentNumberFormat: numberFormat } = this.props.stores.profile; - - this.setState({ isFilterButtonFaded: false }); - dialogs.open.trigger({ dialog: FilterDialog }); - dialogs.updateDataForActiveDialog.trigger({ - data: { - defaultFilterOptions, - populatedFilterOptions, - numberFormat, - }, - }); - }; - - onFilter = (filterProps: TransactionFilterOptionsType) => { - const { - transactions: transactionActions, - dialogs: dialogActions, - } = this.props.actions; - transactionActions.filterTransactions.trigger(filterProps); - dialogActions.closeActiveDialog.trigger(); - }; - - setFilterButtonFaded = (isFilterButtonFaded: boolean) => - this.setState({ isFilterButtonFaded }); - - render() { - const { intl } = this.context; - const { actions, stores } = this.props; - const { isFilterButtonFaded } = this.state; - const { app, uiDialogs, wallets, profile } = stores; - const { - openExternalLink, - environment: { network, rawNetwork }, - } = app; - const activeWallet = wallets.active; - const { - filterOptions, - searchRequest, - hasAny, - totalAvailable, - allFiltered, - recentFiltered, - deletePendingTransaction, - deleteTransactionRequest, - } = stores.transactions; - const { currentTimeFormat, currentDateFormat, currentLocale } = profile; - - // Guard against potential null values - if (!filterOptions || !activeWallet) return null; - - let walletTransactions = null; - const { searchLimit } = filterOptions; - const numberOfFilterDimensionsApplied = getNumberOfFilterDimensionsApplied( - filterOptions - ); - const noTransactionsLabel = intl.formatMessage(messages.noTransactions); - const hasMoreToLoad = () => - searchLimit !== null && - searchLimit !== undefined && - totalAvailable > searchLimit; - - return ( -
- - {hasAny && ( - - )} -
- ); - } -} diff --git a/source/renderer/app/components/wallet/transactions/WalletTransactions.js b/source/renderer/app/components/wallet/transactions/WalletTransactions.js index d82bebbd60..159902bce0 100644 --- a/source/renderer/app/components/wallet/transactions/WalletTransactions.js +++ b/source/renderer/app/components/wallet/transactions/WalletTransactions.js @@ -5,6 +5,7 @@ import { defineMessages, intlShape } from 'react-intl'; import WalletTransactionsList, { WalletTransactionsListScrollContext, } from './WalletTransactionsList'; +import WalletTransactionsHeader from './WalletTransactionsHeader'; import FilterResultInfo from './FilterResultInfo'; import WalletNoTransactions from './WalletNoTransactions'; import VerticalFlexContainer from '../../layout/VerticalFlexContainer'; @@ -12,6 +13,7 @@ import { formattedWalletAmount } from '../../../utils/formatters'; import { getNumberOfFilterDimensionsApplied } from '../../../utils/transaction'; import { WalletTransaction } from '../../../domains/WalletTransaction'; import Wallet from '../../../domains/Wallet'; +import type { TransactionFilterOptionsType } from '../../../stores/TransactionsStore'; export const messages = defineMessages({ noTransactions: { @@ -25,7 +27,7 @@ type Props = { activeWallet: ?Wallet, transactions: Array, shouldDisplayTransactions: boolean, - filterOptions: any, + filterOptions: TransactionFilterOptionsType, deletePendingTransaction: Function, onLoadMore: Function, hasMoreToLoad: boolean, @@ -34,8 +36,13 @@ type Props = { getUrlByType: Function, isDeletingTransaction: boolean, totalAvailable: number, + currentLocale: string, currentDateFormat: string, - currentTimeFormat: string, + currentNumberFormat: string, + defaultFilterOptions: TransactionFilterOptionsType, + populatedFilterOptions: TransactionFilterOptionsType, + onFilter: Function, + onClose: Function, }; type State = { isFilterButtonFaded: boolean, @@ -72,6 +79,7 @@ export default class WalletTransactions extends Component { totalAvailable, currentDateFormat, currentTimeFormat, + currentLocale, } = this.props; // Guard against potential null values @@ -107,6 +115,7 @@ export default class WalletTransactions extends Component { formattedWalletAmount={formattedWalletAmount} onOpenExternalLink={onOpenExternalLink} getUrlByType={getUrlByType} + currentLocale={currentLocale} currentTimeFormat={currentTimeFormat} currentDateFormat={currentDateFormat} isRenderingAsVirtualList @@ -118,6 +127,7 @@ export default class WalletTransactions extends Component { + {walletTransactions} ); diff --git a/source/renderer/app/components/wallet/transactions/WalletTransactionsHeader.js b/source/renderer/app/components/wallet/transactions/WalletTransactionsHeader.js new file mode 100644 index 0000000000..e4251b4102 --- /dev/null +++ b/source/renderer/app/components/wallet/transactions/WalletTransactionsHeader.js @@ -0,0 +1,102 @@ +// @flow +import React, { Component } from 'react'; +import { observer, inject } from 'mobx-react'; +import { defineMessages, intlShape } from 'react-intl'; +import FilterDialog from './FilterDialog'; +import FilterButton from './FilterButton'; +import FilterResultInfo from './FilterResultInfo'; +import styles from './WalletTransactionsHeader.scss'; +// import TinyButton from '../widgets/forms/TinyButton'; +import type { TransactionFilterOptionsType } from '../../../stores/TransactionsStore'; + +export const messages = defineMessages({ + transactions: { + id: 'wallet.transactions.header.transactions', + defaultMessage: '!!!Transactions', + description: 'Label for the "Transactions" header.', + }, +}); + +type Props = { + transactions: Array, + filterOptions: TransactionFilterOptionsType, + currentLocale: string, + currentDateFormat: string, + currentNumberFormat: string, + defaultFilterOptions: TransactionFilterOptionsType, + populatedFilterOptions: TransactionFilterOptionsType, + onFilter: Function, + onClose: Function, +}; + +type State = { + isFilterButtonFaded: boolean, +}; + +@observer +export default class WalletTransactionsHeader extends Component { + static contextTypes = { + intl: intlShape.isRequired, + }; + + state = { + isFilterButtonFaded: false, + }; + + setFilterButtonFaded = (isFilterButtonFaded: boolean) => + this.setState({ isFilterButtonFaded }); + + render() { + const { intl } = this.context; + const { isFilterButtonFaded } = this.state; + const { transactions, filterOptions } = this.props; + console.log('filterOptions', filterOptions); + + return ( +
+
+ {intl.formatMessage(messages.transactions)} ({transactions.length}) +
+
+ ); + + // const { + // filterOptions, + // searchRequest, + // hasAny, + // totalAvailable, + // allFiltered, + // recentFiltered, + // deletePendingTransaction, + // deleteTransactionRequest, + // } = stores.transactions; + // const { currentTimeFormat, currentDateFormat, currentLocale } = profile; + + // // Guard against potential null values + // if (!filterOptions || !activeWallet) return null; + + // let walletTransactions = null; + // const { searchLimit } = filterOptions; + // const numberOfFilterDimensionsApplied = getNumberOfFilterDimensionsApplied( + // filterOptions + // ); + // const noTransactionsLabel = intl.formatMessage(messages.noTransactions); + // const hasMoreToLoad = () => + // searchLimit !== null && + // searchLimit !== undefined && + // totalAvailable > searchLimit; + + // return ( + //
+ // + // {hasAny && ( + // + // )} + //
+ // ); + } +} diff --git a/source/renderer/app/components/wallet/transactions/WalletTransactionsHeader.scss b/source/renderer/app/components/wallet/transactions/WalletTransactionsHeader.scss new file mode 100644 index 0000000000..be9bdeb439 --- /dev/null +++ b/source/renderer/app/components/wallet/transactions/WalletTransactionsHeader.scss @@ -0,0 +1,8 @@ +.component { + height: 53px; + padding: 0 40px; +} +.numberOfTransactions { + // background: red; + color: orange; +} diff --git a/source/renderer/app/containers/wallet/WalletTransactionsPage.js b/source/renderer/app/containers/wallet/WalletTransactionsPage.js index 0af46576c3..8e54b95378 100755 --- a/source/renderer/app/containers/wallet/WalletTransactionsPage.js +++ b/source/renderer/app/containers/wallet/WalletTransactionsPage.js @@ -87,6 +87,8 @@ export default class WalletTransactionsPage extends Component { deleteTransactionRequest, } = stores.transactions; const { currentTimeFormat, currentDateFormat, currentLocale } = profile; + const { dataForActiveDialog } = stores.uiDialogs; + const { closeActiveDialog } = actions.dialogs; const { searchLimit = 0 } = filterOptions; let transactions = []; @@ -128,9 +130,13 @@ export default class WalletTransactionsPage extends Component { isDeletingTransaction={deleteTransactionRequest.isExecuting} onOpenExternalLink={openExternalLink} getUrlByType={getUrlByType} + totalAvailable={totalAvailable} + currentLocale={currentLocale} currentTimeFormat={currentTimeFormat} currentDateFormat={currentDateFormat} - totalAvailable={totalAvailable} + onFilter={this.onFilter} + onClose={() => closeActiveDialog.trigger()} + {...dataForActiveDialog} isRenderingAsVirtualList /> ); diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json index 4a71d1d88b..782543ad83 100755 --- a/source/renderer/app/i18n/locales/en-US.json +++ b/source/renderer/app/i18n/locales/en-US.json @@ -897,6 +897,7 @@ "wallet.transaction.type.exchange": "Exchange", "wallet.transaction.unresolvedInputAddressesAdditionalLabel": "to see these addresses.", "wallet.transaction.unresolvedInputAddressesLinkLabel": "Open this transaction in Cardano explorer", + "wallet.transactions.header.transactions": "Transactions", "wallet.transactions.no.transactions": "No transactions", "wallet.transferFunds.dialog1.continueLabel": "Continue", "wallet.transferFunds.dialog1.sourceWallet": "From Byron legacy wallet", diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json index c1fc8a87dc..c43256edd1 100755 --- a/source/renderer/app/i18n/locales/ja-JP.json +++ b/source/renderer/app/i18n/locales/ja-JP.json @@ -897,6 +897,7 @@ "wallet.transaction.type.exchange": "換金", "wallet.transaction.unresolvedInputAddressesAdditionalLabel": "アドレスを表示する。", "wallet.transaction.unresolvedInputAddressesLinkLabel": "Cardanoエクスプローラーでこのトランザクションを開き", + "wallet.transactions.header.transactions": "トランザクション", "wallet.transactions.no.transactions": "トランザクションはありません", "wallet.transferFunds.dialog1.continueLabel": "続ける", "wallet.transferFunds.dialog1.sourceWallet": "送金元Byronレガシーウォレット",