115 lines
3.6 KiB
JavaScript
115 lines
3.6 KiB
JavaScript
// @flow
|
|
import * as icons from 'constants/icons';
|
|
import React from 'react';
|
|
import { FormField } from 'component/common/form';
|
|
import Button from 'component/button';
|
|
import FileExporter from 'component/common/file-exporter';
|
|
import { TRANSACTIONS, TX_LIST } from 'lbry-redux';
|
|
import * as PAGES from 'constants/pages';
|
|
import TransactionListTable from 'component/transactionListTable';
|
|
import RefreshTransactionButton from 'component/transactionRefreshButton';
|
|
import Paginate from 'component/common/paginate';
|
|
|
|
type Props = {
|
|
emptyMessage: ?string,
|
|
filterSetting: string,
|
|
loading: boolean,
|
|
myClaims: any,
|
|
setTransactionFilter: string => void,
|
|
slim?: boolean,
|
|
title: string,
|
|
allTransactions: Array<Transaction>,
|
|
transactions: Array<Transaction>,
|
|
transactionCount?: number,
|
|
history: { replace: string => void },
|
|
};
|
|
|
|
function TransactionList(props: Props) {
|
|
const {
|
|
emptyMessage,
|
|
slim,
|
|
filterSetting,
|
|
title,
|
|
transactions,
|
|
loading,
|
|
history,
|
|
transactionCount,
|
|
allTransactions,
|
|
} = props;
|
|
// Flow offers little support for Object.values() typing.
|
|
// https://github.com/facebook/flow/issues/2221
|
|
// $FlowFixMe
|
|
const transactionTypes: Array<string> = Object.values(TRANSACTIONS);
|
|
|
|
function capitalize(string: string) {
|
|
return string.charAt(0).toUpperCase() + string.slice(1);
|
|
}
|
|
|
|
function handleFilterChanged(event: SyntheticInputEvent<*>) {
|
|
props.setTransactionFilter(event.target.value);
|
|
history.replace(`/$/${PAGES.TRANSACTIONS}`); //
|
|
}
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<header className="table__header">
|
|
<div className="table__header-text--between">
|
|
<h2 className="card__title">{title}</h2>
|
|
<div className="card__actions--inline">
|
|
<RefreshTransactionButton slim={slim} />
|
|
{/* @if TARGET='app' */}
|
|
{!slim && (
|
|
<FileExporter
|
|
data={allTransactions}
|
|
label={__('Export')}
|
|
title={__('Export Transactions')}
|
|
filters={['nout']}
|
|
defaultPath={'lbry-transactions-history'}
|
|
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>
|
|
)}
|
|
{slim && <Button button="primary" navigate={`/$/${PAGES.TRANSACTIONS}`} label={__('Full History')} />}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{((loading && !transactions.length) || !transactions.length) && (
|
|
<h2 className="main--empty empty">{loading ? __('Loading') : emptyMessage || __('No transactions.')}</h2>
|
|
)}
|
|
|
|
{!!transactions && !!transactions.length && <TransactionListTable transactionList={transactions} />}
|
|
{!slim && !!transactionCount && (
|
|
<Paginate
|
|
onPageChange={page => history.replace(`/$/${PAGES.TRANSACTIONS}?page=${Number(page)}`)}
|
|
totalPages={Math.ceil(transactionCount / TX_LIST.PAGE_SIZE)}
|
|
/>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
export default TransactionList;
|