[1.x] [extensibility] refactor(core, flags): improve & use extensibility of CommentPost & Post (#4047)

* refactor(core): improve extensibility of `CommentPost`

* refactor(core): rename method to more appropriate name

* refactor(core): further improve extensibility of `CommentPost`

* refactor(core): improve extensibility of `Post`

* refactor(flags): use new extensibility for flagged posts

Author: DavideIadeluca

extensions/flags/js/src/forum/addFlagsToPosts.js

@@ -75,23 +75,25 @@ export default function () {
     return items;
   };
 
-  extend(Post.prototype, 'content', function (vdom) {
+  extend(Post.prototype, 'viewItems', function (items) {
     const post = this.attrs.post;
     const flags = post.flags();
 
     if (!flags.length) return;
 
     if (post.isHidden()) this.revealContent = true;
 
-    vdom.unshift(
+    items.add(
+      'flagged',
       <div className="Post-flagged">
         <div className="Post-flagged-flags">
           {flags.map((flag) => (
             <div className="Post-flagged-flag">{this.flagReason(flag)}</div>
           ))}
         </div>
         <div className="Post-flagged-actions">{this.flagActionItems().toArray()}</div>
-      </div>
+      </div>,
+      110
     );
   });
 

framework/core/js/src/forum/components/CommentPost.js

@@ -47,14 +47,35 @@ export default class CommentPost extends Post {
   }
 
   content() {
-    return super.content().concat([
+    return super.content().concat(this.contentItems().toArray());
+  }
+
+  contentItems() {
+    const items = new ItemList();
+
+    items.add(
+      'header',
       <header className="Post-header">
         <ul>{listItems(this.headerItems().toArray())}</ul>
       </header>,
-      <div className="Post-body">
-        {this.isEditing() ? <ComposerPostPreview className="Post-preview" composer={app.composer} /> : m.trust(this.attrs.post.contentHtml())}
-      </div>,
-    ]);
+      100
+    );
+
+    items.add('body', <div className="Post-body">{this.bodyItems().toArray()}</div>, 90);
+
+    return items;
+  }
+
+  bodyItems() {
+    const items = new ItemList();
+
+    items.add(
+      'content',
+      this.isEditing() ? <ComposerPostPreview className="Post-preview" composer={app.composer} /> : m.trust(this.attrs.post.contentHtml()),
+      100
+    );
+
+    return items;
   }
 
   refreshContent() {

framework/core/js/src/forum/components/Post.tsx

@@ -3,7 +3,7 @@ import Component, { ComponentAttrs } from '../../common/Component';
 import SubtreeRetainer from '../../common/utils/SubtreeRetainer';
 import Dropdown from '../../common/components/Dropdown';
 import PostControls from '../utils/PostControls';
-import listItems from '../../common/helpers/listItems';
+import listItems, { ModdedChildrenWithItemName } from '../../common/helpers/listItems';
 import ItemList from '../../common/utils/ItemList';
 import type PostModel from '../../common/models/Post';
 import LoadingIndicator from '../../common/components/LoadingIndicator';
@@ -55,34 +55,46 @@ export default abstract class Post<CustomAttrs extends IPostAttrs = IPostAttrs>
 
     return (
       <article {...attrs}>
-        <div>
-          {this.loading ? <LoadingIndicator /> : this.content()}
-          <aside className="Post-actions">
-            <ul>
-              {listItems(this.actionItems().toArray())}
-              {!!controls.length && (
-                <li>
-                  <Dropdown
-                    className="Post-controls"
-                    buttonClassName="Button Button--icon Button--flat"
-                    menuClassName="Dropdown-menu--right"
-                    icon="fas fa-ellipsis-h"
-                    onshow={() => this.$('.Post-controls').addClass('open')}
-                    onhide={() => this.$('.Post-controls').removeClass('open')}
-                    accessibleToggleLabel={app.translator.trans('core.forum.post_controls.toggle_dropdown_accessible_label')}
-                  >
-                    {controls}
-                  </Dropdown>
-                </li>
-              )}
-            </ul>
-          </aside>
-          <footer className="Post-footer">{footerItems.length ? <ul>{listItems(footerItems)}</ul> : null}</footer>
-        </div>
+        <div>{this.viewItems(controls, footerItems).toArray()}</div>
       </article>
     );
   }
 
+  viewItems(controls: Mithril.Children[], footerItems: ModdedChildrenWithItemName[]): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add('content', this.loading ? <LoadingIndicator /> : this.content(), 100);
+
+    items.add(
+      'actions',
+      <aside className="Post-actions">
+        <ul>
+          {listItems(this.actionItems().toArray())}
+          {!!controls.length && (
+            <li>
+              <Dropdown
+                className="Post-controls"
+                buttonClassName="Button Button--icon Button--flat"
+                menuClassName="Dropdown-menu--right"
+                icon="fas fa-ellipsis-h"
+                onshow={() => this.$('.Post-controls').addClass('open')}
+                onhide={() => this.$('.Post-controls').removeClass('open')}
+                accessibleToggleLabel={app.translator.trans('core.forum.post_controls.toggle_dropdown_accessible_label')}
+              >
+                {controls}
+              </Dropdown>
+            </li>
+          )}
+        </ul>
+      </aside>,
+      90
+    );
+
+    items.add('footer', <footer className="Post-footer">{footerItems.length > 0 ? <ul>{listItems(footerItems)}</ul> : <ul></ul>}</footer>, 80);
+
+    return items;
+  }
+
   onbeforeupdate(vnode: Mithril.VnodeDOM<CustomAttrs, this>) {
     super.onbeforeupdate(vnode);
 
@@ -147,7 +159,7 @@ export default abstract class Post<CustomAttrs extends IPostAttrs = IPostAttrs>
   /**
    * Build an item list for the post's footer.
    */
-  footerItems(): ItemList<Mithril.Children> {
-    return new ItemList();
+  footerItems(): ItemList<ModdedChildrenWithItemName> {
+    return new ItemList<ModdedChildrenWithItemName>();
   }
 }