From dbe5449d0c1c27680dc147480207c6fa0830b161 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 10 Dec 2018 17:21:55 +0100
Subject: [PATCH] bring invite buttons back in group member / room list

also put filter field on bottom
---
 src/components/structures/RightPanel.js       | 20 -------------
 .../views/groups/GroupMemberList.js           | 29 ++++++++++++++++++-
 src/components/views/groups/GroupRoomList.js  | 21 +++++++++++++-
 3 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 8fd464e80d..3687764712 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -192,26 +192,6 @@ export default class RightPanel extends React.Component {
             panel = <FilePanel roomId={this.props.roomId} />;
         }
 
-        // TODO: either include this in the DOM again, or move it to other component
-        if (this.props.groupId && this.state.isUserPrivilegedInGroup) {
-            // inviteGroup =
-            isPhaseGroup ? (
-                <AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteToGroupButtonClick}>
-                    <div className="mx_RightPanel_icon" >
-                        <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
-                    </div>
-                    <div className="mx_RightPanel_message">{ _t('Invite to this community') }</div>
-                </AccessibleButton>
-            ) : (
-                <AccessibleButton className="mx_RightPanel_invite" onClick={this.onAddRoomToGroupButtonClick}>
-                    <div className="mx_RightPanel_icon" >
-                        <TintableSvg src="img/icons-room-add.svg" width="35" height="35" />
-                    </div>
-                    <div className="mx_RightPanel_message">{ _t('Add rooms to this community') }</div>
-                </AccessibleButton>
-            );
-        }
-
         const classes = classNames("mx_RightPanel", "mx_fadable", {
             "collapsed": this.props.collapsed,
             "mx_fadable_faded": this.props.disabled,
diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js
index 38c679a5b5..411ed138d4 100644
--- a/src/components/views/groups/GroupMemberList.js
+++ b/src/components/views/groups/GroupMemberList.js
@@ -19,6 +19,9 @@ import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import GroupStore from '../../../stores/GroupStore';
 import PropTypes from 'prop-types';
+import { showGroupInviteDialog } from '../../../GroupAddressPicker';
+import AccessibleButton from '../elements/AccessibleButton';
+import TintableSvg from '../elements/TintableSvg';
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 
@@ -135,6 +138,16 @@ export default React.createClass({
         </TruncatedList>;
     },
 
+    onInviteToGroupButtonClick() {
+        showGroupInviteDialog(this.props.groupId).then(() => {
+            dis.dispatch({
+                action: 'view_right_panel_phase',
+                phase: RightPanel.Phase.GroupMemberList,
+                groupId: this.props.groupId,
+            });
+        });
+    },
+
     render: function() {
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         if (this.state.fetching || this.state.fetchingInvitedMembers) {
@@ -162,13 +175,27 @@ export default React.createClass({
                 { this.makeGroupMemberTiles(this.state.searchQuery, this.state.invitedMembers) }
             </div> : <div />;
 
+        let inviteButton;
+        if (GroupStore.isUserPrivileged(this.props.groupId)) {
+            inviteButton = (<AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteToGroupButtonClick}>
+                <div className="mx_RightPanel_icon" >
+                    <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
+                </div>
+                <div className="mx_RightPanel_message">{ _t('Invite to this community') }</div>
+            </AccessibleButton>);
+        }
+
         return (
+
+
+
             <div className="mx_MemberList">
-                { inputBox }
+                { inviteButton }
                 <GeminiScrollbarWrapper autoshow={true}>
                     { joined }
                     { invited }
                 </GeminiScrollbarWrapper>
+                { inputBox }
             </div>
         );
     },
diff --git a/src/components/views/groups/GroupRoomList.js b/src/components/views/groups/GroupRoomList.js
index cfd2b806d4..968e10eb61 100644
--- a/src/components/views/groups/GroupRoomList.js
+++ b/src/components/views/groups/GroupRoomList.js
@@ -18,6 +18,9 @@ import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import GroupStore from '../../../stores/GroupStore';
 import PropTypes from 'prop-types';
+import { showGroupAddRoomDialog } from '../../../GroupAddressPicker';
+import AccessibleButton from '../elements/AccessibleButton';
+import TintableSvg from '../elements/TintableSvg';
 
 const INITIAL_LOAD_NUM_ROOMS = 30;
 
@@ -90,6 +93,12 @@ export default React.createClass({
         this.setState({ searchQuery: ev.target.value });
     },
 
+    onAddRoomToGroupButtonClick() {
+        showGroupAddRoomDialog(this.props.groupId).then(() => {
+            this.forceUpdate();
+        });
+    },
+
     makeGroupRoomTiles: function(query) {
         const GroupRoomTile = sdk.getComponent("groups.GroupRoomTile");
         query = (query || "").toLowerCase();
@@ -120,6 +129,15 @@ export default React.createClass({
             return null;
         }
 
+        let inviteButton;
+        if (GroupStore.isUserPrivileged(this.props.groupId)) {
+            inviteButton = (<AccessibleButton className="mx_RightPanel_invite" onClick={this.onAddRoomToGroupButtonClick}>
+                    <div className="mx_RightPanel_icon" >
+                        <TintableSvg src="img/icons-room-add.svg" width="35" height="35" />
+                    </div>
+                    <div className="mx_RightPanel_message">{ _t('Add rooms to this community') }</div>
+                </AccessibleButton>);
+        }
         const inputBox = (
             <form autoComplete="off">
                 <input className="mx_GroupRoomList_query" id="mx_GroupRoomList_query" type="text"
@@ -132,13 +150,14 @@ export default React.createClass({
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         return (
             <div className="mx_GroupRoomList">
-                { inputBox }
+                { inviteButton }
                 <GeminiScrollbarWrapper autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
                     <TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt}
                             createOverflowElement={this._createOverflowTile}>
                         { this.makeGroupRoomTiles(this.state.searchQuery) }
                     </TruncatedList>
                 </GeminiScrollbarWrapper>
+                { inputBox }
             </div>
         );
     },