rob
/
torrents.csv
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

WIP: improve search #1

Closed
rob wants to merge 26 commits from improve-search into master
pull from: improve-search
merge into: rob:master
Conversation 0 Commits 26 Files Changed 6 +45 -33
2 changed files with 45 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2362c4eddf - Show all commits

4
server/ui/src/Main.css
View File

@ -79,6 +79,10 @@ a::-moz-focus-inner {
align-self: center;
}
th .icon {
color: #333333;
}
.spinner {
animation: spin 2s linear infinite;
width: 20vw;

74
server/ui/src/components/search.tsx
View File

@ -1,4 +1,4 @@
import { Component, linkEvent } from 'inferno';
import { Component, render, linkEvent } from 'inferno';
import moment from 'moment';
import { endpoint } from '../env';
@ -11,17 +11,42 @@ interface State {
searching: Boolean;
}
function buildSearchURL({state: { searchParams }}, key) {
let page, direction;
if (key === searchParams.sort_key) {
page = searchParams.page;
direction = searchParams.sort_dir === "Asc" ? "Desc" : "Asc";
} else {
page = 1;
direction = "Desc";
class SortableLink extends Component {
render({ sortKey, state: { searchParams } }) {
return <span>
<a href={this.buildSearchURL(sortKey, searchParams)}>
{sortKey}
{this.renderIcon(sortKey, searchParams)}
</a>
</span>;
}
return `/#/search/${searchParams.type_}/${searchParams.q}/${page}/${key}/${direction}`;
}
buildSearchURL(key, searchParams) {
let page, direction;
if (key === searchParams.sort_key) {
page = searchParams.page;
direction = searchParams.sort_dir === "Asc" ? "Desc" : "Asc";
} else {
page = 1;
direction = "Desc";
}
return `/#/search/${searchParams.type_}/${searchParams.q}/${page}/${key}/${direction}`;
}
renderIcon(sortKey, searchParams) {
console.log("sortKey is", sortKey, "and params is", searchParams);
if (searchParams.sort_key !== sortKey) {
console.log("ret 1");
return "";
}
if (searchParams.sort_dir === "Asc") {
console.log("ret 2");
return <svg class="icon icon-arrow-up d-none d-sm-inline mr-1"><use xlinkHref="#icon-arrow-up"></use></svg>;
}
console.log("ret 3");
return <svg class="icon icon-arrow-down mr-1"><use xlinkHref="#icon-arrow-down"></use></svg>l
}
)
export class Search extends Component<any, State> {
state: State = {
@ -43,7 +68,6 @@ export class Search extends Component<any, State> {
}
componentDidMount() {
console.log("loading page, got match", this.props.match.params);
this.state.searchParams = {
page: Number(this.props.match.params.page),
q: this.props.match.params.q,
@ -57,7 +81,6 @@ export class Search extends Component<any, State> {
// Re-do search if the props have changed
componentDidUpdate(lastProps: any) {
if (lastProps.match && lastProps.match.params !== this.props.match.params) {
console.log("updating component with sort_key", this.props.match.params.sort_key);
this.state.searchParams = {
page: Number(this.props.match.params.page),
q: this.props.match.params.q,
@ -132,34 +155,19 @@ export class Search extends Component<any, State> {
<thead>
<tr>
<th class="search-name-col">
<a
href={buildSearchURL(this, 'Name')}>
Name
</a>
<SortableLink sortKey="Name" state={this.state}/>
</th>
<th class="text-right">
<a
href={buildSearchURL(this, 'Size')}>
Size
</a>
<SortableLink sortKey="Size" state={this.state}/>
</th>
<th class="text-right">
<a
href={buildSearchURL(this, 'Seeders')}>
Seeds
</a>
<SortableLink sortKey="Seeders" state={this.state}/>
</th>
<th class="text-right d-none d-md-table-cell">
<a
href={buildSearchURL(this, 'Leechers')}>
Leechers
</a>
<SortableLink sortKey="Leechers" state={this.state}/>
</th>
<th class="text-right d-none d-md-table-cell">
<a
href={buildSearchURL(this, 'Date')}>
Scraped
</a>
<SortableLink sortKey="Date" state={this.state}/>
</th>
<th></th>
</tr>