Add Clone Group functionality (#4056)

- new CloneChat component: a dialog to confirm chat cloning
- CreateGroup component now accepts initial image and members

- resolves #3933

CHANGELOG.md

@@ -77,6 +77,7 @@
 - a way to add contact by pasting invite link to the search field #4041
 - add on-screen controls to ImageCropper and the ability to rotate by 90 degrees #3893
 - Added UI for read receipts in message info dialog #4036
+- add Clone Group functionality to chat list context menu #3933
 
 ### Changed
 - reword advanced setting "Disable Background Sync For All Accounts" -> "Only Synchronize the Currently Selected Account" #3960

src/renderer/components/chat/ChatListContextMenu.tsx

@@ -9,6 +9,7 @@ import { selectedAccountId } from '../../ScreenController'
 import { ContextMenuContext } from '../../contexts/ContextMenuContext'
 import { unmuteChat } from '../../backend/chat'
 import useChat from '../../hooks/chat/useChat'
+import { CloneChat } from '../dialogs/CreateChat'
 import useChatDialog from '../../hooks/chat/useChatDialog'
 import useDialog from '../../hooks/dialog/useDialog'
 import useOpenViewGroupDialog from '../../hooks/dialog/useOpenViewGroupDialog'
@@ -225,6 +226,16 @@ export function useChatListContextMenu(): {
                 label: tx('menu_edit_group'),
                 action: onViewGroup,
               },
+            // Clone Group
+            chatListItem.isGroup && {
+              label: tx('clone_chat'),
+              action: () => {
+                openDialog(CloneChat, {
+                  setViewMode: 'createGroup',
+                  chatTemplateId: chatListItem.id,
+                })
+              },
+            },
             // Edit Broadcast List
             chatListItem.isBroadcast && {
               label: tx('menu_edit_broadcast_list'),

src/renderer/components/dialogs/CreateChat/index.tsx

@@ -60,13 +60,18 @@ type ViewMode = 'main' | 'createGroup' | 'createBroadcastList'
 
 export default function CreateChat(props: DialogProps) {
   const { onClose } = props
+  const tx = useTranslationFunction()
+
   const [viewMode, setViewMode] = useState<ViewMode>('main')
 
   return (
     <Dialog width={400} onClose={onClose} fixed>
       {viewMode == 'main' && <CreateChatMain {...{ setViewMode, onClose }} />}
       {viewMode == 'createGroup' && (
-        <CreateGroup {...{ setViewMode, onClose }} />
+        <>
+          <DialogHeader title={tx('clone_chat')} />
+          <CreateGroup {...{ setViewMode, onClose }} />
+        </>
       )}
       {viewMode == 'createBroadcastList' && (
         <CreateBroadcastList {...{ setViewMode, onClose }} />
@@ -75,6 +80,38 @@ export default function CreateChat(props: DialogProps) {
   )
 }
 
+export function CloneChat(props: { chatTemplateId: number } & DialogProps) {
+  const { chatTemplateId, onClose } = props
+  const accountId = selectedAccountId()
+  const tx = useTranslationFunction()
+
+  const [chat, setChat] = useState<T.FullChat | null>(null)
+
+  useMemo(() => {
+    BackendRemote.rpc
+      .getFullChatById(accountId, chatTemplateId)
+      .then(c => setChat(c))
+  }, [accountId, chatTemplateId])
+
+  return (
+    <Dialog width={400} onClose={onClose} fixed>
+      {chat && (
+        <>
+          <DialogHeader title={tx('clone_chat')} />
+          <CreateGroup
+            {...{
+              setViewMode: onClose,
+              onClose,
+              groupMembers: chat.contactIds,
+              groupImage: chat.profileImage,
+            }}
+          />
+        </>
+      )}
+    </Dialog>
+  )
+}
+
 type CreateChatMainProps = {
   setViewMode: (newViewMode: ViewMode) => void
   onClose: DialogProps['onClose']
@@ -349,25 +386,25 @@ function CreateChatMain(props: CreateChatMainProps) {
 type CreateGroupProps = {
   setViewMode: (newViewMode: ViewMode) => void
   onClose: DialogProps['onClose']
+  groupImage?: string | null
+  groupMembers?: number[]
 }
 
-function CreateGroup(props: CreateGroupProps) {
+export function CreateGroup(props: CreateGroupProps) {
+  const { selectChat } = useChat()
   const { openDialog } = useDialog()
   const { setViewMode, onClose } = props
   const tx = useTranslationFunction()
   const accountId = selectedAccountId()
 
   const [groupName, setGroupName] = useState('')
-  const [groupImage, onSetGroupImage, onUnsetGroupImage] = useGroupImage(null)
-  const [groupMembers, removeGroupMember, addGroupMember] = useGroupMembers([
-    C.DC_CONTACT_ID_SELF,
-  ])
-  const finishCreateGroup = useCreateGroup(
-    groupName,
-    groupImage,
-    groupMembers,
-    onClose
+  const [groupImage, onSetGroupImage, onUnsetGroupImage] = useGroupImage(
+    props.groupImage || null
+  )
+  const [groupMembers, removeGroupMember, addGroupMember] = useGroupMembers(
+    props.groupMembers || [C.DC_CONTACT_ID_SELF]
   )
+  const finishCreateGroup = useCreateGroup(groupName, groupImage, groupMembers)
 
   const [errorMissingGroupName, setErrorMissingGroupName] = useState(false)
   const [groupContacts, setGroupContacts] = useState<Type.Contact[]>([])
@@ -394,7 +431,6 @@ function CreateGroup(props: CreateGroupProps) {
 
   return (
     <>
-      <DialogHeader title={tx('menu_new_group')} />
       <DialogBody>
         <DialogContent>
           <ChatSettingsSetNameAndProfileImage
@@ -440,6 +476,14 @@ function CreateGroup(props: CreateGroupProps) {
                 return
               }
               finishCreateGroup()
+                .then(groupId => {
+                  if (groupId) {
+                    selectChat(accountId, groupId)
+                  } else {
+                    // TODO: handle error
+                  }
+                })
+                .finally(onClose)
             }}
           >
             {tx('group_create_button')}
@@ -641,11 +685,9 @@ export const ChatSettingsSetNameAndProfileImage = ({
 const useCreateGroup = (
   groupName: string,
   groupImage: string | null | undefined,
-  groupMembers: number[],
-  onClose: DialogProps['onClose']
+  groupMembers: number[]
 ) => {
   const accountId = selectedAccountId()
-  const { selectChat } = useChat()
 
   const createGroup = useCallback(async () => {
     const isVerified = await areAllContactsVerified(accountId, groupMembers)
@@ -677,9 +719,7 @@ const useCreateGroup = (
       return
     }
 
-    const chatId = await createGroup()
-    onClose()
-    selectChat(accountId, chatId)
+    return createGroup()
   }
 }