From c1a2aef8e36401d1efd32cf391641faef9945e28 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Tue, 27 Jul 2021 23:34:27 +0530
Subject: [PATCH] Add sort filters for feed.

Closes #315
---
 src/components/FeedPage.vue | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 7ebc73ae..90d505be 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -6,6 +6,15 @@
     <br />
     <router-link to="/subscriptions" class="uk-text-center">View Subscriptions</router-link>
 
+    <br />
+    Sort by:
+    <select class="uk-select uk-width-auto" v-model="selectedSort" @change="onChange()">
+        <option value="descending">Most Recent</option>
+        <option value="ascending">Least Recent</option>
+        <option value="channel_ascending">Channel Name (A-Z)</option>
+        <option value="channel_descending">Channel Name (Z-A)</option>
+    </select>
+
     <div class="uk-align-right">
         <a :href="getRssUrl"><font-awesome-icon icon="rss"></font-awesome-icon></a>
     </div>
@@ -31,6 +40,7 @@ export default {
     data() {
         return {
             videos: [],
+            selectedSort: "descending",
         };
     },
     mounted() {
@@ -45,6 +55,22 @@ export default {
                 authToken: this.getAuthToken(),
             });
         },
+        onChange() {
+            switch (this.selectedSort) {
+                case "ascending":
+                    this.videos.sort((a, b) => a.uploaded - b.uploaded);
+                    break;
+                case "descending":
+                    this.videos.sort((a, b) => b.uploaded - a.uploaded);
+                    break;
+                case "channel_ascending":
+                    this.videos.sort((a, b) => a.uploaderName.localeCompare(b.uploaderName));
+                    break;
+                case "channel_descending":
+                    this.videos.sort((a, b) => b.uploaderName.localeCompare(a.uploaderName));
+                    break;
+            }
+        },
     },
     computed: {
         getRssUrl(_this) {