message: Refactor UnknownDeviceDialog
  hopefully make this a bit more readable, and use our new BaseDialog.
diff: @@ -14,60 +14,77 @@ See the License for the specific language governing permissions and
  limitations under the License.
  */
  -var React = require("react");
  -var sdk = require('../../../index');
  -var MatrixClientPeg = require("../../../MatrixClientPeg");
  +import React from 'react';
  +import sdk from '../../../index';
  -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 }>
  - <div className="mx_Dialog_title">
  - Room contains unknown devices
  - </div>
  + <BaseDialog className='mx_UnknownDeviceDialog'
  + onFinished={this.props.onFinished}
  + title='Room contains unknown devices'
  + >
  <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:
  - <ul>{
  - 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>
  + <p>Unknown devices:</p>
  + <UnknownDeviceList devices={this.props.devices} />
  </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>
  );
  - }
  + },
  });
  