From 3f9d20de97edd947d496641698273fbdd5ceecf3 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 22 Sep 2017 15:55:42 +0100
Subject: [PATCH] Implement removal function of features users/rooms

With the appeareance of a "X" in the top right of each featured item when editing.

NB: No reloading of summary is done after adding/removing a user/room. The plan is to better than threading a callback all the way down.
---
 src/components/structures/GroupView.js | 86 +++++++++++++++++++++++++-
 src/i18n/strings/en_EN.json            |  6 +-
 2 files changed, 89 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 422b822df3..f00dc59e0b 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -111,7 +111,11 @@ const CategoryRoomList = React.createClass({
             </AccessibleButton>) : <div />;
 
         const roomNodes = this.props.rooms.map((r) => {
-            return <FeaturedRoom key={r.room_id} summaryInfo={r} />;
+            return <FeaturedRoom
+                key={r.room_id}
+                groupId={this.props.groupId}
+                editing={this.props.editing}
+                summaryInfo={r}/>;
         });
 
         let catHeader = <div />;
@@ -131,6 +135,8 @@ const FeaturedRoom = React.createClass({
 
     props: {
         summaryInfo: RoomSummaryType.isRequired,
+        editing: PropTypes.bool.isRequired,
+        groupId: PropTypes.string.isRequired,
     },
 
     onClick: function(e) {
@@ -144,6 +150,31 @@ const FeaturedRoom = React.createClass({
         });
     },
 
+    onDeleteClicked: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        MatrixClientPeg.get().removeRoomFromGroupSummary(
+            this.props.groupId,
+            this.props.summaryInfo.room_id,
+        ).catch((err) => {
+            console.error('Error whilst removing room from group summary', err);
+            const roomName = this.props.summaryInfo.name ||
+                this.props.summaryInfo.canonical_alias ||
+                this.props.summaryInfo.room_id;
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createTrackedDialog(
+                'Failed to remove room from group summary',
+                '', ErrorDialog,
+            {
+                title: _t(
+                    "Failed to remove the room from the summary of %(groupId)s",
+                    {groupId: this.props.groupId},
+                ),
+                description: _t("The room '%(roomName)s' could not be removed from the summary.", {roomName}),
+            });
+        });
+    },
+
     render: function() {
         const RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
 
@@ -163,9 +194,20 @@ const FeaturedRoom = React.createClass({
             roomNameNode = <span>{this.props.summaryInfo.profile.name}</span>;
         }
 
+        const deleteButton = this.props.editing ?
+            <img
+                className="mx_GroupView_featuredThing_deleteButton"
+                src="img/cancel-small.svg"
+                width="14"
+                height="14"
+                alt="Delete"
+                onClick={this.onDeleteClicked}/>
+            : <div />;
+
         return <AccessibleButton className="mx_GroupView_featuredThing" onClick={this.onClick}>
             <RoomAvatar oobData={oobData} width={64} height={64} />
             <div className="mx_GroupView_featuredThing_name">{roomNameNode}</div>
+            {deleteButton}
         </AccessibleButton>;
     },
 });
@@ -234,7 +276,11 @@ const RoleUserList = React.createClass({
                  </div>
              </AccessibleButton>) : <div />;
         const userNodes = this.props.users.map((u) => {
-            return <FeaturedUser key={u.user_id} summaryInfo={u} />;
+            return <FeaturedUser
+                key={u.user_id}
+                summaryInfo={u}
+                editing={this.props.editing}
+                groupId={this.props.groupId}/>;
         });
         let roleHeader = <div />;
         if (this.props.role && this.props.role.profile) {
@@ -253,6 +299,8 @@ const FeaturedUser = React.createClass({
 
     props: {
         summaryInfo: UserSummaryType.isRequired,
+        editing: PropTypes.bool.isRequired,
+        groupId: PropTypes.string.isRequired,
     },
 
     onClick: function(e) {
@@ -266,6 +314,29 @@ const FeaturedUser = React.createClass({
         });
     },
 
+    onDeleteClicked: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        MatrixClientPeg.get().removeUserFromGroupSummary(
+            this.props.groupId,
+            this.props.summaryInfo.user_id,
+        ).catch((err) => {
+            console.error('Error whilst removing user from group summary', err);
+            const displayName = this.props.summaryInfo.displayname || this.props.summaryInfo.user_id;
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createTrackedDialog(
+                'Failed to remove user from group summary',
+                '', ErrorDialog,
+            {
+                title: _t(
+                    "Failed to remove a user from the summary of %(groupId)s",
+                    {groupId: this.props.groupId},
+                ),
+                description: _t("The user '%(displayName)s' could not be removed from the summary.", {displayName}),
+            });
+        });
+    },
+
     render: function() {
         const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
         const name = this.props.summaryInfo.displayname || this.props.summaryInfo.user_id;
@@ -275,9 +346,20 @@ const FeaturedUser = React.createClass({
         const httpUrl = MatrixClientPeg.get()
             .mxcUrlToHttp(this.props.summaryInfo.avatar_url, 64, 64);
 
+        const deleteButton = this.props.editing ?
+            <img
+                className="mx_GroupView_featuredThing_deleteButton"
+                src="img/cancel-small.svg"
+                width="14"
+                height="14"
+                alt="Delete"
+                onClick={this.onDeleteClicked}/>
+            : <div />;
+
         return <AccessibleButton className="mx_GroupView_featuredThing" onClick={this.onClick}>
             <BaseAvatar name={name} url={httpUrl} width={64} height={64} />
             <div className="mx_GroupView_featuredThing_name">{userNameNode}</div>
+            {deleteButton}
         </AccessibleButton>;
     },
 });
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 9c7318eb60..e894987052 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -896,5 +896,9 @@
     "Add rooms to the group summary": "Add rooms to the group summary",
     "Which rooms would you like to add to this summary?": "Which rooms would you like to add to this summary?",
     "Room name or alias": "Room name or alias",
-    "You are an administrator of this group": "You are an administrator of this group"
+    "You are an administrator of this group": "You are an administrator of this group",
+    "Failed to remove the room from the summary of %(groupId)s": "Failed to remove the room from the summary of %(groupId)s",
+    "The room '%(roomName)' could not be removed from the summary.": "The room '%(roomName)' could not be removed from the summary."
+    "Failed to remove a user from the summary of %(groupId)s": "Failed to remove a user from the summary of %(groupId)s",
+    "The user '%(displayName)s' could not be removed from the summary.": "The user '%(displayName)s' could not be removed from the summary."
 }