From efbd75834fcc01daa8b0577cfc5c46143168bb11 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 24 Sep 2020 01:31:33 +0300
Subject: [PATCH] Add pagination component for remote emoji packs

---
 src/api/emojiPacks.js           |  4 ++--
 src/store/modules/emojiPacks.js |  4 ++--
 src/views/emojiPacks/index.vue  | 25 ++++++++++++++++++++++---
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/api/emojiPacks.js b/src/api/emojiPacks.js
index a2d085c8..2fba5e6b 100644
--- a/src/api/emojiPacks.js
+++ b/src/api/emojiPacks.js
@@ -92,10 +92,10 @@ export async function listPacks(page, pageSize, host, token) {
   })
 }
 
-export async function listRemotePacks(host, token, instance) {
+export async function listRemotePacks(instance, page, pageSize, host, token) {
   return await request({
     baseURL: baseName(host),
-    url: `/api/pleroma/emoji/packs/remote?url=${baseName(instance)}`,
+    url: `/api/pleroma/emoji/packs/remote?url=${baseName(instance)}&page=${page}&page_size=${pageSize}`,
     method: 'get',
     headers: authHeaders(token)
   })
diff --git a/src/store/modules/emojiPacks.js b/src/store/modules/emojiPacks.js
index b01536db..13b82f92 100644
--- a/src/store/modules/emojiPacks.js
+++ b/src/store/modules/emojiPacks.js
@@ -208,8 +208,8 @@ const emojiPacks = {
     SetActiveTab({ commit }, activeTab) {
       commit('SET_ACTIVE_TAB', activeTab)
     },
-    async SetRemoteEmojiPacks({ commit, getters }, { remoteInstance }) {
-      const { data } = await listRemotePacks(getters.authHost, getters.token, remoteInstance)
+    async SetRemoteEmojiPacks({ commit, getters, state }, { page, remoteInstance }) {
+      const { data } = await listRemotePacks(remoteInstance, page, state.pageSize, getters.authHost, getters.token)
       const { packs, count } = data
       const updatedPacks = Object.keys(packs).reduce((acc, packName) => {
         const { files, ...pack } = packs[packName]
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 6b8677de..fc5770fd 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -45,7 +45,7 @@
             :page-size="pageSize"
             hide-on-single-page
             layout="prev, pager, next"
-            @current-change="handlePageChange"
+            @current-change="handleLocalPageChange"
           />
         </div>
       </el-tab-pane>
@@ -71,6 +71,16 @@
             </el-collapse>
           </el-form-item>
         </el-form>
+        <div class="pagination">
+          <el-pagination
+            :total="remotePacksCount"
+            :current-page="currentRemotePacksPage"
+            :page-size="pageSize"
+            hide-on-single-page
+            layout="prev, pager, next"
+            @current-change="handleRemotePageChange"
+          />
+        </div>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -97,6 +107,9 @@ export default {
     currentLocalPacksPage() {
       return this.$store.state.emojiPacks.currentLocalPacksPage
     },
+    currentRemotePacksPage() {
+      return this.$store.state.emojiPacks.currentRemotePacksPage
+    },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
@@ -131,6 +144,9 @@ export default {
     },
     remotePacks() {
       return this.$store.state.emojiPacks.remotePacks
+    },
+    remotePacksCount() {
+      return this.$store.state.emojiPacks.remotePacksCount
     }
   },
   mounted() {
@@ -148,9 +164,12 @@ export default {
           this.$store.dispatch('ReloadEmoji')
         })
     },
-    handlePageChange(page) {
+    handleLocalPageChange(page) {
       this.$store.dispatch('FetchLocalEmojiPacks', page)
     },
+    handleRemotePageChange(page) {
+      this.$store.dispatch('SetRemoteEmojiPacks', { page, remoteInstance: this.remoteInstanceAddress })
+    },
     importFromFS() {
       this.$store.dispatch('ImportFromFS')
         .then(() => {
@@ -171,7 +190,7 @@ export default {
     },
     async refreshRemotePacks() {
       this.fullscreenLoading = true
-      await this.$store.dispatch('SetRemoteEmojiPacks', { remoteInstance: this.remoteInstanceAddress })
+      await this.$store.dispatch('SetRemoteEmojiPacks', { page: 1, remoteInstance: this.remoteInstanceAddress })
       this.fullscreenLoading = false
     },
     async reloadEmoji() {