Add caching for popular videos

Also add the button to refresh the cache

src/renderer/store/modules/utils.js

@@ -3,6 +3,7 @@ import FtToastEvents from '../../components/ft-toast/ft-toast-events'
 const state = {
   isSideNavOpen: false,
   sessionSearchHistory: [],
+  popularCache: undefined,
   searchSettings: {
     sortBy: 'relevance',
     time: '',
@@ -42,6 +43,10 @@ const getters = {
     return state.sessionSearchHistory
   },
 
+  getPopularCache () {
+    return state.popularCache
+  },
+
   getSearchSettings () {
     return state.searchSettings
   }
@@ -113,6 +118,10 @@ const mutations = {
     }
   },
 
+  setPopularCache (state, value) {
+    state.popularCache = value
+  },
+
   setSearchSortBy (state, value) {
     state.searchSettings.sortBy = value
   },

src/renderer/views/Popular/Popular.css

@@ -4,6 +4,12 @@
   margin-bottom: 60px;
 }
 
+.floatingTopButton {
+  position: absolute;
+  top: 70px;
+  right: 10px;
+}
+
 @media only screen and (max-width: 680px) {
   .card {
     width: 90%;

src/renderer/views/Popular/Popular.js

@@ -2,13 +2,15 @@ import Vue from 'vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
+import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
 
 export default Vue.extend({
   name: 'Popular',
   components: {
     'ft-loader': FtLoader,
     'ft-card': FtCard,
-    'ft-element-list': FtElementList
+    'ft-element-list': FtElementList,
+    'ft-icon-button': FtIconButton
   },
   data: function () {
     return {
@@ -16,35 +18,55 @@ export default Vue.extend({
       shownResults: []
     }
   },
+  computed: {
+    popularCache: function () {
+      return this.$store.getters.getPopularCache
+    }
+  },
   mounted: function () {
     this.getTrendingInfo()
   },
   methods: {
-    getTrendingInfo: function () {
+    refreshTrendingInfo: async function () {
-      this.isLoading = true
+      await this.fetchTrendingInfo()
-
+      await this.getTrendingInfo()
+    },
+    fetchTrendingInfo: async function () {
       const searchPayload = {
         resource: 'popular',
         id: '',
         params: {}
       }
 
-      this.$store.dispatch('invidiousAPICall', searchPayload).then((result) => {
+      const result = await this.$store.dispatch('invidiousAPICall', searchPayload).catch((err) => {
-        if (!result) {
-          return
-        }
-
-        console.log(result)
-
-        const returnData = result.filter((item) => {
-          return item.type === 'video' || item.type === 'shortVideo' || item.type === 'channel' || item.type === 'playlist'
-        })
-
-        this.shownResults = this.shownResults.concat(returnData)
-        this.isLoading = false
-      }).catch((err) => {
         console.log(err)
       })
+
+      if (!result) {
+        return
+      }
+
+      console.log(result)
+
+      const returnData = 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
     }
   }
 })

src/renderer/views/Popular/Popular.vue

@@ -13,6 +13,12 @@
         :data="shownResults"
       />
     </ft-card>
+    <ft-icon-button
+      icon="sync"
+      class="floatingTopButton"
+      :size="10"
+      @click="refreshTrendingInfo"
+    />
   </div>
 </template>