Add pagination component for remote emoji packs

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)
   })

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]

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() {