From ac281105adf128d77c3771ee84e7d77a8bc77941 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.coml>
Date: Fri, 18 Nov 2016 05:56:55 -0500
Subject: [PATCH] Add Sort option to My Files page

---
 js/page/my_files.js | 33 +++++++++++++++++++++++++--------
 scss/_gui.scss      | 10 ++++++++++
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/js/page/my_files.js b/js/page/my_files.js
index 107d59044..dbeb77edf 100644
--- a/js/page/my_files.js
+++ b/js/page/my_files.js
@@ -174,6 +174,7 @@ var MyFilesPage = React.createClass({
     },
     title: function(filesInfo) {
       return filesInfo.sort(function(a, b) {
+        console.log('in title sort. a is', a, '; b is', b)
         return ((a.metadata ? a.metadata.title.toLowerCase() : a.name) >
                 (b.metadata ? b.metadata.title.toLowerCase() : b.name));
       });
@@ -191,6 +192,7 @@ var MyFilesPage = React.createClass({
       filesInfo: null,
       publishedFilesSdHashes: null,
       filesAvailable: {},
+      sortBy: 'date',
     };
   },
   getDefaultProps: function() {
@@ -233,6 +235,17 @@ var MyFilesPage = React.createClass({
       clearTimeout(this._fileTimeout);
     }
   },
+  setFilesInfo: function(filesInfo) {
+    this.setState({
+      filesInfo: this._sortFunctions[this.state.sortBy](filesInfo),
+    });
+  },
+  handleSortChanged: function(event) {
+    this.setState({
+      sortBy: event.target.value,
+      filesInfo: this._sortFunctions[event.target.value](this.state.filesInfo),
+    });
+  },
   updateFilesInfo: function() {
     this._fileInfoCheckNum += 1;
 
@@ -249,9 +262,7 @@ var MyFilesPage = React.createClass({
               newFilesInfo.push(fileInfo);
             }
             if (claimInfoProcessedCount >= claimsInfo.length) {
-              this.setState({
-                filesInfo: newFilesInfo
-              });
+              this.setFilesInfo(newFilesInfo);
 
               this._fileTimeout = setTimeout(() => { this.updateFilesInfo() }, 1000);
             }
@@ -262,11 +273,9 @@ var MyFilesPage = React.createClass({
       // We're in the Downloaded tab, so populate this.state.filesInfo with files the user has in
       // lbrynet, with published files filtered out.
       lbry.getFilesInfo((filesInfo) => {
-        this.setState({
-          filesInfo: filesInfo.filter(({sd_hash}) => {
-            return this.state.publishedFilesSdHashes.indexOf(sd_hash) == -1;
-          }),
-        });
+        this.setFilesInfo(filesInfo.filter(({sd_hash}) => {
+          return this.state.publishedFilesSdHashes.indexOf(sd_hash) == -1;
+        }));
 
         let newFilesAvailable;
         if (!(this._fileInfoCheckNum % this._fileInfoCheckRate)) {
@@ -344,6 +353,14 @@ var MyFilesPage = React.createClass({
     }
     return (
       <main className="page">
+        <span className='sort-section'>
+          Sort by { ' ' }
+          <FormField type="select" onChange={this.handleSortChanged}>
+            <option value="date">Date</option>
+            <option value="title">Title</option>
+            <option value="filename">File name</option>
+          </FormField>
+        </span>
         {content}
       </main>
     );
diff --git a/scss/_gui.scss b/scss/_gui.scss
index f37792045..e533b8504 100644
--- a/scss/_gui.scss
+++ b/scss/_gui.scss
@@ -284,6 +284,16 @@ input[type="text"], input[type="search"]
 }
 
 
+.sort-section {
+  display: block;
+  margin-bottom: 5px;
+
+
+  text-align: right;
+  font-size: 0.85em;
+  color: $color-help;
+}
+
 .modal-overlay {
   position: fixed;
   display: flex;