Bug 1289258 - Part 1: Get dispatch via props in filter components. r=bgrins draft
authorLin Clark <lclark@mozilla.com>
Mon, 25 Jul 2016 20:16:06 -0400
changeset 398713 e598f18c0d765090a7c83d433cb5fc169914c0e4
parent 398604 6cf0089510fad8deb866136f5b92bbced9498447
child 398714 20427813d0e4deb985317efefe66c655bb05453d
push id25607
push userbmo:lclark@mozilla.com
push dateTue, 09 Aug 2016 16:51:27 +0000
reviewersbgrins
bugs1289258
milestone51.0a1
Bug 1289258 - Part 1: Get dispatch via props in filter components. r=bgrins
devtools/client/webconsole/new-console-output/components/filter-bar.js
devtools/client/webconsole/new-console-output/components/filter-toggle-button.js
--- a/devtools/client/webconsole/new-console-output/components/filter-bar.js
+++ b/devtools/client/webconsole/new-console-output/components/filter-bar.js
@@ -9,49 +9,48 @@ const {
   DOM: dom,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { getAllFilters } = require("devtools/client/webconsole/new-console-output/selectors/filters");
 const { getAllUi } = require("devtools/client/webconsole/new-console-output/selectors/ui");
 const messagesActions = require("devtools/client/webconsole/new-console-output/actions/messages");
 const uiActions = require("devtools/client/webconsole/new-console-output/actions/ui");
-const { store } = require("devtools/client/webconsole/new-console-output/store");
 const {
   SEVERITY_FILTER
 } = require("../constants");
 const FilterToggleButton = createFactory(require("devtools/client/webconsole/new-console-output/components/filter-toggle-button").FilterToggleButton);
 
 const FilterBar = createClass({
 
   displayName: "FilterBar",
 
   propTypes: {
     filter: PropTypes.object.isRequired,
     ui: PropTypes.object.isRequired
   },
 
   onClearOutputButtonClick: function () {
-    store.dispatch(messagesActions.messagesClear());
+    this.props.dispatch(messagesActions.messagesClear());
   },
 
   onToggleFilterConfigBarButtonClick: function () {
-    store.dispatch(uiActions.filterBarToggle());
+    this.props.dispatch(uiActions.filterBarToggle());
   },
 
   onClearFiltersButtonClick: function () {
-    store.dispatch(messagesActions.filtersClear());
+    this.props.dispatch(messagesActions.filtersClear());
   },
 
   onSearchInput: function (e) {
-    store.dispatch(messagesActions.messagesSearch(e.target.value));
+    this.props.dispatch(messagesActions.messagesSearch(e.target.value));
   },
 
   render() {
-    const {filter, ui} = this.props;
+    const {dispatch, filter, ui} = this.props;
     let configFilterBarVisible = ui.configFilterBarVisible;
     let children = [];
 
     children.push(dom.div({className: "devtools-toolbar webconsole-filterbar-primary"},
       dom.button({
         className: "devtools-button devtools-clear-icon",
         title: "Clear output",
         onClick: this.onClearOutputButtonClick
@@ -73,32 +72,40 @@ const FilterBar = createClass({
 
     if (configFilterBarVisible) {
       children.push(
         dom.div({className: "devtools-toolbar"},
           FilterToggleButton({
             active: filter.error,
             label: "Errors",
             filterType: SEVERITY_FILTER,
-            filterKey: "error"}),
+            filterKey: "error",
+            dispatch
+          }),
           FilterToggleButton({
             active: filter.warn,
             label: "Warnings",
             filterType: SEVERITY_FILTER,
-            filterKey: "warn"}),
+            filterKey: "warn",
+            dispatch
+          }),
           FilterToggleButton({
             active: filter.log,
             label: "Logs",
             filterType: SEVERITY_FILTER,
-            filterKey: "log"}),
+            filterKey: "log",
+            dispatch
+          }),
           FilterToggleButton({
             active: filter.info,
             label: "Info",
             filterType: SEVERITY_FILTER,
-            filterKey: "info"})
+            filterKey: "info",
+            dispatch
+          })
         )
       );
     }
 
     if (ui.filteredMessageVisible) {
       children.push(
         dom.div({className: "devtools-toolbar"},
           dom.span({
--- a/devtools/client/webconsole/new-console-output/components/filter-toggle-button.js
+++ b/devtools/client/webconsole/new-console-output/components/filter-toggle-button.js
@@ -3,36 +3,36 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 const {
   createClass,
   DOM: dom,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
-const { store } = require("devtools/client/webconsole/new-console-output/store");
 const actions = require("devtools/client/webconsole/new-console-output/actions/messages");
 const {
   SEVERITY_FILTER
 } = require("../constants");
 
 const FilterToggleButton = createClass({
 
   displayName: "FilterToggleButton",
 
   propTypes: {
     label: PropTypes.string.isRequired,
     filterType: PropTypes.string.isRequired,
     filterKey: PropTypes.string.isRequired,
     active: PropTypes.bool.isRequired,
+    dispatch: PropTypes.func.isRequired,
   },
 
   onClick: function () {
     if (this.props.filterType === SEVERITY_FILTER) {
-      store.dispatch(actions.severityFilter(
+      this.props.dispatch(actions.severityFilter(
         this.props.filterKey, !this.props.active));
     }
   },
 
   render() {
     const {label, active} = this.props;
 
     let classList = ["menu-filter-button"];