From 797ccdc125a9a6929ece3eb46625743319291036 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Wed, 26 Feb 2020 14:44:56 +1100
Subject: [PATCH 1/2] Use the new member list UI for the update group dialog
 (closed)

---
 .../conversation/UpdateGroupMembersDialog.tsx | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/ts/components/conversation/UpdateGroupMembersDialog.tsx b/ts/components/conversation/UpdateGroupMembersDialog.tsx
index 27de62c49..8acde7336 100644
--- a/ts/components/conversation/UpdateGroupMembersDialog.tsx
+++ b/ts/components/conversation/UpdateGroupMembersDialog.tsx
@@ -1,9 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Contact, MemberList } from './MemberList';
+import { Contact } from './MemberList';
 
 import { SessionModal } from '../session/SessionModal';
 import { SessionButton } from '../session/SessionButton';
+import {
+  ContactType,
+  SessionMemberListItem,
+} from '../session/SessionMemberListItem';
 
 interface Props {
   titleText: string;
@@ -114,13 +118,8 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
         <p className={errorMessageClasses}>{errorMsg}</p>
         <div className="spacer-md" />
 
-        <div className="friend-selection-list">
-          <MemberList
-            members={this.state.friendList}
-            selected={{}}
-            i18n={this.props.i18n}
-            onMemberClicked={this.onMemberClicked}
-          />
+        <div className="group-member-list__selection">
+          {this.renderMemberList()}
         </div>
         <p className={noFriendsClasses}>{`(${this.props.i18n(
           'noMembersInThisGroup'
@@ -135,6 +134,19 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
     );
   }
 
+  private renderMemberList() {
+    const members = this.state.friendList;
+
+    return members.map((member: ContactType) => (
+      <SessionMemberListItem
+        member={member}
+        isSelected={!member.checkmarked}
+        onSelect={this.onMemberClicked}
+        onUnselect={this.onMemberClicked}
+      />
+    ));
+  }
+
   private onShowError(msg: string) {
     if (this.state.errorDisplayed) {
       return;

From 1f74803e72e5b8c3971844f400da45a509ccaa84 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Thu, 5 Mar 2020 10:46:43 +1100
Subject: [PATCH 2/2] add key to group member list

---
 ts/components/conversation/UpdateGroupMembersDialog.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ts/components/conversation/UpdateGroupMembersDialog.tsx b/ts/components/conversation/UpdateGroupMembersDialog.tsx
index 8acde7336..f0cf17f47 100644
--- a/ts/components/conversation/UpdateGroupMembersDialog.tsx
+++ b/ts/components/conversation/UpdateGroupMembersDialog.tsx
@@ -143,6 +143,7 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
         isSelected={!member.checkmarked}
         onSelect={this.onMemberClicked}
         onUnselect={this.onMemberClicked}
+        key={member.id}
       />
     ));
   }