Refactor UnknownDeviceDialog

hopefully make this a bit more readable, and use our new BaseDialog.
This commit is contained in:
Richard van der Hoff 2017-01-25 18:25:40 +00:00
parent 5538ce7c30
commit 5da6ca8fc1

View file

@ -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>
);
}
},
});