Fix issue with load more in eagle eye

frontend/src/premium/eagle-eye/components/eagle-eye-list.vue

@@ -1,37 +1,58 @@
 <template>
   <div class="eagle-eye-list">
-    <div v-if="count > 0">
-      <transition-group name="fade" mode="out-in">
-        <app-eagle-eye-list-item
-          v-for="record in rows"
-          :key="record.id"
-          :record="record"
-        />
-      </transition-group>
-      <div
-        v-if="rows.length && isLoadMoreVisible"
-        class="flex grow justify-center pt-4"
-      >
+    <div
+      v-if="loading && !rows.length"
+      v-loading="loading"
+      class="app-page-spinner h-16 !relative !min-h-5"
+    ></div>
+    <div v-else>
+      <!-- Empty State -->
+      <app-empty-state-cta
+        v-if="rows.length === 0"
+        icon="ri-folder-3-line"
+        :title="computedEmptyStateCopy"
+      ></app-empty-state-cta>
+
+      <div v-else>
+        <!-- Sorter and counter -->
+        <div class="flex justify-between items-center py-3">
+          <app-eagle-eye-counter />
+          <app-eagle-eye-sorter
+            v-if="activeView === 'inbox'"
+          />
+        </div>
+
+        <!-- Eagle eye items list -->
+        <transition-group name="fade" mode="out-in">
+          <app-eagle-eye-list-item
+            v-for="record in rows"
+            :key="record.id"
+            :record="record"
+          />
+        </transition-group>
+
+        <!-- Load more button -->
         <div
-          v-if="loading"
-          v-loading="loading"
-          class="app-page-spinner h-16 !relative !min-h-5"
-        ></div>
-        <el-button
-          v-else
-          class="btn btn-link btn-link--primary"
-          @click="handleLoadMore"
-          ><i class="ri-arrow-down-line"></i
-          ><span class="text-xs">Load more</span></el-button
+          v-if="isLoadMoreVisible || loading"
+          class="flex grow justify-center pt-4"
         >
+          <div
+            v-if="loading"
+            v-loading="loading"
+            class="app-page-spinner h-16 w-16 !relative !min-h-fit"
+          ></div>
+          <el-button
+            v-else
+            class="btn btn-link btn-link--primary"
+            @click="handleLoadMore"
+            ><i class="ri-arrow-down-line"></i
+            ><span class="text-xs"
+              >Load more</span
+            ></el-button
+          >
+        </div>
       </div>
     </div>
-
-    <app-empty-state-cta
-      v-else
-      icon="ri-folder-3-line"
-      :title="computedEmptyStateCopy"
-    ></app-empty-state-cta>
   </div>
 </template>
 
@@ -43,6 +64,8 @@ export default {
 
 <script setup>
 import AppEagleEyeListItem from './eagle-eye-list-item'
+import AppEagleEyeCounter from './eagle-eye-counter'
+import AppEagleEyeSorter from './eagle-eye-sorter'
 import { useStore } from 'vuex'
 import { computed } from 'vue'
 
@@ -57,7 +80,7 @@ const loading = computed(
   () => store.state.eagleEye.list.loading
 )
 const pagination = computed(
-  () => store.getters['activity/pagination']
+  () => store.getters['eagleEye/pagination']
 )
 const isLoadMoreVisible = computed(() => {
   return (
@@ -82,8 +105,9 @@ const computedEmptyStateCopy = computed(() => {
 })
 
 const handleLoadMore = async () => {
-  await store.dispatch('eagleEye/doFetch', {
-    keepPagination: true
-  })
+  await store.dispatch(
+    'eagleEye/doChangePaginationCurrentPage',
+    pagination.value.currentPage + 1
+  )
 }
 </script>

frontend/src/premium/eagle-eye/components/eagle-eye-page.vue

@@ -32,18 +32,7 @@
           Find relevant content across community platforms
         </div>
       </div>
-      <div
-        v-else-if="loading"
-        v-loading="loading"
-        class="app-page-spinner"
-      ></div>
       <div v-else>
-        <div class="flex justify-between items-center py-3">
-          <app-eagle-eye-counter />
-          <app-eagle-eye-sorter
-            v-if="activeView === 'inbox'"
-          />
-        </div>
         <app-eagle-eye-list />
       </div>
     </div>
@@ -60,8 +49,6 @@ export default {
 import AppPageWrapper from '@/modules/layout/components/page-wrapper'
 import AppEagleEyeTabs from './eagle-eye-tabs'
 import AppEagleEyeList from './eagle-eye-list'
-import AppEagleEyeCounter from './eagle-eye-counter'
-import AppEagleEyeSorter from './eagle-eye-sorter'
 import AppEagleEyeFilter from './eagle-eye-filter'
 
 import { useStore } from 'vuex'

frontend/src/premium/eagle-eye/store/actions.js

@@ -19,7 +19,8 @@ export default {
         await dispatch('doPopulate', {
           keywords:
             getters.activeView.filter.attributes.keywords
-              .value
+              .value,
+          keepPagination
         })
       }
       commit('FETCH_STARTED', {
@@ -55,10 +56,13 @@ export default {
     }
   },
 
-  async doPopulate({ commit }, { keywords }) {
+  async doPopulate(
+    { commit },
+    { keywords, keepPagination }
+  ) {
     try {
       commit('POPULATE_STARTED', {
-        keywords
+        keepPagination
       })
 
       await EagleEyeService.populate(keywords)

frontend/src/premium/eagle-eye/store/mutations.js

@@ -2,8 +2,25 @@ import sharedMutations from '@/shared/store/mutations'
 
 export default {
   ...sharedMutations(),
-  POPULATE_STARTED(state) {
+  FETCH_SUCCESS(state, { rows, count }) {
+    state.list.loading = false
+
+    for (const record of rows) {
+      state.records[record.id] = record
+      if (!state.list.ids.includes(record.id)) {
+        state.list.ids.push(record.id)
+      }
+    }
+
+    state.count = count
+  },
+
+  POPULATE_STARTED(state, { keepPagination }) {
     state.list.loading = true
+
+    if (!keepPagination) {
+      state.list.ids.length = 0
+    }
   },
 
   POPULATE_SUCCESS(state) {

frontend/src/shared/store/mutations.js

@@ -138,6 +138,10 @@ export default () => {
         (acc, item) => {
           acc[item.id] = {
             ...item,
+            pagination: {
+              ...item.pagination,
+              currentPage: 1
+            },
             active: item.id === viewId
           }
           return acc