From cb7f39509a020c988046e1d440abc216f2f26392 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 26 Nov 2024 17:09:59 -0500
Subject: [PATCH] Move changes from deleted Popular.js to Popular.vue

---
 src/renderer/views/Popular/Popular.js  | 108 -------------------------
 src/renderer/views/Popular/Popular.vue |  12 +--
 2 files changed, 6 insertions(+), 114 deletions(-)
 delete mode 100644 src/renderer/views/Popular/Popular.js

diff --git a/src/renderer/views/Popular/Popular.js b/src/renderer/views/Popular/Popular.js
deleted file mode 100644
index 7ef0a2b01a4b0..0000000000000
--- a/src/renderer/views/Popular/Popular.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import { defineComponent } from 'vue'
-import { mapMutations } from 'vuex'
-import FtLoader from '../../components/ft-loader/ft-loader.vue'
-import FtCard from '../../components/ft-card/ft-card.vue'
-import FtElementList from '../../components/FtElementList/FtElementList.vue'
-import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
-import FtRefreshWidget from '../../components/ft-refresh-widget/ft-refresh-widget.vue'
-
-import { invidiousAPICall } from '../../helpers/api/invidious'
-import { copyToClipboard, getRelativeTimeFromDate, setPublishedTimestampsInvidious, showToast } from '../../helpers/utils'
-import { KeyboardShortcuts } from '../../../constants'
-
-export default defineComponent({
-  name: 'Popular',
-  components: {
-    'ft-loader': FtLoader,
-    'ft-card': FtCard,
-    'ft-element-list': FtElementList,
-    'ft-icon-button': FtIconButton,
-    'ft-refresh-widget': FtRefreshWidget,
-  },
-  data: function () {
-    return {
-      isLoading: false,
-      shownResults: []
-    }
-  },
-  computed: {
-    lastPopularRefreshTimestamp: function () {
-      return getRelativeTimeFromDate(this.$store.getters.getLastPopularRefreshTimestamp, true)
-    },
-    popularCache: function () {
-      return this.$store.getters.getPopularCache
-    }
-  },
-  mounted: function () {
-    document.addEventListener('keydown', this.keyboardShortcutHandler)
-
-    this.shownResults = this.popularCache || []
-    if (!this.shownResults || this.shownResults.length < 1) {
-      this.fetchPopularInfo()
-    }
-  },
-  beforeDestroy: function () {
-    document.removeEventListener('keydown', this.keyboardShortcutHandler)
-  },
-  methods: {
-    fetchPopularInfo: async function () {
-      const searchPayload = {
-        resource: 'popular',
-        id: '',
-        params: {}
-      }
-
-      this.isLoading = true
-      const result = await invidiousAPICall(searchPayload)
-        .catch((err) => {
-          const errorMessage = this.$t('Invidious API Error (Click to copy)')
-          showToast(`${errorMessage}: ${err}`, 10000, () => {
-            copyToClipboard(err)
-          })
-          return undefined
-        })
-
-      if (!result) {
-        this.isLoading = false
-        return
-      }
-
-      const items = result.filter((item) => {
-        return item.type === 'video' || item.type === 'shortVideo' || item.type === 'channel' || item.type === 'playlist'
-      })
-      setPublishedTimestampsInvidious(items.filter(item => item.type === 'video' || item.type === 'shortVideo'))
-      this.setLastPopularRefreshTimestamp(new Date())
-
-      this.shownResults = items
-
-      this.isLoading = false
-      this.$store.commit('setPopularCache', items)
-    },
-
-    /**
-     * This function `keyboardShortcutHandler` should always be at the bottom of this file
-     * @param {KeyboardEvent} event the keyboard event
-     */
-    keyboardShortcutHandler: function (event) {
-      if (event.ctrlKey || document.activeElement.classList.contains('ft-input')) {
-        return
-      }
-      // Avoid handling events due to user holding a key (not released)
-      // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
-      if (event.repeat) { return }
-
-      switch (event.key.toLowerCase()) {
-        case 'f5':
-        case KeyboardShortcuts.APP.SITUATIONAL.REFRESH:
-          if (!this.isLoading) {
-            this.fetchPopularInfo()
-          }
-          break
-      }
-    },
-
-    ...mapMutations([
-      'setLastPopularRefreshTimestamp'
-    ])
-  }
-})
diff --git a/src/renderer/views/Popular/Popular.vue b/src/renderer/views/Popular/Popular.vue
index 66cdecfaf5c11..98530dc403483 100644
--- a/src/renderer/views/Popular/Popular.vue
+++ b/src/renderer/views/Popular/Popular.vue
@@ -35,6 +35,7 @@ import store from '../../store/index'
 import { invidiousAPICall } from '../../helpers/api/invidious'
 import { copyToClipboard, getRelativeTimeFromDate, setPublishedTimestampsInvidious, showToast } from '../../helpers/utils'
 import { useI18n } from '../../composables/use-i18n-polyfill'
+import { KeyboardShortcuts } from '../../../constants'
 
 const { t } = useI18n()
 
@@ -107,12 +108,11 @@ function keyboardShortcutHandler(event) {
   // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
   if (event.repeat) { return }
 
-  switch (event.key) {
-    case 'r':
-    case 'R':
-    case 'F5':
-      if (!isLoading.value) {
-        fetchPopularInfo()
+  switch (event.key.toLowerCase()) {
+    case 'f5':
+    case KeyboardShortcuts.APP.SITUATIONAL.REFRESH:
+      if (!this.isLoading) {
+        this.fetchPopularInfo()
       }
       break
   }