lbry-desktop/ui/component/transactionList/view.jsx

115 lines
3.6 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import * as icons from 'constants/icons';
2019-09-23 04:47:07 +02:00
import React from 'react';
2019-07-23 10:05:51 +02:00
import { FormField } from 'component/common/form';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
import FileExporter from 'component/common/file-exporter';
2019-09-25 20:12:02 +02:00
import { TRANSACTIONS, TX_LIST } from 'lbry-redux';
import * as PAGES from 'constants/pages';
2019-09-23 04:47:07 +02:00
import TransactionListTable from 'component/transactionListTable';
2019-06-17 22:32:38 +02:00
import RefreshTransactionButton from 'component/transactionRefreshButton';
2019-09-23 04:47:07 +02:00
import Paginate from 'component/common/paginate';
2018-03-26 23:32:43 +02:00
type Props = {
emptyMessage: ?string,
2019-06-17 22:32:38 +02:00
filterSetting: string,
loading: boolean,
myClaims: any,
2018-10-18 19:56:10 +02:00
setTransactionFilter: string => void,
2019-06-17 22:32:38 +02:00
slim?: boolean,
title: string,
2020-02-14 18:44:51 +01:00
allTransactions: Array<Transaction>,
2019-06-17 22:32:38 +02:00
transactions: Array<Transaction>,
2019-09-23 04:47:07 +02:00
transactionCount?: number,
history: { replace: string => void },
2018-03-26 23:32:43 +02:00
};
2019-09-23 04:47:07 +02:00
function TransactionList(props: Props) {
2020-02-14 18:44:51 +01:00
const {
emptyMessage,
slim,
filterSetting,
title,
transactions,
loading,
history,
transactionCount,
allTransactions,
} = props;
2019-09-23 04:47:07 +02:00
// Flow offers little support for Object.values() typing.
// https://github.com/facebook/flow/issues/2221
// $FlowFixMe
const transactionTypes: Array<string> = Object.values(TRANSACTIONS);
2019-09-23 04:47:07 +02:00
function capitalize(string: string) {
2018-07-17 19:17:11 +02:00
return string.charAt(0).toUpperCase() + string.slice(1);
}
2019-09-23 04:47:07 +02:00
function handleFilterChanged(event: SyntheticInputEvent<*>) {
props.setTransactionFilter(event.target.value);
2019-09-25 20:12:02 +02:00
history.replace(`/$/${PAGES.TRANSACTIONS}`); //
2017-10-24 15:10:27 +02:00
}
2019-09-23 04:47:07 +02:00
return (
<React.Fragment>
<header className="table__header">
2019-11-22 22:13:00 +01:00
<div className="table__header-text--between">
<h2 className="card__title">{title}</h2>
2019-09-23 04:47:07 +02:00
<div className="card__actions--inline">
2019-11-01 18:27:01 +01:00
<RefreshTransactionButton slim={slim} />
2019-10-23 20:59:33 +02:00
{/* @if TARGET='app' */}
{!slim && (
<FileExporter
2020-02-14 18:44:51 +01:00
data={allTransactions}
2019-10-23 20:59:33 +02:00
label={__('Export')}
title={__('Export Transactions')}
filters={['nout']}
2020-01-03 22:58:12 +01:00
defaultPath={'lbry-transactions-history'}
2019-10-23 20:59:33 +02:00
disabled={!transactions.length}
/>
)}
{/* @endif */}
{!slim && (
<FormField
type="select"
name="file-sort"
value={filterSetting || TRANSACTIONS.ALL}
onChange={handleFilterChanged}
postfix={
<Button
button="link"
icon={icons.HELP}
href="https://lbry.com/faq/transaction-types"
title={__('Help')}
/>
}
>
{transactionTypes.map(tt => (
<option key={tt} value={tt}>
{__(`${capitalize(tt)}`)}
</option>
))}
</FormField>
)}
2019-09-30 23:48:30 +02:00
{slim && <Button button="primary" navigate={`/$/${PAGES.TRANSACTIONS}`} label={__('Full History')} />}
2019-09-23 04:47:07 +02:00
</div>
2019-11-22 22:13:00 +01:00
</div>
2019-09-23 04:47:07 +02:00
</header>
2019-06-17 22:32:38 +02:00
2019-10-23 20:59:33 +02:00
{((loading && !transactions.length) || !transactions.length) && (
<h2 className="main--empty empty">{loading ? __('Loading') : emptyMessage || __('No transactions.')}</h2>
2019-09-23 04:47:07 +02:00
)}
2019-09-23 04:47:07 +02:00
{!!transactions && !!transactions.length && <TransactionListTable transactionList={transactions} />}
{!slim && !!transactionCount && (
<Paginate
2019-09-25 20:12:02 +02:00
onPageChange={page => history.replace(`/$/${PAGES.TRANSACTIONS}?page=${Number(page)}`)}
totalPages={Math.ceil(transactionCount / TX_LIST.PAGE_SIZE)}
2019-09-23 04:47:07 +02:00
/>
)}
</React.Fragment>
);
}
2017-06-06 06:21:55 +02:00
export default TransactionList;