From ec560345c7cd1dabb821604bfe05ff9ecc2aba9a Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 7 Nov 2017 16:37:43 +0000
Subject: [PATCH 1/2] UnknownDeviceDialog: get devices from SDK

rather than having to have the error message passed in.

This is in preparation for not having the dialog pop up straight
away when a message isn't sent so we don't have to keep the error
object knocking around somewhere.
---
 src/UnknownDeviceErrorHandler.js              |  1 -
 .../views/dialogs/UnknownDeviceDialog.js      | 57 ++++++++++++++-----
 2 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/src/UnknownDeviceErrorHandler.js b/src/UnknownDeviceErrorHandler.js
index e7d77b3b66..664fe14eb5 100644
--- a/src/UnknownDeviceErrorHandler.js
+++ b/src/UnknownDeviceErrorHandler.js
@@ -25,7 +25,6 @@ const onAction = function(payload) {
         const UnknownDeviceDialog = sdk.getComponent('dialogs.UnknownDeviceDialog');
         isDialogOpen = true;
         Modal.createTrackedDialog('Unknown Device Error', '', UnknownDeviceDialog, {
-            devices: payload.err.devices,
             room: payload.room,
             onFinished: (r) => {
                 isDialogOpen = false;
diff --git a/src/components/views/dialogs/UnknownDeviceDialog.js b/src/components/views/dialogs/UnknownDeviceDialog.js
index ee8f307f76..22a7112c01 100644
--- a/src/components/views/dialogs/UnknownDeviceDialog.js
+++ b/src/components/views/dialogs/UnknownDeviceDialog.js
@@ -48,8 +48,9 @@ function UserUnknownDeviceList(props) {
     const {userId, userDevices} = props;
 
     const deviceListEntries = Object.keys(userDevices).map((deviceId) =>
-       <DeviceListEntry key={deviceId} userId={userId}
-           device={userDevices[deviceId]} />,
+        <DeviceListEntry key={deviceId} userId={userId}
+            device={userDevices[deviceId]}
+        />,
     );
 
     return (
@@ -92,26 +93,52 @@ export default React.createClass({
     propTypes: {
         room: React.PropTypes.object.isRequired,
 
-        // map from userid -> deviceid -> deviceinfo
-        devices: React.PropTypes.object.isRequired,
         onFinished: React.PropTypes.func.isRequired,
     },
 
-    componentDidMount: function() {
-        // Given we've now shown the user the unknown device, it is no longer
-        // unknown to them. Therefore mark it as 'known'.
-        Object.keys(this.props.devices).forEach((userId) => {
-            Object.keys(this.props.devices[userId]).map((deviceId) => {
-                MatrixClientPeg.get().setDeviceKnown(userId, deviceId, true);
-            });
+    componentWillMount: function() {
+        const roomMembers = this.props.room.getJoinedMembers().map((m) => {
+            return m.userId;
         });
 
-        // XXX: temporary logging to try to diagnose
-        // https://github.com/vector-im/riot-web/issues/3148
-        console.log('Opening UnknownDeviceDialog');
+        this.setState({
+            // map from userid -> deviceid -> deviceinfo
+            devices: null,
+        });
+        MatrixClientPeg.get().downloadKeys(roomMembers, false).then((devices) => {
+            const unknownDevices = {};
+            // This is all devices in this room, so find the unknown ones.
+            Object.keys(devices).forEach((userId) => {
+                Object.keys(devices[userId]).map((deviceId) => {
+                    const device = devices[userId][deviceId];
+
+                    if (device.isUnverified() && !device.isKnown()) {
+                        if (unknownDevices[userId] === undefined) {
+                            unknownDevices[userId] = {};
+                        }
+                        unknownDevices[userId][deviceId] = device;
+                    }
+
+                    // Given we've now shown the user the unknown device, it is no longer
+                    // unknown to them. Therefore mark it as 'known'.
+                    if (!device.isKnown()) {
+                        MatrixClientPeg.get().setDeviceKnown(userId, deviceId, true);
+                    }
+                });
+            });
+
+            this.setState({
+                devices: unknownDevices,
+            });
+        });
     },
 
     render: function() {
+        if (this.state.devices === null) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return <Spinner />;
+        }
+
         const client = MatrixClientPeg.get();
         const blacklistUnverified = client.getGlobalBlacklistUnverifiedDevices() ||
               this.props.room.getBlacklistUnverifiedDevices();
@@ -154,7 +181,7 @@ export default React.createClass({
                     { warning }
                     { _t("Unknown devices") }:
 
-                    <UnknownDeviceList devices={this.props.devices} />
+                    <UnknownDeviceList devices={this.state.devices} />
                 </GeminiScrollbar>
                 <div className="mx_Dialog_buttons">
                     <button className="mx_Dialog_primary" autoFocus={true}

From 10f15dfc560695416eee2cbb0c8ebdb19d07e1a7 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 7 Nov 2017 17:10:40 +0000
Subject: [PATCH 2/2] Unmounted guard

---
 src/components/views/dialogs/UnknownDeviceDialog.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/views/dialogs/UnknownDeviceDialog.js b/src/components/views/dialogs/UnknownDeviceDialog.js
index 22a7112c01..ff2accf0b0 100644
--- a/src/components/views/dialogs/UnknownDeviceDialog.js
+++ b/src/components/views/dialogs/UnknownDeviceDialog.js
@@ -97,6 +97,8 @@ export default React.createClass({
     },
 
     componentWillMount: function() {
+        this._unmounted = false;
+
         const roomMembers = this.props.room.getJoinedMembers().map((m) => {
             return m.userId;
         });
@@ -106,6 +108,8 @@ export default React.createClass({
             devices: null,
         });
         MatrixClientPeg.get().downloadKeys(roomMembers, false).then((devices) => {
+            if (this._unmounted) return;
+
             const unknownDevices = {};
             // This is all devices in this room, so find the unknown ones.
             Object.keys(devices).forEach((userId) => {
@@ -133,6 +137,10 @@ export default React.createClass({
         });
     },
 
+    componentWillUnmount: function() {
+        this._unmounted = true;
+    },
+
     render: function() {
         if (this.state.devices === null) {
             const Spinner = sdk.getComponent("elements.Spinner");