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

@@ -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;
 

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() {

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;