ref(ToolbarButton): Remove dispatch

react/features/toolbox/components/Toolbar.web.js

@@ -23,17 +23,6 @@ class Toolbar extends Component {
      * @static
      */
     static propTypes = {
-
-        /**
-         *  Handler for mouse out event.
-         */
-        _onMouseOut: React.PropTypes.func,
-
-        /**
-         * Handler for mouse over event.
-         */
-        _onMouseOver: React.PropTypes.func,
-
         /**
          * Children of current React component.
          */
@@ -44,6 +33,12 @@ class Toolbar extends Component {
          */
         className: React.PropTypes.string,
 
+        /**
+         * Used to dispatch an action when a button is clicked or on mouse
+         * out/in event.
+         */
+        dispatch: React.PropTypes.func,
+
         /**
          * Map with toolbar buttons.
          */
@@ -80,11 +75,11 @@ class Toolbar extends Component {
         return (
             <div
                 className = { `toolbar ${className}` }
-                onMouseOut = { this.props._onMouseOut }
+                onMouseOut = { this._onMouseOut }
-                onMouseOver = { this.props._onMouseOver }>
+                onMouseOver = { this._onMouseOver }>
                 {
                     [ ...this.props.toolbarButtons.entries() ]
-                        .reduce(this._renderToolbarButton, [])
+                    .reduce(this._renderToolbarButton, [])
                 }
                 {
                     this.props.children
@@ -93,6 +88,26 @@ class Toolbar extends Component {
         );
     }
 
+    /**
+     * Dispatches an action signalling that toolbar is no being hovered.
+     *
+     * @protected
+     * @returns {Object} Dispatched action.
+     */
+    _onMouseOut() {
+        this.props.dispatch(setToolbarHovered(false));
+    }
+
+    /**
+     * Dispatches an action signalling that toolbar is now being hovered.
+     *
+     * @protected
+     * @returns {Object} Dispatched action.
+     */
+    _onMouseOver() {
+        this.props.dispatch(setToolbarHovered(true));
+    }
+
     /**
      * Renders toolbar button. Method is passed to reduce function.
      *
@@ -120,11 +135,15 @@ class Toolbar extends Component {
 
         const { onClick, onMount, onUnmount } = button;
 
+        const onClickHandler
+            = (...args) =>
+                onClick(this.props.dispatch, ...args);
+
         acc.push(
             <ToolbarButton
                 button = { button }
                 key = { key }
-                onClick = { onClick }
+                onClick = { onClickHandler }
                 onMount = { onMount }
                 onUnmount = { onUnmount }
                 tooltipPosition = { tooltipPosition } />
@@ -134,35 +153,4 @@ class Toolbar extends Component {
     }
 }
 
-/**
+export default connect()(Toolbar);
- * Maps part of Redux actions to component's props.
- *
- * @param {Function} dispatch - Redux action dispatcher.
- * @private
- * @returns {Object}
- */
-function _mapDispatchToProps(dispatch: Function): Object {
-    return {
-        /**
-         * Dispatches an action signalling that toolbar is no being hovered.
-         *
-         * @protected
-         * @returns {Object} Dispatched action.
-         */
-        _onMouseOut() {
-            dispatch(setToolbarHovered(false));
-        },
-
-        /**
-         * Dispatches an action signalling that toolbar is now being hovered.
-         *
-         * @protected
-         * @returns {Object} Dispatched action.
-         */
-        _onMouseOver() {
-            dispatch(setToolbarHovered(true));
-        }
-    };
-}
-
-export default connect(undefined, _mapDispatchToProps)(Toolbar);

react/features/toolbox/components/ToolbarButton.web.js

@@ -1,7 +1,6 @@
 /* @flow */
 
 import React from 'react';
-import { connect } from 'react-redux';
 
 import { translate } from '../../base/i18n';
 
@@ -37,11 +36,6 @@ class ToolbarButton extends AbstractToolbarButton {
          */
         button: React.PropTypes.object.isRequired,
 
-        /**
-         * Used to dispatch an action when the button is clicked.
-         */
-        dispatch: React.PropTypes.func,
-
         /**
          * Handler for component mount.
          */
@@ -157,11 +151,7 @@ class ToolbarButton extends AbstractToolbarButton {
         } = button;
 
         if (enabled && !unclickable && onClick) {
-            const action = onClick(event);
+            onClick(event);
-
-            if (action) {
-                this.props.dispatch(action);
-            }
         }
     }
 
@@ -244,4 +234,4 @@ class ToolbarButton extends AbstractToolbarButton {
     }
 }
 
-export default translate(connect()(ToolbarButton));
+export default translate(ToolbarButton);

react/features/toolbox/defaultToolbarButtons.js

@@ -22,10 +22,10 @@ const buttons: Object = {
         enabled: true,
         id: 'toolbar_button_add',
         isDisplayed: () => !APP.store.getState()['features/jwt'].isGuest,
-        onClick() {
+        onClick(dispatch) {
             JitsiMeetJS.analytics.sendEvent('toolbar.add.clicked');
 
-            return openAddPeopleDialog();
+            dispatch(openAddPeopleDialog());
         },
         tooltipKey: 'toolbar.addPeople'
     },
@@ -167,10 +167,10 @@ const buttons: Object = {
         // Will be displayed once the SIP calls functionality is detected.
         hidden: true,
         id: 'toolbar_button_dial_out',
-        onClick() {
+        onClick(dispatch) {
             JitsiMeetJS.analytics.sendEvent('toolbar.sip.clicked');
 
-            return openDialOutDialog();
+            dispatch(openDialOutDialog());
         },
         tooltipKey: 'dialOut.dialOut'
     },
@@ -185,11 +185,11 @@ const buttons: Object = {
             return interfaceConfig.filmStripOnly;
         },
         id: 'toolbar_button_fodeviceselection',
-        onClick() {
+        onClick(dispatch) {
             JitsiMeetJS.analytics.sendEvent(
                 'toolbar.fodeviceselection.toggled');
 
-            return openDeviceSelectionDialog();
+            dispatch(openDeviceSelectionDialog());
         },
         sideContainerId: 'settings_container',
         tooltipKey: 'toolbar.Settings'
@@ -270,10 +270,10 @@ const buttons: Object = {
         classNames: [ 'button', 'icon-link' ],
         enabled: true,
         id: 'toolbar_button_link',
-        onClick() {
+        onClick(dispatch) {
             JitsiMeetJS.analytics.sendEvent('toolbar.invite.clicked');
 
-            return openInviteDialog();
+            dispatch(openInviteDialog());
         },
         tooltipKey: 'toolbar.invite'
     },