From 2673cad14280948679d1f94a977e9f868da20858 Mon Sep 17 00:00:00 2001
From: Blake Erickson <o.blakeerickson@gmail.com>
Date: Tue, 26 Nov 2019 15:42:47 -0700
Subject: [PATCH] DEV: Remove buffered rendering from user directory

This is another refactoring in the multi-step process to remove all uses
of our custom Render Buffer.

Previous commit: e0199e80944e55bf0adcd6b60ca811956d8102ce in this
series.

This commit affects the table header sorting on the user directory page.
It is just a refactor and should not change any functionality.
---
 .../components/directory-toggle.js.es6        | 87 ++++++++++---------
 .../templates/components/directory-toggle.hbs |  1 +
 2 files changed, 46 insertions(+), 42 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/templates/components/directory-toggle.hbs

diff --git a/app/assets/javascripts/discourse/components/directory-toggle.js.es6 b/app/assets/javascripts/discourse/components/directory-toggle.js.es6
index 2b761c99b9b..a2dcec81b55 100644
--- a/app/assets/javascripts/discourse/components/directory-toggle.js.es6
+++ b/app/assets/javascripts/discourse/components/directory-toggle.js.es6
@@ -1,48 +1,51 @@
 import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import { iconHTML } from "discourse-common/lib/icon-library";
-import { bufferedRender } from "discourse-common/lib/buffered-render";
 
-export default Component.extend(
-  bufferedRender({
-    tagName: "th",
-    classNames: ["sortable"],
-    attributeBindings: ["title"],
-    rerenderTriggers: ["order", "asc"],
-    labelKey: null,
+export default Component.extend({
+  tagName: "th",
+  classNames: ["sortable"],
+  attributeBindings: ["title"],
+  labelKey: null,
+  chevronIcon: null,
+  columnIcon: null,
 
-    @discourseComputed("field", "labelKey")
-    title(field, labelKey) {
-      if (!labelKey) {
-        labelKey = `directory.${this.field}`;
-      }
-
-      return I18n.t(labelKey + "_long", { defaultValue: I18n.t(labelKey) });
-    },
-
-    buildBuffer(buffer) {
-      const icon = this.icon;
-      if (icon) {
-        buffer.push(iconHTML(icon));
-      }
-
-      const field = this.field;
-      buffer.push(I18n.t(this.labelKey || `directory.${field}`));
-
-      if (field === this.order) {
-        buffer.push(iconHTML(this.asc ? "chevron-up" : "chevron-down"));
-      }
-    },
-
-    click() {
-      const currentOrder = this.order,
-        field = this.field;
-
-      if (currentOrder === field) {
-        this.set("asc", this.asc ? null : true);
-      } else {
-        this.setProperties({ order: field, asc: null });
-      }
+  @discourseComputed("field", "labelKey")
+  title(field, labelKey) {
+    if (!labelKey) {
+      labelKey = `directory.${this.field}`;
     }
-  })
-);
+
+    return I18n.t(labelKey + "_long", { defaultValue: I18n.t(labelKey) });
+  },
+
+  toggleProperties() {
+    if (this.order === this.field) {
+      this.set("asc", this.asc ? null : true);
+    } else {
+      this.setProperties({ order: this.field, asc: null });
+    }
+  },
+  toggleChevron() {
+    if (this.order === this.field) {
+      let chevron = iconHTML(this.asc ? "chevron-up" : "chevron-down");
+      this.set("chevronIcon", `${chevron}`.htmlSafe());
+    } else {
+      this.set("chevronIcon", null);
+    }
+  },
+  click() {
+    this.toggleProperties();
+  },
+  didReceiveAttrs() {
+    this._super(...arguments);
+    this.toggleChevron();
+  },
+  init() {
+    this._super(...arguments);
+    if (this.icon) {
+      let columnIcon = iconHTML(this.icon);
+      this.set("columnIcon", `${columnIcon}`.htmlSafe());
+    }
+  }
+});
diff --git a/app/assets/javascripts/discourse/templates/components/directory-toggle.hbs b/app/assets/javascripts/discourse/templates/components/directory-toggle.hbs
new file mode 100644
index 00000000000..91785f85309
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/directory-toggle.hbs
@@ -0,0 +1 @@
+<span class="header-contents">{{columnIcon}}{{title}}{{chevronIcon}}</span>