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

74 lines
2.1 KiB
React
Raw Normal View History

2017-06-06 23:19:12 +02:00
import React from "react";
import { Address, BusyMessage, CreditAmount } from "component/common";
2017-06-08 06:42:19 +02:00
class TransactionList extends React.PureComponent {
componentWillMount() {
2017-06-06 23:19:12 +02:00
this.props.fetchTransactions();
}
render() {
2017-06-06 23:19:12 +02:00
const { fetchingTransactions, transactionItems } = this.props;
2017-06-06 23:19:12 +02:00
const rows = [];
if (transactionItems.length > 0) {
2017-06-06 23:19:12 +02:00
transactionItems.forEach(function(item) {
rows.push(
<tr key={item.id}>
2017-06-06 23:19:12 +02:00
<td>{(item.amount > 0 ? "+" : "") + item.amount}</td>
<td>
2017-06-06 23:19:12 +02:00
{item.date
? item.date.toLocaleDateString()
: <span className="empty">{__("(Transaction pending)")}</span>}
</td>
<td>
{item.date
? item.date.toLocaleTimeString()
: <span className="empty">{__("(Transaction pending)")}</span>}
</td>
<td>
<a
className="button-text"
href={"https://explorer.lbry.io/#!/transaction?id=" + item.id}
>
{item.id.substr(0, 7)}
</a>
</td>
</tr>
);
});
}
return (
<section className="card">
<div className="card__title-primary">
<h3>{__("Transaction History")}</h3>
</div>
<div className="card__content">
2017-06-06 23:19:12 +02:00
{fetchingTransactions &&
<BusyMessage message={__("Loading transactions")} />}
{!fetchingTransactions && rows.length === 0
? <div className="empty">{__("You have no transactions.")}</div>
: ""}
{rows.length > 0
? <table className="table-standard table-stretch">
<thead>
<tr>
<th>{__("Amount")}</th>
<th>{__("Date")}</th>
<th>{__("Time")}</th>
<th>{__("Transaction")}</th>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>
2017-06-06 23:19:12 +02:00
: ""}
</div>
</section>
2017-06-06 23:19:12 +02:00
);
}
}
2017-06-06 06:21:55 +02:00
export default TransactionList;