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

83 lines
2.4 KiB
React
Raw Normal View History

2017-06-06 23:19:12 +02:00
import React from "react";
import TransactionListItem from "./internal/TransactionListItem";
import FormField from "component/formField";
class TransactionList extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
filter: null,
};
}
handleFilterChanged(event) {
this.setState({
filter: event.target.value,
});
}
filterTransaction(transaction) {
const { filter } = this.state;
return !filter || filter == transaction.type;
}
render() {
const { emptyMessage, rewards, transactions } = this.props;
let transactionList = transactions.filter(
this.filterTransaction.bind(this)
);
return (
<div>
{(transactionList.length || this.state.filter) &&
<span className="sort-section">
{__("Filter")} {" "}
<FormField
type="select"
onChange={this.handleFilterChanged.bind(this)}
>
<option value="">{__("All")}</option>
<option value="spend">{__("Spends")}</option>
<option value="receive">{__("Receives")}</option>
<option value="publish">{__("Publishes")}</option>
<option value="channel">{__("Channels")}</option>
<option value="tip">{__("Tips")}</option>
<option value="support">{__("Supports")}</option>
<option value="update">{__("Updates")}</option>
</FormField>
</span>}
{!transactionList.length &&
<div className="empty">
{emptyMessage || __("No transactions to list.")}
</div>}
{Boolean(transactionList.length) &&
<table className="table-standard table-transactions table-stretch">
<thead>
<tr>
<th>{__("Date")}</th>
<th>{__("Amount (Fee)")}</th>
<th>{__("Type")} </th>
<th>{__("Details")} </th>
<th>{__("Transaction")}</th>
</tr>
</thead>
<tbody>
{transactionList.map(t =>
<TransactionListItem
key={`${t.txid}:${t.nout}`}
transaction={t}
reward={rewards && rewards[t.txid]}
/>
)}
</tbody>
</table>}
2017-08-20 23:42:00 +02:00
</div>
2017-06-06 23:19:12 +02:00
);
}
}
2017-06-06 06:21:55 +02:00
export default TransactionList;