From 6c326a4688e411e48822c4ab45d68d5569ae5598 Mon Sep 17 00:00:00 2001
From: Brian Grinstead <bgrinstead@mozilla.com>
Date: Wed, 3 May 2017 07:31:35 -0700
Subject: [PATCH] Bug 1361429 - Convert FilterButton to functional
 component;r=nchevobbe

MozReview-Commit-ID: 5ILDOVR3GS7

--HG--
extra : rebase_source : ead2ffd56d3cf146481b0215b547b1e4abb167ed
---
 .../components/filter-bar.js                  |  3 +-
 .../components/filter-button.js               | 55 ++++++++-----------
 2 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/devtools/client/webconsole/new-console-output/components/filter-bar.js b/devtools/client/webconsole/new-console-output/components/filter-bar.js
index 7cedf794ffa4..811e2827ee41 100644
--- a/devtools/client/webconsole/new-console-output/components/filter-bar.js
+++ b/devtools/client/webconsole/new-console-output/components/filter-bar.js
@@ -4,7 +4,6 @@
 "use strict";
 
 const {
-  createFactory,
   createClass,
   DOM: dom,
   PropTypes
@@ -22,7 +21,7 @@ const { l10n } = require("devtools/client/webconsole/new-console-output/utils/me
 const {
   MESSAGE_LEVEL
 } = require("../constants");
-const FilterButton = createFactory(require("devtools/client/webconsole/new-console-output/components/filter-button"));
+const FilterButton = require("devtools/client/webconsole/new-console-output/components/filter-button");
 
 const FilterBar = createClass({
 
diff --git a/devtools/client/webconsole/new-console-output/components/filter-button.js b/devtools/client/webconsole/new-console-output/components/filter-button.js
index 7ec322201469..b7bbe31a21d5 100644
--- a/devtools/client/webconsole/new-console-output/components/filter-button.js
+++ b/devtools/client/webconsole/new-console-output/components/filter-button.js
@@ -4,44 +4,37 @@
 "use strict";
 
 const {
-  createClass,
   DOM: dom,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
 const actions = require("devtools/client/webconsole/new-console-output/actions/index");
 
-const FilterButton = createClass({
+FilterButton.displayName = "FilterButton";
 
-  displayName: "FilterButton",
+FilterButton.propTypes = {
+  label: PropTypes.string.isRequired,
+  filterKey: PropTypes.string.isRequired,
+  active: PropTypes.bool.isRequired,
+  dispatch: PropTypes.func.isRequired,
+};
 
-  propTypes: {
-    label: PropTypes.string.isRequired,
-    filterKey: PropTypes.string.isRequired,
-    active: PropTypes.bool.isRequired,
-    dispatch: PropTypes.func.isRequired,
-  },
-
-  onClick: function () {
-    this.props.dispatch(actions.filterToggle(this.props.filterKey));
-  },
-
-  render() {
-    const {active, label, filterKey} = this.props;
-
-    let classList = [
-      "devtools-button",
-      filterKey,
-    ];
-    if (active) {
-      classList.push("checked");
-    }
-
-    return dom.button({
-      "aria-pressed": active === true,
-      className: classList.join(" "),
-      onClick: this.onClick
-    }, label);
+function FilterButton(props) {
+  const {active, label, filterKey, dispatch} = props;
+  let classList = [
+    "devtools-button",
+    filterKey,
+  ];
+  if (active) {
+    classList.push("checked");
   }
-});
+
+  return dom.button({
+    "aria-pressed": active === true,
+    className: classList.join(" "),
+    onClick: () => {
+      dispatch(actions.filterToggle(filterKey));
+    },
+  }, label);
+}
 
 module.exports = FilterButton;