From 5bc2e70e88da155eaed5ac5afdc01e6d0a988e9b Mon Sep 17 00:00:00 2001
From: Mykyta Poturai <mykyta.poturai@tutanota.com>
Date: Tue, 18 Aug 2020 18:51:56 +0300
Subject: [PATCH] Refactor popular page

---
 src/renderer/store/modules/utils.js    |  2 +-
 src/renderer/views/Popular/Popular.js  | 30 +++++++++-----------------
 src/renderer/views/Popular/Popular.vue |  3 ++-
 3 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js
index d839ae111..8cd0c57de 100644
--- a/src/renderer/store/modules/utils.js
+++ b/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: '',
diff --git a/src/renderer/views/Popular/Popular.js b/src/renderer/views/Popular/Popular.js
index bd0f14fb0..cd80eeab7 100644
--- a/src/renderer/views/Popular/Popular.js
+++ b/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 () {
-      await this.fetchTrendingInfo()
-      await this.getTrendingInfo()
+    refreshTrendingInfo: function () {
+      this.fetchTrendingInfo()
     },
     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)
     }
   }
 })
diff --git a/src/renderer/views/Popular/Popular.vue b/src/renderer/views/Popular/Popular.vue
index 3efba2f87..d16346c93 100644
--- a/src/renderer/views/Popular/Popular.vue
+++ b/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>