From 3eeb85f3d16785c332ef555d0849d254dcf5913a Mon Sep 17 00:00:00 2001
From: jo <ljonas@riseup.net>
Date: Fri, 30 Nov 2018 20:52:29 +0100
Subject: [PATCH] Enhanc search result

---
 server/ui/src/components/navbar.tsx |  2 +-
 server/ui/src/components/search.tsx | 87 ++++++++++++++---------------
 2 files changed, 43 insertions(+), 46 deletions(-)

diff --git a/server/ui/src/components/navbar.tsx b/server/ui/src/components/navbar.tsx
index 0349679..f4a63a7 100644
--- a/server/ui/src/components/navbar.tsx
+++ b/server/ui/src/components/navbar.tsx
@@ -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
diff --git a/server/ui/src/components/search.tsx b/server/ui/src/components/search.tsx
index 466f57e..578448a 100644
--- a/server/ui/src/components/search.tsx
+++ b/server/ui/src/components/search.tsx
@@ -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}`);
   }
-
 }