Componentize video sorting functionality

src/components/FeedPage.vue

@@ -12,13 +12,7 @@
     </span>
 
     <span class="md:float-right">
-        <label for="ddlSortBy" v-text="$t('actions.sort_by')" />
+        <Sorting by-key="uploaded" @apply="order => videos.sort(order)" />
-        <select id="ddlSortBy" v-model="selectedSort" class="select w-auto" @change="onChange()">
-            <option v-t="'actions.most_recent'" value="descending" />
-            <option v-t="'actions.least_recent'" value="ascending" />
-            <option v-t="'actions.channel_name_asc'" value="channel_ascending" />
-            <option v-t="'actions.channel_name_desc'" value="channel_descending" />
-        </select>
     </span>
 
     <hr />
@@ -30,10 +24,12 @@
 
 <script>
 import VideoItem from "@/components/VideoItem.vue";
+import Sorting from "@/components/Sorting.vue";
 
 export default {
     components: {
         VideoItem,
+        Sorting,
     },
     data() {
         return {
@@ -41,7 +37,6 @@ export default {
             videoStep: 100,
             videosStore: [],
             videos: [],
-            selectedSort: "descending",
         };
     },
     computed: {
@@ -73,22 +68,6 @@ 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;
-            }
-        },
         loadMoreVideos() {
             this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length);
             if (this.videos.length != this.videosStore.length)

src/components/HistoryPage.vue

@@ -6,13 +6,7 @@
     </div>
 
     <div style="text-align: right">
-        <label for="ddlSortBy" v-text="$t('actions.sort_by')" />
+        <Sorting by-key="watchedAt" @apply="order => videos.sort(order)" />
-        <select id="ddlSortBy" v-model="selectedSort" class="select w-auto" @change="onChange()">
-            <option v-t="'actions.most_recent'" value="descending" />
-            <option v-t="'actions.least_recent'" value="ascending" />
-            <option v-t="'actions.channel_name_asc'" value="channel_ascending" />
-            <option v-t="'actions.channel_name_desc'" value="channel_descending" />
-        </select>
     </div>
 
     <hr />
@@ -26,15 +20,16 @@
 
 <script>
 import VideoItem from "@/components/VideoItem.vue";
+import Sorting from "@/components/Sorting.vue";
 
 export default {
     components: {
         VideoItem,
+        Sorting,
     },
     data() {
         return {
             videos: [],
-            selectedSort: "descending",
         };
     },
     mounted() {
@@ -67,22 +62,6 @@ export default {
         document.title = "Watch History - Piped";
     },
     methods: {
-        onChange() {
-            switch (this.selectedSort) {
-                case "ascending":
-                    this.videos.sort((a, b) => a.watchedAt - b.watchedAt);
-                    break;
-                case "descending":
-                    this.videos.sort((a, b) => b.watchedAt - a.watchedAt);
-                    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;
-            }
-        },
         clearHistory() {
             if (window.db) {
                 var tx = window.db.transaction("watch_history", "readwrite");

src/components/Sorting.vue

@@ -0,0 +1,44 @@
+<template>
+    <label for="ddlSortBy" v-text="$t('actions.sort_by')" />
+    <select id="ddlSortBy" v-model="selectedSort" class="select w-auto">
+        <option v-for="(value, key) in options" v-t="`actions.${key}`" :key="key" :value="value" />
+    </select>
+</template>
+
+<script setup>
+import { defineEmits, defineProps, ref, watch } from "vue";
+
+const options = {
+    most_recent: "descending",
+    least_recent: "ascending",
+    channel_name_asc: "channel_ascending",
+    channel_name_desc: "channel_descending",
+};
+
+const selectedSort = ref("descending");
+
+const props = defineProps({
+    byKey: String,
+});
+
+const emit = defineEmits(["apply"]);
+
+watch(selectedSort, value => {
+    switch (value) {
+        case "ascending":
+            emit("apply", (a, b) => a[props.byKey] - b[props.byKey]);
+            break;
+        case "descending":
+            emit("apply", (a, b) => b[props.byKey] - a[props.byKey]);
+            break;
+        case "channel_ascending":
+            emit("apply", (a, b) => a.uploaderName.localeCompare(b.uploaderName));
+            break;
+        case "channel_descending":
+            emit("apply", (a, b) => b.uploaderName.localeCompare(a.uploaderName));
+            break;
+        default:
+            console.error("Unexpected sort value");
+    }
+});
+</script>