Merge pull request #77 from Deedone/master

Adding caches

src/renderer/store/modules/utils.js

@@ -3,6 +3,8 @@ import FtToastEvents from '../../components/ft-toast/ft-toast-events'
 const state = {
   isSideNavOpen: false,
   sessionSearchHistory: [],
+  popularCache: null,
+  trendingCache: null,
   searchSettings: {
     sortBy: 'relevance',
     time: '',
@@ -42,6 +44,14 @@ const getters = {
     return state.sessionSearchHistory
   },
 
+  getPopularCache () {
+    return state.popularCache
+  },
+
+  getTrendingCache () {
+    return state.trendingCache
+  },
+
   getSearchSettings () {
     return state.searchSettings
   }
@@ -261,6 +271,14 @@ const mutations = {
     }
   },
 
+  setPopularCache (state, value) {
+    state.popularCache = value
+  },
+
+  setTrendingCache (state, value) {
+    state.trendingCache = 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,42 @@ export default Vue.extend({
       shownResults: []
     }
   },
+  computed: {
+    popularCache: function () {
+      return this.$store.getters.getPopularCache
+    }
+  },
   mounted: function () {
-    this.getTrendingInfo()
+    this.shownResults = this.popularCache
+    if (!this.shownResults || this.shownResults.length < 1) {
+      this.fetchPopularInfo()
+    }
   },
   methods: {
-    getTrendingInfo: function () {
-      this.isLoading = true
-
+    fetchPopularInfo: async function () {
       const searchPayload = {
         resource: 'popular',
         id: '',
         params: {}
       }
 
-      this.$store.dispatch('invidiousAPICall', searchPayload).then((result) => {
+      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.shownResults = this.shownResults.concat(returnData)
       this.isLoading = false
-      }).catch((err) => {
-        console.log(err)
-      })
+      this.$store.commit('setPopularCache', this.shownResults)
     }
   }
 })

src/renderer/views/Popular/Popular.vue

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

src/renderer/views/Trending/Trending.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/Trending/Trending.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
+import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
 
 import ytrend from 'yt-trending-scraper'
 
@@ -10,7 +11,8 @@ export default Vue.extend({
   components: {
     'ft-card': FtCard,
     'ft-loader': FtLoader,
-    'ft-element-list': FtElementList
+    'ft-element-list': FtElementList,
+    'ft-icon-button': FtIconButton
   },
   data: function () {
     return {
@@ -30,9 +32,20 @@ export default Vue.extend({
     },
     invidiousInstance: function () {
       return this.$store.getters.getInvidiousInstance
+    },
+    trendingCache () {
+      return this.$store.getters.getTrendingCache
     }
   },
   mounted: function () {
+    if (this.trendingCache && this.trendingCache.length > 0) {
+      this.shownResults = this.trendingCache
+    } else {
+      this.getTrendingInfo()
+    }
+  },
+  methods: {
+    getTrendingInfo () {
       if (!this.usingElectron) {
         this.getVideoInformationInvidious()
       } else {
@@ -46,7 +59,7 @@ export default Vue.extend({
         }
       }
     },
-  methods: {
+
     getTrendingInfoLocal: function () {
       this.isLoading = true
 
@@ -59,6 +72,7 @@ export default Vue.extend({
 
         this.shownResults = this.shownResults.concat(returnData)
         this.isLoading = false
+        this.$store.commit('setTrendingCache', this.shownResults)
       }).catch((err) => {
         console.log(err)
         const errorMessage = this.$t('Local API Error (Click to copy)')
@@ -102,6 +116,7 @@ export default Vue.extend({
 
         this.shownResults = this.shownResults.concat(returnData)
         this.isLoading = false
+        this.$store.commit('setTrendingCache', this.shownResults)
       }).catch((err) => {
         console.log(err)
         const errorMessage = this.$t('Invidious API Error (Click to copy)')

src/renderer/views/Trending/Trending.vue

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