Create abstract PaginatedListState for DiscussionList and others (#2781)

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,24 +14,27 @@ 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>;
     }
@@ -38,12 +42,12 @@ export default class DiscussionList extends Component {
     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>