From 7ce49c752f68c582f0d7d19ed19b9fec64486346 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 8 Jun 2016 18:35:43 +0100
Subject: [PATCH] Wire up events to update UI on device verification

Use the dispatcher to update event tiles and memberdeviceinfo when a device is
marked as verified.
---
 src/components/views/rooms/EventTile.js       | 15 ++++++++++++++
 .../views/rooms/MemberDeviceInfo.js           | 13 +++++++++---
 src/components/views/rooms/MemberInfo.js      | 20 +++++++++++++++++++
 3 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 13534866c5..e1390ced6a 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -139,6 +139,7 @@ module.exports = React.createClass({
 
     componentDidMount: function() {
         this._suppressReadReceiptAnimation = false;
+        this.dispatcherRef = dispatcher.register(this.onAction);
     },
 
     componentWillReceiveProps: function (nextProps) {
@@ -159,6 +160,20 @@ module.exports = React.createClass({
         return false;
     },
 
+    componentWillUnmount: function() {
+        dispatcher.unregister(this.dispatcherRef);
+    },
+
+    onAction: function(payload) {
+        switch (payload.action) {
+            case 'device_verified':
+                if (payload.params.userId == this.props.mxEvent.getSender()) {
+                    this._verifyEvent(this.props.mxEvent);
+                }
+                break;
+        }
+    },
+
     _verifyEvent: function(mxEvent) {
         var verified = null;
 
diff --git a/src/components/views/rooms/MemberDeviceInfo.js b/src/components/views/rooms/MemberDeviceInfo.js
index 6af7b848c0..296e0b4720 100644
--- a/src/components/views/rooms/MemberDeviceInfo.js
+++ b/src/components/views/rooms/MemberDeviceInfo.js
@@ -17,6 +17,8 @@ limitations under the License.
 var React = require('react');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 
+var dis = require("../../../dispatcher");
+
 module.exports = React.createClass({
     displayName: 'MemberDeviceInfo',
     propTypes: {
@@ -27,9 +29,14 @@ module.exports = React.createClass({
     onVerifyClick: function() {
         MatrixClientPeg.get().setDeviceVerified(this.props.userId,
                                                 this.props.device.id);
-        // TODO: wire this up properly
-        this.props.device.verified = true;
-        this.forceUpdate();
+
+        dis.dispatch({
+            action: 'device_verified',
+            params: {
+                userId: this.props.userId,
+                deviceId: this.props.device.id,
+            },
+        });
     },
 
     render: function() {
diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index 385f9dee19..2f68ebfb7d 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -67,6 +67,7 @@ module.exports = React.createClass({
 
     componentDidMount: function() {
         this._updateStateForNewMember(this.props.member);
+        this.dispatcherRef = dis.register(this.onAction);
     },
 
     componentWillReceiveProps: function(newProps) {
@@ -76,11 +77,30 @@ module.exports = React.createClass({
     },
 
     componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
         if (this._cancelDeviceList) {
             this._cancelDeviceList();
         }
     },
 
+    onAction: function(payload) {
+        switch (payload.action) {
+            case 'device_verified':
+                if (payload.params.userId == this.props.member.userId) {
+                    this._onDeviceVerified();
+                }
+                break;
+        }
+    },
+
+    _onDeviceVerified: function() {
+        // no need to re-download the whole thing; just update our copy of the
+        // list.
+        var devices = MatrixClientPeg.get().listDeviceKeys(
+            this.props.member.userId);
+        this.setState({devices: devices});
+    },
+
     _updateStateForNewMember: function(member) {
         var newState = this._calculateOpsPermissions(member);
         newState.devices = null;