ndh/fix3807 refresh member list (#3924)

* Extract Dialogs to own files

prepare generic contact list

* Update modified group

* Update changelog

* Remove unintended file

* Remove console logs

* Skip useEffect on first render

resolves #3533

* Add missing label for translation

* move changelog entry

---------

Co-authored-by: SimonLaux <[email protected]>

CHANGELOG.md

@@ -5,6 +5,9 @@
 ### Changed
 - Update translations (2024-06-09) #3925
 
+### Fixed
+- refresh member list after changes #3807
+
 <a id="1_45_5"></a>
 
 ## [v1.45.5] - 2024-06-08

_locales/_untranslated_en.json

@@ -44,5 +44,8 @@
   },
   "chat_map_title": {
     "message": "Map for chat '%1'"
+  },
+  "menu_edit_broadcast_list": {
+    "message": "Edit Broadcast List"
   }
 }

src/renderer/backend/group.ts

@@ -33,4 +33,6 @@ export async function modifyGroup(
       add.map(id => BackendRemote.rpc.addContactToChat(accountId, chatId, id))
     )
   }
+
+  return await BackendRemote.rpc.getFullChatById(accountId, chatId)
 }

src/renderer/components/chat/ChatListContextMenu.tsx

@@ -227,7 +227,7 @@ export function useChatListContextMenu(): {
               },
             // Edit Broadcast List
             chatListItem.isBroadcast && {
-              label: 'Edit Broadcast List',
+              label: tx('menu_edit_broadcast_list'),
               action: onViewGroup,
             },
             // View Profile

src/renderer/components/dialogs/AddMember/AddMemberDialog.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { useContactSearch } from '../CreateChat'
+import { AddMemberInnerDialog } from './AddMemberInnerDialog'
+import { useContactsMap } from '../../contact/ContactList'
+import Dialog from '../../Dialog'
+import type { T } from '@deltachat/jsonrpc-client'
+import type { DialogProps } from '../../../contexts/DialogContext'
+import { InlineVerifiedIcon } from '../../VerifiedIcon'
+import { Avatar } from '../../Avatar'
+
+export function AddMemberDialog({
+  onClose,
+  onOk,
+  groupMembers,
+  listFlags,
+  isBroadcast = false,
+  isVerificationRequired = false,
+}: {
+  onOk: (members: number[]) => void
+  groupMembers: number[]
+  listFlags: number
+  isBroadcast?: boolean
+  isVerificationRequired?: boolean
+} & DialogProps) {
+  const [searchContacts, updateSearchContacts] = useContactsMap(listFlags, '')
+  const [queryStr, onSearchChange, _, refreshContacts] =
+    useContactSearch(updateSearchContacts)
+  return (
+    <Dialog canOutsideClickClose={false} fixed onClose={onClose}>
+      {AddMemberInnerDialog({
+        onOk: addMembers => {
+          onOk(addMembers)
+          onClose()
+        },
+        onCancel: () => {
+          onClose()
+        },
+        onSearchChange,
+        queryStr,
+        searchContacts,
+        refreshContacts,
+        groupMembers,
+        isBroadcast,
+        isVerificationRequired,
+      })}
+    </Dialog>
+  )
+}
+
+export const AddMemberChip = (props: {
+  contact: T.Contact
+  onRemoveClick: (contact: T.Contact) => void
+}) => {
+  const { contact, onRemoveClick } = props
+  return (
+    <div
+      key={contact.id}
+      className='AddMemberChip'
+      onClick={() => onRemoveClick(contact)}
+    >
+      <div className='Avatar'>
+        <Avatar
+          displayName={contact.displayName}
+          avatarPath={contact.profileImage}
+          color={contact.color}
+        />
+      </div>
+      <div className='DisplayName'>
+        {contact.displayName} {contact.isVerified && <InlineVerifiedIcon />}
+      </div>
+    </div>
+  )
+}