diff --git a/res/css/views/dialogs/_DMInviteDialog.scss b/res/css/views/dialogs/_DMInviteDialog.scss
index f806e85120..5d58f3ae8b 100644
--- a/res/css/views/dialogs/_DMInviteDialog.scss
+++ b/res/css/views/dialogs/_DMInviteDialog.scss
@@ -67,6 +67,17 @@ limitations under the License.
height: 25px;
line-height: 25px;
}
+
+ .mx_DMInviteDialog_buttonAndSpinner {
+ .mx_Spinner {
+ // Width and height are required to trick the layout engine.
+ width: 20px;
+ height: 20px;
+ margin-left: 5px;
+ display: inline-block;
+ vertical-align: middle;
+ }
+ }
}
.mx_DMInviteDialog_section {
diff --git a/src/RoomInvite.js b/src/RoomInvite.js
index 2fe64c994f..8b7324d4f5 100644
--- a/src/RoomInvite.js
+++ b/src/RoomInvite.js
@@ -36,21 +36,19 @@ import SettingsStore from "./settings/SettingsStore";
* @param {string[]} addrs Array of strings of addresses to invite. May be matrix IDs or 3pids.
* @returns {Promise} Promise
*/
-function inviteMultipleToRoom(roomId, addrs) {
+export function inviteMultipleToRoom(roomId, addrs) {
const inviter = new MultiInviter(roomId);
return inviter.invite(addrs).then(states => Promise.resolve({states, inviter}));
}
export function showStartChatInviteDialog() {
if (SettingsStore.isFeatureEnabled("feature_ftue_dms")) {
+ // This new dialog handles the room creation internally - we don't need to worry about it.
const DMInviteDialog = sdk.getComponent("dialogs.DMInviteDialog");
- Modal.createTrackedDialog('Start DM', '', DMInviteDialog, {
- onFinished: (inviteIds) => {
- // TODO: Replace _onStartDmFinished with less hacks
- if (inviteIds.length > 0) _onStartDmFinished(true, inviteIds.map(i => ({address: i})));
- // else ignore and just do nothing
- },
- }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
+ Modal.createTrackedDialog(
+ 'Start DM', '', DMInviteDialog, {},
+ /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
+ );
return;
}
diff --git a/src/components/views/dialogs/DMInviteDialog.js b/src/components/views/dialogs/DMInviteDialog.js
index c0ff9b96fe..2a5c896a75 100644
--- a/src/components/views/dialogs/DMInviteDialog.js
+++ b/src/components/views/dialogs/DMInviteDialog.js
@@ -31,6 +31,8 @@ import dis from "../../../dispatcher";
import IdentityAuthClient from "../../../IdentityAuthClient";
import Modal from "../../../Modal";
import {humanizeTime} from "../../../utils/humanize";
+import createRoom from "../../../createRoom";
+import {inviteMultipleToRoom} from "../../../RoomInvite";
// TODO: [TravisR] Make this generic for all kinds of invites
@@ -293,6 +295,10 @@ export default class DMInviteDialog extends React.PureComponent {
threepidResultsMixin: [], // { user: ThreepidMember, userId: string}[], like recents and suggestions
canUseIdentityServer: !!MatrixClientPeg.get().getIdentityServerUrl(),
tryingIdentityServer: false,
+
+ // These two flags are used for the 'Go' button to communicate what is going on.
+ busy: false,
+ errorText: null,
};
this._editorRef = createRef();
@@ -385,11 +391,64 @@ export default class DMInviteDialog extends React.PureComponent {
}
_startDm = () => {
- this.props.onFinished(this.state.targets.map(t => t.userId));
+ this.setState({busy: true});
+ const targetIds = this.state.targets.map(t => t.userId);
+
+ // Check if there is already a DM with these people and reuse it if possible.
+ const existingRoom = DMRoomMap.shared().getDMRoomForIdentifiers(targetIds);
+ if (existingRoom) {
+ dis.dispatch({
+ action: 'view_room',
+ room_id: existingRoom.roomId,
+ should_peek: false,
+ joining: false,
+ });
+ this.props.onFinished();
+ return;
+ }
+
+ // Check if it's a traditional DM and create the room if required.
+ // TODO: [Canonical DMs] Remove this check and instead just create the multi-person DM
+ let createRoomPromise = Promise.resolve();
+ if (targetIds.length === 1) {
+ createRoomPromise = createRoom({dmUserId: targetIds[0]});
+ } else {
+ // Create a boring room and try to invite the targets manually.
+ createRoomPromise = createRoom().then(roomId => {
+ return inviteMultipleToRoom(roomId, targetIds);
+ }).then(result => {
+ const failedUsers = Object.keys(result.states).filter(a => result.states[a] === 'error');
+ if (failedUsers.length > 0) {
+ console.log("Failed to invite users: ", result);
+ this.setState({
+ busy: false,
+ errorText: _t("Failed to invite the following users to chat: %(csvUsers)s", {
+ csvUsers: failedUsers.join(", "),
+ }),
+ });
+ return true; // abort
+ }
+ });
+ }
+
+ // the createRoom call will show the room for us, so we don't need to worry about that.
+ createRoomPromise.then(abort => {
+ if (abort === true) return; // only abort on true booleans, not roomIds or something
+ this.props.onFinished();
+ }).catch(err => {
+ console.error(err);
+ this.setState({
+ busy: false,
+ errorText: _t("We couldn't create your DM. Please check the users you want to invite and try again."),
+ });
+ });
};
_cancel = () => {
- this.props.onFinished([]);
+ // We do not want the user to close the dialog while an action is in progress
+ if (this.state.busy) return;
+
+ this.props.onFinished();
};
_updateFilter = (e) => {
@@ -739,6 +798,12 @@ export default class DMInviteDialog extends React.PureComponent {
render() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+ const Spinner = sdk.getComponent("elements.Spinner");
+
+ let spinner = null;
+ if (this.state.busy) {
+ spinner =