update: forum/components/Post

- attrs has been renamed to elementAttrs
- As subtree retention is now implemented via onbeforeupdate, view no longer needs to return a retain vnode, and as such, has been significantly simplified

js/src/forum/components/Post.js

@@ -10,14 +10,16 @@ import ItemList from '../../common/utils/ItemList';
  * includes a controls dropdown; subclasses must implement `content` and `attrs`
  * methods.
  *
- * ### Props
+ * ### Attrs
  *
  * - `post`
  *
  * @abstract
  */
 export default class Post extends Component {
-  init() {
+  oninit(vnode) {
+    super.oninit(vnode);
+
     this.loading = false;
 
     /**
@@ -27,9 +29,9 @@ export default class Post extends Component {
      * @type {SubtreeRetainer}
      */
     this.subtree = new SubtreeRetainer(
-      () => this.props.post.freshness,
+      () => this.attrs.post.freshness,
       () => {
-        const user = this.props.post.user();
+        const user = this.attrs.post.user();
         return user && user.freshness;
       },
       () => this.controlsOpen
@@ -37,51 +39,52 @@ export default class Post extends Component {
   }
 
   view() {
-    const attrs = this.attrs();
+    const attrs = this.elementAttrs();
 
     attrs.className = this.classes(attrs.className).join(' ');
 
+    const controls = PostControls.controls(this.attrs.post, this).toArray();
+
     return (
       <article {...attrs}>
-        {this.subtree.retain() ||
+        <div>
-          (() => {
+          {this.content()}
-            const controls = PostControls.controls(this.props.post, this).toArray();
+          <aside className="Post-actions">
-
+            <ul>
-            return (
+              {listItems(this.actionItems().toArray())}
-              <div>
+              {controls.length ? (
-                {this.content()}
+                <li>
-                <aside className="Post-actions">
+                  <Dropdown
-                  <ul>
+                    className="Post-controls"
-                    {listItems(this.actionItems().toArray())}
+                    buttonClassName="Button Button--icon Button--flat"
-                    {controls.length ? (
+                    menuClassName="Dropdown-menu--right"
-                      <li>
+                    icon="fas fa-ellipsis-h"
-                        <Dropdown
+                    onshow={() => this.$('.Post-actions').addClass('open')}
-                          className="Post-controls"
+                    onhide={() => this.$('.Post-actions').removeClass('open')}
-                          buttonClassName="Button Button--icon Button--flat"
+                  >
-                          menuClassName="Dropdown-menu--right"
+                    {controls}
-                          icon="fas fa-ellipsis-h"
+                  </Dropdown>
-                          onshow={() => this.$('.Post-actions').addClass('open')}
+                </li>
-                          onhide={() => this.$('.Post-actions').removeClass('open')}
+              ) : (
-                        >
+                ''
-                          {controls}
+              )}
-                        </Dropdown>
+            </ul>
-                      </li>
+          </aside>
-                    ) : (
+          <footer className="Post-footer">
-                      ''
+            <ul>{listItems(this.footerItems().toArray())}</ul>
-                    )}
+          </footer>
-                  </ul>
+        </div>
-                </aside>
-                <footer className="Post-footer">
-                  <ul>{listItems(this.footerItems().toArray())}</ul>
-                </footer>
-              </div>
-            );
-          })()}
       </article>
     );
   }
 
-  config(isInitialized) {
+  onbeforeupdate(vnode) {
+    super.onbeforeupdate(vnode);
+
+    return this.subtree.needsRebuild();
+  }
+
+  onupdate(vnode) {
     const $actions = this.$('.Post-actions');
     const $controls = this.$('.Post-controls');
 
@@ -93,7 +96,7 @@ export default class Post extends Component {
    *
    * @return {Object}
    */
-  attrs() {
+  elementAttrs() {
     return {};
   }
 
@@ -115,8 +118,8 @@ export default class Post extends Component {
   classes(existing) {
     let classes = (existing || '').split(' ').concat(['Post']);
 
-    const user = this.props.post.user();
+    const user = this.attrs.post.user();
-    const discussion = this.props.post.discussion();
+    const discussion = this.attrs.post.discussion();
 
     if (this.loading) {
       classes.push('Post--loading');