Refactor UnknownDeviceDialog

hopefully make this a bit more readable, and use our new BaseDialog.

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -14,60 +14,77 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require("react");
+import React from 'react';
-var sdk = require('../../../index');
+import sdk from '../../../index';
-var MatrixClientPeg = require("../../../MatrixClientPeg");
 
-module.exports = React.createClass({
+function UserUnknownDeviceList(props) {
+    const {userDevices} = props;
+
+    const deviceListEntries = Object.keys(userDevices).map((deviceId) =>
+        <li key={ deviceId }>
+            { deviceId } ( { userDevices[deviceId].getDisplayName() } )
+        </li>,
+    );
+
+    return <ul>{deviceListEntries}</ul>;
+}
+
+UserUnknownDeviceList.propTypes = {
+    // map from deviceid -> deviceinfo
+    userDevices: React.PropTypes.object.isRequired,
+};
+
+
+function UnknownDeviceList(props) {
+    const {devices} = props;
+
+    const userListEntries = Object.keys(devices).map((userId) =>
+        <li key={ userId }>
+            <p>{ userId }:</p>
+            <UserUnknownDeviceList userDevices={devices[userId]} />
+        </li>,
+    );
+
+    return <ul>{userListEntries}</ul>;
+}
+
+UnknownDeviceList.propTypes = {
+    // map from userid -> deviceid -> deviceinfo
+    devices: React.PropTypes.object.isRequired,
+};
+
+
+export default React.createClass({
     displayName: 'UnknownEventDialog',
 
     propTypes: {
+        // map from userid -> deviceid -> deviceinfo
         devices: React.PropTypes.object.isRequired,
         onFinished: React.PropTypes.func.isRequired,
     },
 
-    onKeyDown: function(e) {
-        if (e.keyCode === 27) { // escape
-            e.stopPropagation();
-            e.preventDefault();
-            this.props.onFinished(false);
-        }
-    },
-
     render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
-            <div className="mx_UnknownDeviceDialog" onKeyDown={ this.onKeyDown }>
+            <BaseDialog className='mx_UnknownDeviceDialog'
-                <div className="mx_Dialog_title">
+                onFinished={this.props.onFinished}
-                    Room contains unknown devices
+                title='Room contains unknown devices'
-                </div>
+            >
                 <div className="mx_Dialog_content">
-                    <h4>This room contains unknown devices which have not been verified.</h4>
+                    <h4>This room contains unknown devices which have not been
+                    verified.</h4>
+
                     <h4>We strongly recommend you verify them before continuing.</h4>
-                    <p>Unknown devices:
+                    <p>Unknown devices:</p>
-                        <ul>{
+                    <UnknownDeviceList devices={this.props.devices} />
-                            Object.keys(this.props.devices).map(userId=>{
-                                return <li key={ userId }>
-                                    <p>{ userId }:</p>
-                                    <ul>
-                                    {
-                                        Object.keys(this.props.devices[userId]).map(deviceId=>{
-                                            return <li key={ deviceId }>
-                                                { deviceId } ( { this.props.devices[userId][deviceId].getDisplayName() } )
-                                            </li>
-                                        })
-                                    }
-                                    </ul>
-                                </li>
-                            })
-                        }</ul>
-                    </p>
                 </div>
                 <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={ this.props.onFinished } autoFocus={ true }>
+                    <button className="mx_Dialog_primary" autoFocus={ true }
+                            onClick={ this.props.onFinished } >
                         OK
                     </button>
                 </div>
-            </div>
+            </BaseDialog>
         );
-    }
+    },
 });