2017-08-22 21:49:48 +02:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
|
|
|
|
class TorrentTable extends Component {
|
|
|
|
render() {
|
|
|
|
const { torrents } = this.props;
|
|
|
|
return (
|
|
|
|
<table className="table">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>name</th>
|
|
|
|
<th>up</th>
|
|
|
|
<th>down</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
{Object.values(torrents).map(t =>
|
|
|
|
<tr
|
|
|
|
key={t.id}
|
|
|
|
className={`torrent ${"seeding" || t.status}`}
|
|
|
|
style={{
|
2017-08-23 14:27:08 +02:00
|
|
|
backgroundSize: `${t.progress * 100}% 3px`
|
2017-08-22 21:49:48 +02:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
<td>
|
|
|
|
<a href="#">
|
|
|
|
{t.name}
|
|
|
|
</a>
|
|
|
|
</td>
|
|
|
|
<td>{t.rate_up}</td>
|
|
|
|
<td>{t.rate_down}</td>
|
|
|
|
</tr>
|
|
|
|
)}
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default connect(state => ({ torrents: state.torrents }))(TorrentTable);
|