Refactor popular page

src/renderer/store/modules/utils.js

@@ -3,7 +3,7 @@ import FtToastEvents from '../../components/ft-toast/ft-toast-events'
 const state = {
   isSideNavOpen: false,
   sessionSearchHistory: [],
-  popularCache: undefined,
+  popularCache: null,
   searchSettings: {
     sortBy: 'relevance',
     time: '',

src/renderer/views/Popular/Popular.js

@@ -24,12 +24,14 @@ export default Vue.extend({
     }
   },
   mounted: function () {
-    this.getTrendingInfo()
+    this.shownResults = this.popularCache
+    if (!this.shownResults || this.shownResults.length < 1) {
+      this.fetchTrendingInfo()
+    }
   },
   methods: {
-    refreshTrendingInfo: async function () {
+    refreshTrendingInfo: function () {
-      await this.fetchTrendingInfo()
+      this.fetchTrendingInfo()
-      await this.getTrendingInfo()
     },
     fetchTrendingInfo: async function () {
       const searchPayload = {
@@ -38,35 +40,23 @@ export default Vue.extend({
         params: {}
       }
 
+      this.isLoading = true
       const result = await this.$store.dispatch('invidiousAPICall', searchPayload).catch((err) => {
         console.log(err)
       })
 
       if (!result) {
+        this.isLoading = false
         return
       }
 
       console.log(result)
 
-      const returnData = result.filter((item) => {
+      this.shownResults = result.filter((item) => {
         return item.type === 'video' || item.type === 'shortVideo' || item.type === 'channel' || item.type === 'playlist'
       })
-      this.$store.commit('setPopularCache', returnData)
-      return returnData
-    },
-
-    getTrendingInfo: async function () {
-      this.isLoading = true
-      let data = this.popularCache
-      if (!data || data.length < 1) {
-        data = await this.fetchTrendingInfo()
-      }
-      if (!data) {
-        return
-      }
-
-      this.shownResults = this.shownResults.concat(data)
       this.isLoading = false
+      this.$store.commit('setPopularCache', this.shownResults)
     }
   }
 })

src/renderer/views/Popular/Popular.vue

@@ -16,7 +16,8 @@
     <ft-icon-button
       icon="sync"
       class="floatingTopButton"
-      :size="10"
+      :size="12"
+      :theme="primary"
       @click="refreshTrendingInfo"
     />
   </div>