lbry-desktop/ui/js/component/transactionList/view.jsx
2017-11-02 01:53:30 +05:30

96 lines
2.8 KiB
JavaScript

import React from "react";
import TransactionListItem from "./internal/TransactionListItem";
import FormField from "component/formField";
import * as modals from "constants/modal_types";
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;
}
isRevokeable(txid, nout) {
// a claim/support/update is revokable if it
// is in my claim list(claim_list_mine)
return this.props.myClaims.has(`${txid}:${nout}`);
}
revokeClaim(txid, nout) {
this.props.openModal(modals.CONFIRM_CLAIM_REVOKE, { txid, nout });
}
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]}
isRevokeable={this.isRevokeable(t.txid, t.nout)}
revokeClaim={this.revokeClaim.bind(this)}
/>
)}
</tbody>
</table>}
</div>
);
}
}
export default TransactionList;