infinite-scroll-on-collections-list-update

src/pages/CollectionPage.vue

@@ -64,10 +64,10 @@ export default defineComponent({
         const infiniteScroll = ref();
         const setIsLoading = (state: boolean) => isLoading.value = state;
         const loadItemsByCollection = async (event: any, reset: boolean) => {
-            let hasMoreItems = await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified'}, reset);
+            let hasMoreCollections = await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified', reset: reset});
             if (event && event.target)
                 event.target.complete();
-            if (!hasMoreItems){
+            if (!hasMoreCollections){
                 infiniteScroll.value.$el.disabled = true;
             }
         }

src/pages/ItemsPage.vue

@@ -9,6 +9,12 @@
             <ion-refresher-content></ion-refresher-content>
         </ion-refresher>
         <items-list :items="tainacanStore.items"></items-list>
+        <ion-infinite-scroll ref="infiniteScroll" threshold="5%" @ionInfinite="loadItems">
+            <ion-infinite-scroll-content
+                loadingSpinner="bubbles"
+             >
+            </ion-infinite-scroll-content>
+        </ion-infinite-scroll>
     </base-layout>
 </template>
 
@@ -19,44 +25,50 @@ import {
 import {
     IonLoading,
     IonRefresher,
-    IonRefresherContent
+    IonRefresherContent,
+    IonInfiniteScroll
 } from '@ionic/vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
 import { ref } from 'vue';
-
 import ItemsList from '../components/lists/ItemsList.vue';
-
 export default {
     components: {
         IonLoading,
         ItemsList,
         BaseLayout,
         IonRefresher,
-        IonRefresherContent
+        IonRefresherContent,
+        IonInfiniteScroll
     },
     setup() {
         const isLoading = ref(false);
         const setIsLoading = (state: boolean) => isLoading.value = state;
-
-        const loadItems = async () => {
-            await tainacanStore.fetchItems({ perPage: '24', orderBy: 'modified'});
-        }
-        const doRefresh = async (event: any) => {
-            await loadItems();
+        const infiniteScroll = ref();
+        const loadItems = async (event: any, reset: boolean) => {
+            let hasMoreItems = await tainacanStore.fetchItems({ perPage: '12', orderBy: 'modified', reset: reset});
             if (event && event.target)
                 event.target.complete();
+            if (!hasMoreItems){
+                infiniteScroll.value.$el.disabled = true;
+            }
+        }
+        const doRefresh = async (event: any) => {
+            await loadItems({}, true);
+            if (event && event.target){
+                event.target.complete();
+                infiniteScroll.value.$el.disabled = false;
+            }
         }
-
         let tainacanStore = useTainacanStore();
         return {
             isLoading,
             setIsLoading,
             tainacanStore,
             doRefresh,
-            loadItems
+            loadItems,
+            infiniteScroll
         }
     },
-
     async created(){
         this.setIsLoading(true)
         await this.loadItems();

src/store/storeTainacan.ts

@@ -15,6 +15,7 @@ const useTainacanStore = defineStore("tainacan", {
       totalCollectionItems: 0,
       nextCollectionsPage: 1,
       items: [],
+      nextItemsPage: 1,
       totalItems: 0,
       siteUrl: "",
       userLogin: "",
@@ -69,14 +70,8 @@ const useTainacanStore = defineStore("tainacan", {
       }
     },
 
-    async fetchItemsByCollection(collectionId: string, params: { perPage: string, orderBy: string }, reset: boolean) {
+    async fetchItemsByCollection(collectionId: string, params: { perPage: string, orderBy: string, reset: boolean }) {
       try {
-
-        if(reset){
-          this.collectionItems = [];
-          this.nextCollectionsPage = 1;
-        }
- 
         const wpStore = useWpStore();
 
         let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collection/${collectionId}/items?fetch_only=id,title,thumbnail&perpage=12&orderby=modified`;
@@ -87,6 +82,11 @@ const useTainacanStore = defineStore("tainacan", {
         if (params && params.orderBy)
           endpoint += '&orderby=' + params.orderBy;
           
+        if(params.reset){
+          this.collectionItems = [];
+          this.nextCollectionsPage = 1;
+        }
+
         endpoint += '&paged=' + this.nextCollectionsPage;
   
         const response = await axios.get(endpoint);
@@ -104,6 +104,7 @@ const useTainacanStore = defineStore("tainacan", {
       } catch (err) {
         this.collectionItems = [];
         this.totalCollectionItems = 0;
+        this.nextCollectionsPage = 1;
         console.error("Erro no carregamento dos items da coleção:", err);
 
         return false;
@@ -128,7 +129,7 @@ const useTainacanStore = defineStore("tainacan", {
       }
     },
 
-    async fetchItems(params: { perPage: string, orderBy: string }) {
+    async fetchItems(params: { perPage: string, orderBy: string, reset: boolean }) {
       try {
         const wpStore = useWpStore();
         
@@ -140,13 +141,29 @@ const useTainacanStore = defineStore("tainacan", {
         if (params && params.orderBy)
           endpoint += '&orderby=' + params.orderBy;
 
+        if(params.reset){
+          this.items = [];
+          this.nextItemsPage = 1;
+        }
+
+        endpoint += '&paged=' + this.nextItemsPage;
+
         const response = await axios.get(endpoint);
-        this.items = response.data.items;
+        this.items.push(...response.data.items);
         this.totalItems = response.headers['x-wp-total'];
 
+        if (!this.totalItems ||
+          this.totalItems === "0") {
+          return false;
+        } else {
+          this.nextItemsPage++;
+          return true;
+        } 
+
       } catch (err) {
         this.items = [];
         this.totalItems = 0;
+        this.nextItemsPage = 1;
         console.error("Erro no carregamento dos items:", err);
         return err;
       }