Fully working, needs polishing

server/ui/src/Main.css

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

server/ui/src/components/search.tsx

@@ -1,4 +1,4 @@
-import { Component, linkEvent } from 'inferno';
+import { Component, render, linkEvent } from 'inferno';
 import moment from 'moment';
 
 import { endpoint } from '../env';
@@ -11,7 +11,17 @@ interface State {
   searching: Boolean;
 }
 
-function buildSearchURL({state: { searchParams }}, key) {
+class SortableLink extends Component {
+  render({ sortKey, state: { searchParams } }) {
+    return <span>
+      <a href={this.buildSearchURL(sortKey, searchParams)}>
+        {sortKey}
+        {this.renderIcon(sortKey, searchParams)}
+      </a>
+    </span>;
+  }
+
+  buildSearchURL(key, searchParams) {
     let page, direction;
     if (key === searchParams.sort_key) {
       page = searchParams.page;
@@ -21,7 +31,22 @@ function buildSearchURL({state: { searchParams }}, key) {
       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>