create members_modal screen and reference from create_direct_message and

add_members screens

app/screens/add_members/add_members.tsx

@@ -0,0 +1,107 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useCallback, useState} from 'react';
+import {defineMessages, useIntl} from 'react-intl';
+import {Keyboard} from 'react-native';
+
+import {makeDirectChannel, makeGroupChannel} from '@actions/remote/channel';
+import {useServerUrl} from '@context/server';
+import {t} from '@i18n';
+import MembersModal from '@screens/members_modal';
+import {dismissModal} from '@screens/navigation';
+import {alertErrorWithFallback} from '@utils/draft';
+import {displayUsername} from '@utils/user';
+
+const messages = defineMessages({
+    dm: {
+        id: 'mobile.open_dm.error',
+        defaultMessage: "We couldn't open a direct message with {displayName}. Please check your connection and try again.",
+    },
+    gm: {
+        id: t('mobile.open_gm.error'),
+        defaultMessage: "We couldn't open a group message with those users. Please check your connection and try again.",
+    },
+    buttonText: {
+        id: t('create_direct_message.start'),
+        defaultMessage: 'Start Conversation',
+    },
+});
+
+type Props = {
+    componentId: string;
+    teammateNameDisplay: string;
+}
+
+const close = () => {
+    Keyboard.dismiss();
+    dismissModal();
+};
+
+export default function AddMembers({
+    componentId,
+    teammateNameDisplay,
+}: Props) {
+    const serverUrl = useServerUrl();
+    const intl = useIntl();
+
+    const [startingConversation, setStartingConversation] = useState(false);
+    const [selectedIds, setSelectedIds] = useState<{[id: string]: UserProfile}>({});
+
+    const createDirectChannel = useCallback(async (id: string): Promise<boolean> => {
+        const user = selectedIds[id];
+        const displayName = displayUsername(user, intl.locale, teammateNameDisplay);
+        const result = await makeDirectChannel(serverUrl, id, displayName);
+        if (result.error) {
+            alertErrorWithFallback(intl, result.error, messages.dm, {displayName});
+        }
+        return !result.error;
+    }, [selectedIds, intl.locale, teammateNameDisplay, serverUrl]);
+
+    const createGroupChannel = useCallback(async (ids: string[]): Promise<boolean> => {
+        const result = await makeGroupChannel(serverUrl, ids);
+        if (result.error) {
+            alertErrorWithFallback(intl, result.error, messages.gm);
+        }
+        return !result.error;
+    }, [serverUrl]);
+
+    const startConversation = useCallback(async (selectedId?: {[id: string]: boolean}) => {
+        if (startingConversation) {
+            return;
+        }
+
+        setStartingConversation(true);
+
+        const idsToUse = selectedId ? Object.keys(selectedId) : Object.keys(selectedIds);
+        let success;
+        if (idsToUse.length === 0) {
+            success = false;
+        } else if (idsToUse.length > 1) {
+            success = await createGroupChannel(idsToUse);
+        } else {
+            success = await createDirectChannel(idsToUse[0]);
+        }
+
+        if (success) {
+            close();
+        } else {
+            setStartingConversation(false);
+        }
+    }, [startingConversation, selectedIds, createGroupChannel, createDirectChannel]);
+
+    return (
+        <MembersModal
+            componentId={componentId}
+            selectUsersButtonIcon={'forum-outline'}
+            selectUsersButtonText={intl.formatMessage(messages.buttonText)}
+            selectUsersMax={7}
+            selectUsersWarn={5}
+            selectedIds={selectedIds}
+            setSelectedIds={setSelectedIds}
+            startConversation={startConversation}
+            startingConversation={startingConversation}
+        />
+    );
+}
+

app/screens/add_members/index.tsx

@@ -0,0 +1,19 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
+import withObservables from '@nozbe/with-observables';
+
+import {observeTeammateNameDisplay} from '@queries/servers/user';
+
+import AddMembers from './add_members';
+
+import type {WithDatabaseArgs} from '@typings/database/database';
+
+const enhanced = withObservables([], ({database}: WithDatabaseArgs) => {
+    return {
+        teammateNameDisplay: observeTeammateNameDisplay(database),
+    };
+});
+
+export default withDatabase(enhanced(AddMembers));

app/screens/create_direct_message/create_direct_message.tsx

@@ -8,12 +8,11 @@ import {Keyboard} from 'react-native';
 import {makeDirectChannel, makeGroupChannel} from '@actions/remote/channel';
 import {useServerUrl} from '@context/server';
 import {t} from '@i18n';
+import MembersModal from '@screens/members_modal';
 import {dismissModal} from '@screens/navigation';
 import {alertErrorWithFallback} from '@utils/draft';
 import {displayUsername} from '@utils/user';
 
-import MembersModal from './members_modal';
-
 const messages = defineMessages({
     dm: {
         id: 'mobile.open_dm.error',

app/screens/members_modal/members_modal.tsx

@@ -19,8 +19,8 @@ import {dismissModal, setButtons} from '@screens/navigation';
 import {changeOpacity, getKeyboardAppearanceFromTheme, makeStyleSheetFromTheme} from '@utils/theme';
 import {filterProfilesMatchingTerm} from '@utils/user';
 
-import SelectedUsers from '../selected_users';
-import UserList from '../user_list';
+import SelectedUsers from './selected_users';
+import UserList from './user_list';
 
 const CLOSE_BUTTON = 'close-dms';