MOBILE-3068 blogs: Fix infinite loading performance on my entries

src/addon/blog/components/entries/addon-blog-entries.html

@@ -4,9 +4,9 @@
     </ion-refresher>
     <core-loading [hideUntil]="loaded" class="core-loading-center">
         <div class="safe-padding-horizontal">
-            <ion-item *ngIf="showMyIssuesToggle">
+            <ion-item *ngIf="showMyEntriesToggle">
                 <ion-label>{{ 'addon.blog.showonlyyourentries' | translate }}</ion-label>
-                <ion-toggle [(ngModel)]="onlyMyEntries"></ion-toggle>
+                <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)">></ion-toggle>
             </ion-item>
         </div>
         <core-empty-box *ngIf="entries && entries.length == 0" icon="fa-newspaper-o" [message]="'addon.blog.noentriesyet' | translate"></core-empty-box>

src/addon/blog/components/entries/entries.ts

@@ -15,6 +15,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { Content } from 'ionic-angular';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
+import { CoreUtilsProvider } from '@providers/utils/utils';
 import { CoreSitesProvider } from '@providers/sites';
 import { CoreUserProvider } from '@core/user/providers/user';
 import { AddonBlogProvider } from '../../providers/blog';
@@ -38,6 +39,9 @@ export class AddonBlogEntriesComponent implements OnInit {
 
     protected filter = {};
     protected pageLoaded = 0;
+    protected userPageLoaded = 0;
+    protected canLoadMoreEntries = false;
+    protected canLoadMoreUserEntries = true;
 
     @ViewChild(Content) content: Content;
 
@@ -46,14 +50,14 @@ export class AddonBlogEntriesComponent implements OnInit {
     loadMoreError = false;
     entries = [];
     currentUserId: number;
-    showMyIssuesToggle = false;
+    showMyEntriesToggle = false;
     onlyMyEntries = false;
     component = AddonBlogProvider.COMPONENT;
     commentsEnabled: boolean;
     tagsEnabled: boolean;
 
     constructor(protected blogProvider: AddonBlogProvider, protected domUtils: CoreDomUtilsProvider,
-            protected userProvider: CoreUserProvider, sitesProvider: CoreSitesProvider,
+            protected userProvider: CoreUserProvider, sitesProvider: CoreSitesProvider, protected utils: CoreUtilsProvider,
             protected commentsProvider: CoreCommentsProvider, private tagProvider: CoreTagProvider) {
         this.currentUserId = sitesProvider.getCurrentSiteUserId();
     }
@@ -65,6 +69,7 @@ export class AddonBlogEntriesComponent implements OnInit {
         if (this.userId) {
             this.filter['userid'] = this.userId;
         }
+        this.showMyEntriesToggle = !this.userId;
 
         if (this.courseId) {
             this.filter['courseid'] = this.courseId;
@@ -107,9 +112,12 @@ export class AddonBlogEntriesComponent implements OnInit {
 
         if (refresh) {
             this.pageLoaded = 0;
+            this.userPageLoaded = 0;
         }
 
-        return this.blogProvider.getEntries(this.filter, this.pageLoaded).then((result) => {
+        const loadPage = this.onlyMyEntries ? this.userPageLoaded : this.pageLoaded;
+
+        return this.blogProvider.getEntries(this.filter, loadPage).then((result) => {
             const promises = result.entries.map((entry) => {
                 switch (entry.publishstate) {
                     case 'draft':
@@ -134,16 +142,25 @@ export class AddonBlogEntriesComponent implements OnInit {
             });
 
             if (refresh) {
-                this.showMyIssuesToggle = false;
                 this.entries = result.entries;
             } else {
-                this.entries = this.entries.concat(result.entries);
+                this.entries = this.utils.uniqueArray(this.entries.concat(result.entries), 'id').sort((a, b) => {
+                    return b.created - a.created;
+                });
             }
 
-            this.canLoadMore = result.totalentries > this.entries.length;
+            if (this.onlyMyEntries) {
+                const count = this.entries.filter((entry) => {
+                    return entry.userid == this.currentUserId;
+                }).length;
+                this.canLoadMoreUserEntries = result.totalentries > count;
+                this.canLoadMore = this.canLoadMoreUserEntries;
+                this.userPageLoaded++;
+            } else {
+                this.canLoadMoreEntries = result.totalentries > this.entries.length;
+                this.canLoadMore = this.canLoadMoreEntries;
                 this.pageLoaded++;
-
+            }
-            this.showMyIssuesToggle = !this.userId;
 
             return Promise.all(promises);
         }).catch((message) => {
@@ -154,6 +171,30 @@ export class AddonBlogEntriesComponent implements OnInit {
         });
     }
 
+    /**
+     * Toggle between showing only my entries or not.
+     *
+     * @param {boolean} enabled If true, filter my entries. False otherwise.
+     */
+    onlyMyEntriesToggleChanged(enabled: boolean): void {
+        if (enabled) {
+            const count = this.entries.filter((entry) => {
+                return entry.userid == this.currentUserId;
+            }).length;
+            this.userPageLoaded = Math.floor(count / AddonBlogProvider.ENTRIES_PER_PAGE);
+            this.filter['userid'] = this.currentUserId;
+
+            if (count == 0 && this.canLoadMoreUserEntries) {
+                // First time but no entry loaded. Try to load some.
+                this.loadMore();
+            }
+        } else {
+            delete this.filter['userid'];
+        }
+
+        this.canLoadMore = enabled ? this.canLoadMoreUserEntries : this.canLoadMoreEntries;
+    }
+
     /**
      * Function to load more entries.
      *
@@ -178,7 +219,17 @@ export class AddonBlogEntriesComponent implements OnInit {
 
         promises.push(this.blogProvider.invalidateEntries(this.filter));
 
-        Promise.all(promises).finally(() => {
+        if (this.showMyEntriesToggle) {
+            this.filter['userid'] = this.currentUserId;
+            promises.push(this.blogProvider.invalidateEntries(this.filter));
+
+            if (!this.showMyEntriesToggle) {
+                delete this.filter['userid'];
+            }
+
+        }
+
+        this.utils.allPromises(promises).finally(() => {
             this.fetchEntries(true).finally(() => {
                 if (refresher) {
                     refresher.complete();