Enhanc search result
This commit is contained in:
jo
parent
2ce8a48c77
commit
3eeb85f3d1
|
|
@ -29,7 +29,7 @@ export class Navbar extends Component<any, State> {
|
|||
|
||||
navbar() {
|
||||
return (
|
||||
<nav class="navbar navbar-dark navbar-purple py-1">
|
||||
<nav class="navbar navbar-dark navbar-purple py-1 mb-3">
|
||||
<a class="navbar-brand mx-1" href="#">
|
||||
<i class="fas fa-fw fa-database mr-1"></i>
|
||||
Torrents.csv
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ export class Search extends Component<any, State> {
|
|||
|
||||
fetchData(searchParams: SearchParams): Promise<Results> {
|
||||
let q = encodeURI(searchParams.q);
|
||||
// Ability to have more rows per page ?
|
||||
return fetch(`${endpoint}/service/search?q=${q}&page=${searchParams.page}`)
|
||||
.then(data => data.text())
|
||||
.then(csv => convertCsvToJson(csv));
|
||||
|
|
@ -75,52 +76,58 @@ export class Search extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className={this.state.results.torrents[0] ? "container-fluid" : "container"}>
|
||||
<div class="row mt-2">
|
||||
<div class="col-12">
|
||||
{
|
||||
this.state.searching ?
|
||||
this.spinner()
|
||||
:
|
||||
this.state.results.torrents[0] ? this.table() : this.noResults()
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container-fluid">
|
||||
{
|
||||
this.state.searching ?
|
||||
this.spinner()
|
||||
:
|
||||
this.state.results.torrents[0] ? this.table() : this.noResults()
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
spinner() {
|
||||
return (
|
||||
<div class="text-center m-5 p-5">
|
||||
<i class="fas fa-spinner fa-spin fa-5x"></i>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
noResults() {
|
||||
return (
|
||||
<h1>No Results</h1>
|
||||
<div class="text-center m-5 p-5">
|
||||
<h1>No Results</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
table() {
|
||||
return (
|
||||
<div>
|
||||
<table class="table table-fixed table-hover table-sm table-striped">
|
||||
<table class="table table-fixed table-sm table-hover border">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="search-name-col">Name</th>
|
||||
<th class="text-right">Size</th>
|
||||
<th class="text-right">Seeds</th>
|
||||
<th class="text-right d-none d-md-table-cell">Leeches</th>
|
||||
<th class="text-right d-none d-md-table-cell">Created</th>
|
||||
<th class="align-middle search-name-col">Name</th>
|
||||
<th class="align-middle text-right">Size</th>
|
||||
<th class="align-middle text-right">Seeds</th>
|
||||
<th class="align-middle text-right d-none d-md-table-cell">Leeches</th>
|
||||
<th class="align-middle text-right d-none d-md-table-cell">Created</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.state.results.torrents.map(torrent => (
|
||||
<tr>
|
||||
<td class="search-name-cell">{torrent.name}</td>
|
||||
<td class="text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</td>
|
||||
<td class="text-right text-success"><div><i class="fas fa-fw fa-arrow-up"></i>{torrent.seeders}</div></td>
|
||||
<td class="text-right text-danger d-none d-md-table-cell"><i class="fas fa-fw fa-arrow-down"></i>{torrent.leechers}</td>
|
||||
<td class="text-right text-muted d-none d-md-table-cell" data-balloon={`Scraped ${moment(torrent.scraped_date * 1000).fromNow()}`} data-balloon-pos="down">
|
||||
{moment(torrent.created_unix * 1000).fromNow()}
|
||||
<tr class="clickable-row">
|
||||
<td class="align-middle search-name-cell"><pre class="mx-1 my-0 text-truncate">{torrent.name}</pre></td>
|
||||
<td class="align-middle text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</td>
|
||||
<td class="align-middle text-right text-success"><div><i class="fas fa-fw fa-arrow-up"></i>{torrent.seeders}</div></td>
|
||||
<td class="align-middle text-right text-danger d-none d-md-table-cell"><i class="fas fa-fw fa-arrow-down"></i>{torrent.leechers}</td>
|
||||
<td class="align-middle text-right text-muted d-none d-md-table-cell"
|
||||
data-balloon={`Scraped ${moment(torrent.scraped_date * 1000).fromNow()}`}
|
||||
data-balloon-pos="down">
|
||||
{moment(torrent.created_unix * 1000).fromNow()}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<a data-balloon="Magnet link" data-balloon-pos="left" class="btn btn-sm" href={magnetLink(torrent.infohash, torrent.name)}>
|
||||
|
|
@ -139,29 +146,21 @@ export class Search extends Component<any, State> {
|
|||
);
|
||||
}
|
||||
|
||||
spinner() {
|
||||
return (
|
||||
<div class="text-center">
|
||||
<i class="fas fa-spinner fa-spin fa-5x"></i>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
paginator() {
|
||||
return (
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<ul class="pagination justify-content-center">
|
||||
<li className={(this.state.searchParams.page == 1) ? "page-item disabled" : "page-item"}>
|
||||
<button class="page-link"
|
||||
onClick={linkEvent({ i: this, nextPage: false }, this.switchPage)}
|
||||
>
|
||||
Previous</button>
|
||||
<button class="page-link rounded-0"
|
||||
onClick={linkEvent({ i: this, nextPage: false }, this.switchPage)}>
|
||||
Previous
|
||||
</button>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<button class="page-link"
|
||||
<button class="page-link rounded-0"
|
||||
onClick={linkEvent({ i: this, nextPage: true }, this.switchPage)}>
|
||||
Next
|
||||
</button>
|
||||
Next
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -169,10 +168,8 @@ export class Search extends Component<any, State> {
|
|||
}
|
||||
|
||||
switchPage(a: { i: Search, nextPage: boolean }, event) {
|
||||
|
||||
let newSearch = a.i.state.searchParams;
|
||||
newSearch.page += (a.nextPage) ? 1 : -1;
|
||||
a.i.props.history.push(`/search/${newSearch.q}/${newSearch.page}`);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue