From d0ad5ecc6dd69db5c4550d921bc5de99b9a47687 Mon Sep 17 00:00:00 2001
From: Blake Erickson <o.blakeerickson@gmail.com>
Date: Mon, 25 Nov 2019 13:36:00 -0700
Subject: [PATCH] DEV: Remove buffered rendering from group-index-toggle
 (#8399)

* DEV: Remove buffered rendering from group-index-toggle

This is the first step in a refactor to remove all uses of our Buffered
Renderer:

https://github.com/discourse/discourse/blob/01e2d5a6704996930dfc6f927dec2acaddbeaffe/app/assets/javascripts/discourse-common/lib/buffered-render.js.es6#L3

This commit affects the header sorting on the group member and the group
requests pages. It is a refactor only with no change in functionality.
---
 .../components/group-index-toggle.js.es6      | 51 ++++++++++---------
 .../components/group-index-toggle.hbs         |  1 +
 2 files changed, 27 insertions(+), 25 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/templates/components/group-index-toggle.hbs

diff --git a/app/assets/javascripts/discourse/components/group-index-toggle.js.es6 b/app/assets/javascripts/discourse/components/group-index-toggle.js.es6
index 247b7e1829f..f84b9b3d21d 100644
--- a/app/assets/javascripts/discourse/components/group-index-toggle.js.es6
+++ b/app/assets/javascripts/discourse/components/group-index-toggle.js.es6
@@ -1,29 +1,30 @@
 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"],
-    rerenderTriggers: ["order", "desc"],
-
-    buildBuffer(buffer) {
-      buffer.push("<span class='header-contents'>");
-      buffer.push(I18n.t(this.i18nKey));
-
-      if (this.field === this.order) {
-        buffer.push(iconHTML(this.desc ? "chevron-down" : "chevron-up"));
-      }
-      buffer.push("</span>");
-    },
-
-    click() {
-      if (this.order === this.field) {
-        this.set("desc", this.desc ? null : true);
-      } else {
-        this.setProperties({ order: this.field, desc: null });
-      }
+export default Component.extend({
+  tagName: "th",
+  classNames: ["sortable"],
+  chevronIcon: null,
+  toggleProperties() {
+    if (this.order === this.field) {
+      this.set("desc", this.desc ? null : true);
+    } else {
+      this.setProperties({ order: this.field, desc: null });
     }
-  })
-);
+  },
+  toggleChevron() {
+    if (this.order === this.field) {
+      let chevron = iconHTML(this.desc ? "chevron-down" : "chevron-up");
+      this.set("chevronIcon", `${chevron}`.htmlSafe());
+    } else {
+      this.set("chevronIcon", null);
+    }
+  },
+  click() {
+    this.toggleProperties();
+  },
+  didReceiveAttrs() {
+    this._super(...arguments);
+    this.toggleChevron();
+  }
+});
diff --git a/app/assets/javascripts/discourse/templates/components/group-index-toggle.hbs b/app/assets/javascripts/discourse/templates/components/group-index-toggle.hbs
new file mode 100644
index 00000000000..7ea697404f6
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/group-index-toggle.hbs
@@ -0,0 +1 @@
+<span class="header-contents">{{i18n this.i18nKey}}{{chevronIcon}}</span>