From 955ca6cd2b19dfab7cc30b2303ba05f9885876b3 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 29 Sep 2017 17:59:24 +0100
Subject: [PATCH] Implement button to remove a room from a group

NB: This doesn't provide any feedback to the user. We should use a GroupSummaryStore-style component to refresh the view after a successful hit to the API. This could affect the summary view as well, because when rooms are removed from a group, they are also removed from the summary (if necessary).
---
 src/components/views/groups/GroupRoomTile.js | 10 ++++++++++
 src/groups.js                                |  4 ++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/views/groups/GroupRoomTile.js b/src/components/views/groups/GroupRoomTile.js
index 452f862d16..1081890f40 100644
--- a/src/components/views/groups/GroupRoomTile.js
+++ b/src/components/views/groups/GroupRoomTile.js
@@ -49,6 +49,13 @@ const GroupRoomTile = React.createClass({
         });
     },
 
+    onDeleteClick: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.context.matrixClient
+            .removeRoomFromGroup(this.props.groupId, this.props.groupRoom.roomId);
+    },
+
     render: function() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
@@ -76,6 +83,9 @@ const GroupRoomTile = React.createClass({
                 <div className="mx_GroupRoomTile_name">
                     { name }
                 </div>
+                <AccessibleButton className="mx_GroupRoomTile_delete" onClick={this.onDeleteClick}>
+                    <img src="img/cancel-small.svg" />
+                </AccessibleButton>
             </AccessibleButton>
         );
     },
diff --git a/src/groups.js b/src/groups.js
index 2ff95f7d65..69871c45e9 100644
--- a/src/groups.js
+++ b/src/groups.js
@@ -24,8 +24,7 @@ export const GroupMemberType = PropTypes.shape({
 
 export const GroupRoomType = PropTypes.shape({
     name: PropTypes.string,
-    // TODO: API doesn't return this yet
-    // roomId: PropTypes.string.isRequired,
+    roomId: PropTypes.string.isRequired,
     canonicalAlias: PropTypes.string,
     avatarUrl: PropTypes.string,
 });
@@ -41,6 +40,7 @@ export function groupMemberFromApiObject(apiObject) {
 export function groupRoomFromApiObject(apiObject) {
     return {
         name: apiObject.name,
+        roomId: apiObject.room_id,
         canonicalAlias: apiObject.canonical_alias,
         avatarUrl: apiObject.avatar_url,
     };