Create abstract PaginatedListState for DiscussionList and others

js/src/common/compat.js

@@ -75,6 +75,7 @@ import userOnline from './helpers/userOnline';
 import listItems from './helpers/listItems';
 import Fragment from './Fragment';
 import DefaultResolver from './resolvers/DefaultResolver';
+import PaginatedListState from './states/PaginatedListState';
 
 export default {
   extend: extend,
@@ -154,4 +155,5 @@ export default {
   'helpers/userOnline': userOnline,
   'helpers/listItems': listItems,
   'resolvers/DefaultResolver': DefaultResolver,
+  'states/PaginatedListState': PaginatedListState,
 };

js/src/common/states/PaginatedListState.ts

@@ -0,0 +1,230 @@
+import Model from '../Model';
+
+export interface Page<TModel> {
+  number: number;
+  items: TModel[];
+
+  hasPrev?: boolean;
+  hasNext?: boolean;
+}
+
+export interface PaginationLocation {
+  page: number;
+  startIndex?: number;
+  endIndex?: number;
+}
+
+export default abstract class PaginatedListState<T extends Model> {
+  protected location!: PaginationLocation;
+  protected pageSize: number;
+
+  protected pages: Page<T>[] = [];
+  protected params: any = {};
+
+  protected initialLoading: boolean = false;
+  protected loadingPrev: boolean = false;
+  protected loadingNext: boolean = false;
+
+  protected constructor(params: any = {}, page: number = 1, pageSize: number = 20) {
+    this.params = params;
+
+    this.location = { page };
+    this.pageSize = pageSize;
+  }
+
+  abstract get type(): string;
+
+  public clear() {
+    this.pages = [];
+
+    m.redraw();
+  }
+
+  public loadPrev(): Promise<void> {
+    if (this.loadingPrev || this.getLocation().page === 1) return Promise.resolve();
+
+    this.loadingPrev = true;
+
+    const page: number = this.getPrevPageNumber();
+
+    return this.loadPage(page)
+      .then(this.parseResults.bind(this, page))
+      .finally(() => (this.loadingPrev = false));
+  }
+
+  public loadNext(): Promise<void> {
+    if (this.loadingNext) return Promise.resolve();
+
+    this.loadingNext = true;
+
+    const page: number = this.getNextPageNumber();
+
+    return this.loadPage(page)
+      .then(this.parseResults.bind(this, page))
+      .finally(() => (this.loadingNext = false));
+  }
+
+  protected parseResults(pg: number, results: T[]) {
+    const pageNum = Number(pg);
+
+    const links = results.payload?.links || {};
+    const page = {
+      number: pageNum,
+      items: results,
+      hasNext: !!links.next,
+      hasPrev: !!links.prev,
+    };
+
+    if (this.isEmpty() || pageNum > this.getNextPageNumber() - 1) {
+      this.pages.push(page);
+    } else {
+      this.pages.unshift(page);
+    }
+
+    this.location = { page: pageNum };
+
+    m.redraw();
+  }
+
+  /**
+   * Load a new page of results.
+   */
+  protected loadPage(page = 1): Promise<T[]> {
+    const params = this.requestParams();
+    params.page = { offset: this.pageSize * (page - 1) };
+
+    if (Array.isArray(params.include)) {
+      params.include = params.include.join(',');
+    }
+
+    return app.store.find(this.type, params);
+  }
+
+  /**
+   * Get the parameters that should be passed in the API request.
+   * Do not include page offset unless subclass overrides loadPage.
+   *
+   * @abstract
+   * @see loadPage
+   */
+  protected requestParams(): any {
+    return this.params;
+  }
+
+  /**
+   * Update the `this.params` object, calling `refresh` if they have changed.
+   * Use `requestParams` for converting `this.params` into API parameters
+   *
+   * @param newParams
+   * @param page
+   * @see requestParams
+   */
+  public refreshParams(newParams, page: number) {
+    if (this.isEmpty() || this.paramsChanged(newParams)) {
+      this.params = newParams;
+
+      return this.refresh(page);
+    }
+  }
+
+  public refresh(page: number = 1) {
+    this.initialLoading = true;
+    this.loadingPrev = false;
+    this.loadingNext = false;
+
+    this.clear();
+
+    this.location = { page };
+
+    return this.loadPage()
+      .then((results: T[]) => {
+        this.pages = [];
+        this.parseResults(this.location.page, results);
+      })
+      .finally(() => (this.initialLoading = false));
+  }
+
+  public getPages() {
+    return this.pages;
+  }
+  public getLocation(): PaginationLocation {
+    return this.location;
+  }
+
+  public isLoading(): boolean {
+    return this.initialLoading || this.loadingNext || this.loadingPrev;
+  }
+  public isInitialLoading(): boolean {
+    return this.initialLoading;
+  }
+  public isLoadingPrev(): boolean {
+    return this.loadingPrev;
+  }
+  public isLoadingNext(): boolean {
+    return this.loadingNext;
+  }
+
+  /**
+   * Returns true when the number of items across all loaded pages is not 0.
+   *
+   * @see isEmpty
+   */
+  public hasItems(): boolean {
+    return !!this.getAllItems().length;
+  }
+
+  /**
+   * Returns true when there aren't any items *and* the state has already done its initial loading.
+   * If you want to know whether there are items regardless of load state, use `hasItems()` instead
+   *
+   * @see hasItems
+   */
+  public isEmpty(): boolean {
+    return !this.isInitialLoading() && !this.hasItems();
+  }
+
+  public hasPrev(): boolean {
+    return !!this.pages[0]?.hasPrev;
+  }
+  public hasNext(): boolean {
+    return !!this.pages[this.pages.length - 1]?.hasNext;
+  }
+
+  /**
+   * Stored state parameters.
+   */
+  public getParams(): any {
+    return this.params;
+  }
+
+  protected getNextPageNumber(): number {
+    const pg = this.pages[this.pages.length - 1]?.number;
+
+    if (pg && !isNaN(pg)) {
+      return pg + 1;
+    } else {
+      return this.location.page;
+    }
+  }
+  protected getPrevPageNumber(): number {
+    const pg = this.pages[0]?.number;
+
+    if (pg && !isNaN(pg)) {
+      // If the calculated page number is less than 1,
+      // return 1 as the prev page (first possible page number)
+      return Math.max(pg - 1, 1);
+    } else {
+      return this.location.page;
+    }
+  }
+
+  protected paramsChanged(newParams): boolean {
+    return Object.keys(newParams).some((key) => this.getParams()[key] !== newParams[key]);
+  }
+
+  protected getAllItems(): T[] {
+    return this.getPages()
+      .map((pg) => pg.items)
+      .flat();
+  }
+}

js/src/forum/ForumApplication.js

@@ -90,7 +90,7 @@ export default class ForumApplication extends Application {
      *
      * @type {DiscussionListState}
      */
-    this.discussions = new DiscussionListState({}, this);
+    this.discussions = new DiscussionListState({});
   }
 
   /**

js/src/forum/components/DiscussionList.js

@@ -3,6 +3,7 @@ import DiscussionListItem from './DiscussionListItem';
 import Button from '../../common/components/Button';
 import LoadingIndicator from '../../common/components/LoadingIndicator';
 import Placeholder from '../../common/components/Placeholder';
+import Discussion from '../../common/models/Discussion';
 
 /**
  * The `DiscussionList` component displays a list of discussions.
@@ -13,37 +14,40 @@ import Placeholder from '../../common/components/Placeholder';
  */
 export default class DiscussionList extends Component {
   view() {
+    /**
+     * @type DiscussionListState
+     */
     const state = this.attrs.state;
 
     const params = state.getParams();
     let loading;
 
-    if (state.isLoading()) {
+    if (state.isInitialLoading() || state.isLoadingNext()) {
       loading = <LoadingIndicator />;
-    } else if (state.moreResults) {
+    } else if (state.hasNext()) {
       loading = Button.component(
         {
           className: 'Button',
-          onclick: state.loadMore.bind(state),
+          onclick: state.loadNext.bind(state),
         },
         app.translator.trans('core.forum.discussion_list.load_more_button')
       );
     }
 
-    if (state.empty()) {
+    if (state.isEmpty()) {
       const text = app.translator.trans('core.forum.discussion_list.empty_text');
       return <div className="DiscussionList">{Placeholder.component({ text })}</div>;
     }
 
     return (
       <div className={'DiscussionList' + (state.isSearchResults() ? ' DiscussionList--searchResults' : '')}>
         <ul className="DiscussionList-discussions">
-          {state.discussions.map((discussion) => {
-            return (
+          {state.getPages().map((pg) => {
+            return pg.items.map((discussion) => (
               <li key={discussion.id()} data-id={discussion.id()}>
                 {DiscussionListItem.component({ discussion, params })}
               </li>
-            );
+            ));
           })}
         </ul>
         <div className="DiscussionList-loadMore">{loading}</div>

js/src/forum/components/IndexPage.js

@@ -37,7 +37,7 @@ export default class IndexPage extends Page {
       app.discussions.clear();
     }
 
-    app.discussions.refreshParams(app.search.params());
+    app.discussions.refreshParams(app.search.params(), m.route.param('page'));
 
     app.history.push('index', app.translator.trans('core.forum.header.back_to_index_tooltip'));
 

js/src/forum/components/NotificationList.js

@@ -12,7 +12,7 @@ import Discussion from '../../common/models/Discussion';
 export default class NotificationList extends Component {
   view() {
     const state = this.attrs.state;
-    const pages = state.getNotificationPages();
+    const pages = state.getPages();
 
     return (
       <div className="NotificationList">
@@ -30,12 +30,12 @@ export default class NotificationList extends Component {
         </div>
 
         <div className="NotificationList-content">
-          {pages.length
-            ? pages.map((notifications) => {
+          {state.hasItems()
+            ? pages.map((page) => {
                 const groups = [];
                 const discussions = {};
 
-                notifications.forEach((notification) => {
+                page.items.forEach((notification) => {
                   const subject = notification.subject();
 
                   if (typeof subject === 'undefined') return;
@@ -84,7 +84,7 @@ export default class NotificationList extends Component {
               })
             : ''}
           {state.isLoading() ? (
-            <LoadingIndicator />
+            <LoadingIndicator className="LoadingIndicator--block" />
           ) : pages.length ? (
             ''
           ) : (
@@ -124,8 +124,8 @@ export default class NotificationList extends Component {
     // by a fraction of a pixel, so we compensate for that.
     const atBottom = Math.abs(scrollParent.scrollHeight - scrollParent.scrollTop - scrollParent.clientHeight) <= 1;
 
-    if (state.hasMoreResults() && !state.isLoading() && atBottom) {
-      state.loadMore();
+    if (state.hasNext() && !state.isLoadingNext() && atBottom) {
+      state.loadNext();
     }
   }