perf(flags): add pagination to flags list (#3931)

extensions/flags/js/src/forum/components/FlagList.tsx

@@ -8,6 +8,8 @@ import HeaderListItem from 'flarum/forum/components/HeaderListItem';
 import type Mithril from 'mithril';
 import type Post from 'flarum/common/models/Post';
 import type FlagListState from '../states/FlagListState';
+import type Flag from '../models/Flag';
+import { Page } from 'flarum/common/states/PaginatedListState';
 
 export interface IFlagListAttrs extends ComponentAttrs {
   state: FlagListState;
@@ -16,49 +18,55 @@ export interface IFlagListAttrs extends ComponentAttrs {
 export default class FlagList<CustomAttrs extends IFlagListAttrs = IFlagListAttrs> extends Component<CustomAttrs, FlagListState> {
   oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
     super.oninit(vnode);
-    this.state = this.attrs.state;
   }
 
   view() {
-    const flags = this.state.cache || [];
+    const state = this.attrs.state;
 
     return (
       <HeaderList
         className="FlagList"
         title={app.translator.trans('flarum-flags.forum.flagged_posts.title')}
-        hasItems={flags.length}
-        loading={this.state.loading}
+        hasItems={state.hasItems()}
+        loading={state.isLoading()}
         emptyText={app.translator.trans('flarum-flags.forum.flagged_posts.empty_text')}
+        loadMore={() => state.hasNext() && !state.isLoadingNext() && state.loadNext()}
       >
-        <ul className="HeaderListGroup-content">
-          {!this.state.loading &&
-            flags.map((flag) => {
-              const post = flag.post() as Post;
-
-              return (
-                <li>
-                  <HeaderListItem
-                    className="Flag"
-                    avatar={<Avatar user={post.user() || null} />}
-                    icon="fas fa-flag"
-                    content={app.translator.trans('flarum-flags.forum.flagged_posts.item_text', {
-                      username: username(post.user()),
-                      em: <em />,
-                      discussion: post.discussion().title(),
-                    })}
-                    excerpt={post.contentPlain()}
-                    datetime={flag.createdAt()}
-                    href={app.route.post(post)}
-                    onclick={(e: MouseEvent) => {
-                      app.flags.index = post;
-                      e.redraw = false;
-                    }}
-                  />
-                </li>
-              );
-            })}
-        </ul>
+        <ul className="HeaderListGroup-content">{this.content(state)}</ul>
       </HeaderList>
     );
   }
+
+  content(state: FlagListState) {
+    if (!state.isLoading() && state.hasItems()) {
+      return state.getPages().map((page: Page<Flag>) => {
+        return page.items.map((flag: Flag) => {
+          const post = flag.post() as Post;
+
+          return (
+            <li>
+              <HeaderListItem
+                className="Flag"
+                avatar={<Avatar user={post.user() || null} />}
+                icon="fas fa-flag"
+                content={app.translator.trans('flarum-flags.forum.flagged_posts.item_text', {
+                  username: username(post.user()),
+                  em: <em />,
+                  discussion: post.discussion().title(),
+                })}
+                excerpt={post.contentPlain()}
+                datetime={flag.createdAt()}
+                href={app.route.post(post)}
+                onclick={(e: MouseEvent) => {
+                  e.redraw = false;
+                }}
+              />
+            </li>
+          );
+        });
+      });
+    }
+
+    return null;
+  }
 }

extensions/flags/js/src/forum/components/FlagsDropdown.tsx

@@ -25,7 +25,7 @@ export default class FlagsDropdown<CustomAttrs extends IFlagsDropdownAttrs = IFl
   }
 
   getUnreadCount() {
-    return app.flags.cache ? app.flags.cache.length : app.forum.attribute<number>('flagCount');
+    return app.forum.attribute<number>('flagCount');
   }
 
   getNewCount() {

extensions/flags/js/src/forum/states/FlagListState.tsx

@@ -1,39 +1,33 @@
 import type ForumApplication from 'flarum/forum/ForumApplication';
 import type Flag from '../models/Flag';
-import type Post from 'flarum/common/models/Post';
+import PaginatedListState from 'flarum/common/states/PaginatedListState';
 
-export default class FlagListState {
+export default class FlagListState extends PaginatedListState<Flag> {
   public app: ForumApplication;
-  public loading = false;
-  public cache: Flag[] | null = null;
-  public index: Post | false | null = null;
 
   constructor(app: ForumApplication) {
+    super({}, 1, null);
     this.app = app;
   }
 
+  get type(): string {
+    return 'flags';
+  }
+
   /**
    * Load flags into the application's cache if they haven't already
    * been loaded.
    */
-  load() {
-    if (this.cache && !this.app.session.user!.attribute<number>('newFlagCount')) {
-      return;
+  load(): Promise<void> {
+    if (this.app.session.user?.attribute<number>('newFlagCount')) {
+      this.pages = [];
+      this.location = { page: 1 };
     }
 
-    this.loading = true;
-    m.redraw();
+    if (this.pages.length > 0) {
+      return Promise.resolve();
+    }
 
-    this.app.store
-      .find<Flag[]>('flags')
-      .then((flags) => {
-        this.app.session.user!.pushAttributes({ newFlagCount: 0 });
-        this.cache = flags.sort((a, b) => b.createdAt()!.getTime() - a.createdAt()!.getTime());
-      })
-      .catch(() => {})
-      .then(() => {
-        this.loading = false;
-        m.redraw();
-      });
+    return super.loadNext();
   }
 }