Merge pull request matrix-org#2906 from matrix-org/bwindels/togglehea…

…derbutton

Fix having to click the member list button twice to show it after having changed room.

src/components/structures/MatrixChat.js

@@ -565,20 +565,6 @@ export default React.createClass({
                     },
                 });
                 break;
-            case 'view_user':
-                // FIXME: ugly hack to expand the RightPanel and then re-dispatch.
-                if (this.state.collapsedRhs) {
-                    setTimeout(()=>{
-                        dis.dispatch({
-                            action: 'show_right_panel',
-                        });
-                        dis.dispatch({
-                            action: 'view_user',
-                            member: payload.member,
-                        });
-                    }, 0);
-                }
-                break;
             case 'view_room':
                 // Takes either a room ID or room alias: if switching to a room the client is already
                 // known to be in (eg. user clicks on a room in the recents panel), supply the ID

src/components/views/right_panel/GroupHeaderButtons.js

@@ -19,23 +19,30 @@ limitations under the License.
 
 import React from 'react';
 import { _t } from '../../../languageHandler';
-import dis from '../../../dispatcher';
 import HeaderButton from './HeaderButton';
 import HeaderButtons from './HeaderButtons';
 import RightPanel from '../../structures/RightPanel';
 
+const GROUP_PHASES = [
+    RightPanel.Phase.GroupMemberInfo,
+    RightPanel.Phase.GroupMemberList,
+];
+const ROOM_PHASES = [
+    RightPanel.Phase.GroupRoomList,
+    RightPanel.Phase.GroupRoomInfo,
+];
+
 export default class GroupHeaderButtons extends HeaderButtons {
     constructor(props) {
         super(props, RightPanel.Phase.GroupMemberList);
+        this._onMembersClicked = this._onMembersClicked.bind(this);
+        this._onRoomsClicked = this._onRoomsClicked.bind(this);
     }
 
     onAction(payload) {
         super.onAction(payload);
 
         if (payload.action === "view_user") {
-            dis.dispatch({
-                action: 'show_right_panel',
-            });
             if (payload.member) {
                 this.setPhase(RightPanel.Phase.RoomMemberInfo, {member: payload.member});
             } else {
@@ -54,27 +61,26 @@ export default class GroupHeaderButtons extends HeaderButtons {
         }
     }
 
-    renderButtons() {
-        const groupPhases = [
-            RightPanel.Phase.GroupMemberInfo,
-            RightPanel.Phase.GroupMemberList,
-        ];
-        const roomPhases = [
-            RightPanel.Phase.GroupRoomList,
-            RightPanel.Phase.GroupRoomInfo,
-        ];
+    _onMembersClicked() {
+        this.togglePhase(RightPanel.Phase.GroupMemberList, GROUP_PHASES);
+    }
+
+    _onRoomsClicked() {
+        this.togglePhase(RightPanel.Phase.GroupRoomList, ROOM_PHASES);
+    }
 
+    renderButtons() {
         return [
             <HeaderButton key="groupMembersButton" name="groupMembersButton"
                 title={_t('Members')}
-                isHighlighted={this.isPhase(groupPhases)}
-                clickPhase={RightPanel.Phase.GroupMemberList}
+                isHighlighted={this.isPhase(GROUP_PHASES)}
+                onClick={this._onMembersClicked}
                 analytics={['Right Panel', 'Group Member List Button', 'click']}
             />,
             <HeaderButton key="roomsButton" name="roomsButton"
                 title={_t('Rooms')}
-                isHighlighted={this.isPhase(roomPhases)}
-                clickPhase={RightPanel.Phase.GroupRoomList}
+                isHighlighted={this.isPhase(ROOM_PHASES)}
+                onClick={this._onRoomsClicked}
                 analytics={['Right Panel', 'Group Room List Button', 'click']}
             />,
         ];

src/components/views/right_panel/HeaderButton.js

@@ -20,7 +20,6 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import dis from '../../../dispatcher';
 import Analytics from '../../../Analytics';
 import AccessibleButton from '../elements/AccessibleButton';
 
@@ -32,11 +31,7 @@ export default class HeaderButton extends React.Component {
 
     onClick(ev) {
         Analytics.trackEvent(...this.props.analytics);
-        dis.dispatch({
-            action: 'view_right_panel_phase',
-            phase: this.props.clickPhase,
-            fromHeader: true,
-        });
+        this.props.onClick();
     }
 
     render() {

src/components/views/right_panel/HeaderButtons.js

@@ -40,14 +40,36 @@ export default class HeaderButtons extends React.Component {
         dis.unregister(this.dispatcherRef);
     }
 
+    componentDidUpdate(prevProps) {
+        if (!prevProps.collapsedRhs && this.props.collapsedRhs) {
+            this.setState({
+                phase: null,
+            });
+        }
+    }
+
     setPhase(phase, extras) {
-        // TODO: delay?
+        if (this.props.collapsedRhs) {
+            dis.dispatch({
+                action: 'show_right_panel',
+            });
+        }
         dis.dispatch(Object.assign({
             action: 'view_right_panel_phase',
             phase: phase,
         }, extras));
     }
 
+    togglePhase(phase, validPhases = [phase]) {
+        if (validPhases.includes(this.state.phase)) {
+            dis.dispatch({
+                action: 'hide_right_panel',
+            });
+        } else {
+            this.setPhase(phase);
+        }
+    }
+
     isPhase(phases) {
         if (this.props.collapsedRhs) {
             return false;
@@ -61,28 +83,9 @@ export default class HeaderButtons extends React.Component {
 
     onAction(payload) {
         if (payload.action === "view_right_panel_phase") {
-            // only actions coming from header buttons should collapse the right panel
-            if (this.state.phase === payload.phase && payload.fromHeader) {
-                dis.dispatch({
-                    action: 'hide_right_panel',
-                });
-                this.setState({
-                    phase: null,
-                });
-            } else {
-                if (this.props.collapsedRhs && payload.fromHeader) {
-                    dis.dispatch({
-                        action: 'show_right_panel',
-                    });
-                    // emit payload again as the RightPanel didn't exist up
-                    // till show_right_panel, just without the fromHeader flag
-                    // as that would hide the right panel again
-                    dis.dispatch(Object.assign({}, payload, {fromHeader: false}));
-                }
-                this.setState({
-                    phase: payload.phase,
-                });
-            }
+            this.setState({
+                phase: payload.phase,
+            });
         }
     }
 

src/components/views/right_panel/RoomHeaderButtons.js

@@ -19,28 +19,33 @@ limitations under the License.
 
 import React from 'react';
 import { _t } from '../../../languageHandler';
-import dis from '../../../dispatcher';
 import HeaderButton from './HeaderButton';
 import HeaderButtons from './HeaderButtons';
 import RightPanel from '../../structures/RightPanel';
 
+const MEMBER_PHASES = [
+    RightPanel.Phase.RoomMemberList,
+    RightPanel.Phase.RoomMemberInfo,
+    RightPanel.Phase.Room3pidMemberInfo,
+];
+
 export default class RoomHeaderButtons extends HeaderButtons {
     constructor(props) {
         super(props, RightPanel.Phase.RoomMemberList);
+        this._onMembersClicked = this._onMembersClicked.bind(this);
+        this._onFilesClicked = this._onFilesClicked.bind(this);
+        this._onNotificationsClicked = this._onNotificationsClicked.bind(this);
     }
 
     onAction(payload) {
         super.onAction(payload);
         if (payload.action === "view_user") {
-            dis.dispatch({
-                action: 'show_right_panel',
-            });
             if (payload.member) {
                 this.setPhase(RightPanel.Phase.RoomMemberInfo, {member: payload.member});
             } else {
                 this.setPhase(RightPanel.Phase.RoomMemberList);
             }
-        } else if (payload.action === "view_room") {
+        } else if (payload.action === "view_room" && !this.props.collapsedRhs) {
             this.setPhase(RightPanel.Phase.RoomMemberList);
         } else if (payload.action === "view_3pid_invite") {
             if (payload.event) {
@@ -51,30 +56,36 @@ export default class RoomHeaderButtons extends HeaderButtons {
         }
     }
 
-    renderButtons() {
-        const membersPhases = [
-            RightPanel.Phase.RoomMemberList,
-            RightPanel.Phase.RoomMemberInfo,
-            RightPanel.Phase.Room3pidMemberInfo,
-        ];
+    _onMembersClicked() {
+        this.togglePhase(RightPanel.Phase.RoomMemberList, MEMBER_PHASES);
+    }
 
+    _onFilesClicked() {
+        this.togglePhase(RightPanel.Phase.FilePanel);
+    }
+
+    _onNotificationsClicked() {
+        this.togglePhase(RightPanel.Phase.NotificationPanel);
+    }
+
+    renderButtons() {
         return [
             <HeaderButton key="membersButton" name="membersButton"
                 title={_t('Members')}
-                isHighlighted={this.isPhase(membersPhases)}
-                clickPhase={RightPanel.Phase.RoomMemberList}
+                isHighlighted={this.isPhase(MEMBER_PHASES)}
+                onClick={this._onMembersClicked}
                 analytics={['Right Panel', 'Member List Button', 'click']}
             />,
             <HeaderButton key="filesButton" name="filesButton"
                 title={_t('Files')}
                 isHighlighted={this.isPhase(RightPanel.Phase.FilePanel)}
-                clickPhase={RightPanel.Phase.FilePanel}
+                onClick={this._onFilesClicked}
                 analytics={['Right Panel', 'File List Button', 'click']}
             />,
             <HeaderButton key="notifsButton" name="notifsButton"
                 title={_t('Notifications')}
                 isHighlighted={this.isPhase(RightPanel.Phase.NotificationPanel)}
-                clickPhase={RightPanel.Phase.NotificationPanel}
+                onClick={this._onNotificationsClicked}
                 analytics={['Right Panel', 'Notification List Button', 'click']}
             />,
         ];