diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index ff83e3c9..c58d3c62 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -34,6 +34,7 @@ class HeaderButton extends React.Component { } onClick(ev) { + Analytics.trackEvent(...this.props.analytics); dis.dispatch({ action: 'view_right_panel_phase', phase: this.props.clickPhase, @@ -60,11 +61,19 @@ class HeaderButton extends React.Component { } HeaderButton.propTypes = { + // If currentPhase is one of the specified phases, the button will be highlighted phases: PropTypes.arrayOf(PropTypes.string).isRequired, + // The currentPhase of the RightPanel currentPhase: PropTypes.string.isRequired, + // The phase to swap to when the button is clicked clickPhase: PropTypes.string.isRequired, + // The source file of the icon to display iconSrc: PropTypes.string.isRequired, + + // The badge to display above the icon badge: PropTypes.node, + // The parameters to track the click event + analytics: PropTypes.arrayOf(PropTypes.string).isRequired, }; module.exports = React.createClass({ @@ -112,21 +121,6 @@ module.exports = React.createClass({ } }, - onMemberListButtonClick: function() { - Analytics.trackEvent('Right Panel', 'Member List Button', 'click'); - this.setState({ phase: this.Phase.RoomMemberList }); - }, - - onFileListButtonClick: function() { - Analytics.trackEvent('Right Panel', 'File List Button', 'click'); - this.setState({ phase: this.Phase.FilePanel }); - }, - - onNotificationListButtonClick: function() { - Analytics.trackEvent('Right Panel', 'Notification List Button', 'click'); - this.setState({ phase: this.Phase.NotificationPanel }); - }, - onCollapseClick: function() { dis.dispatch({ action: 'hide_right_panel', @@ -253,16 +247,19 @@ module.exports = React.createClass({ clickPhase={this.Phase.RoomMemberList} currentPhase={this.state.phase} badge={membersBadge} + analytics={['Right Panel', 'Member List Button', 'click']} />, , , ]; }