add room state explorer to devtools

pull/4735/head
Michael Telatynski 2017-08-03 00:59:40 +01:00
parent 6bfdd69279
commit 131d1c74c9
No known key found for this signature in database
GPG Key ID: 3F879DA5AD802A5E
1 changed files with 90 additions and 1 deletions

View File

@ -152,6 +152,89 @@ class SendCustomStateEvent extends React.Component {
} }
} }
class RoomStateExplorer extends React.Component {
static propTypes = {
roomId: React.PropTypes.string.isRequired,
onFinished: React.PropTypes.func.isRequired,
onBack: React.PropTypes.func.isRequired,
};
constructor(props, context) {
super(props, context);
this.onBack = this.onBack.bind(this);
}
state = {
eventType: null,
};
browseEventType(eventType) {
const self = this;
return () => {
self.setState({ eventType });
};
}
onViewSourceClick(ev) {
const ViewSource = sdk.getComponent('structures.ViewSource');
return () => {
Modal.createDialog(ViewSource, {
content: ev,
}, 'mx_Dialog_viewsource');
};
}
onBack() {
if (this.state.eventType === null) {
this.props.onBack();
} else {
this.setState({ eventType: null });
}
}
render() {
const room = MatrixClientPeg.get().getRoom(this.props.roomId);
const roomStateEvents = room.currentState.events;
const rows = [];
if (this.state.eventType === null) {
Object.keys(roomStateEvents).forEach((evType) => {
const stateGroup = roomStateEvents[evType];
const keys = Object.keys(stateGroup);
if (keys.length > 1) {
rows.push(<button key={evType} onClick={this.browseEventType(evType)}>{evType}</button>);
} else if (keys.length === 1) {
rows.push(<button key={evType} onClick={this.onViewSourceClick(stateGroup[keys[0]])}>{evType}</button>);
}
});
} else {
const evType = this.state.eventType;
const stateGroup = roomStateEvents[evType];
Object.keys(stateGroup).forEach((stateKey) => {
const ev = stateGroup[stateKey];
rows.push(<button key={stateKey} onClick={this.onViewSourceClick(ev)}>{stateKey}</button>);
});
}
return <div>
<div className="mx_Dialog_content">
<div className="mx_TextInputDialog_label">
Room ID: {this.props.roomId}
</div>
<div>
{rows}
</div>
</div>
<div className="mx_Dialog_buttons">
<button onClick={this.onBack}>Back</button>
</div>
</div>;
}
}
export default class DevtoolsDialog extends React.Component { export default class DevtoolsDialog extends React.Component {
static propTypes = { static propTypes = {
roomId: React.PropTypes.string.isRequired, roomId: React.PropTypes.string.isRequired,
@ -164,6 +247,7 @@ export default class DevtoolsDialog extends React.Component {
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
this.onBack = this.onBack.bind(this);
this.onCancel = this.onCancel.bind(this); this.onCancel = this.onCancel.bind(this);
} }
@ -177,6 +261,10 @@ export default class DevtoolsDialog extends React.Component {
}; };
} }
onBack() {
this.setState({ mode: null });
}
onCancel() { onCancel() {
this.props.onFinished(false); this.props.onFinished(false);
} }
@ -185,12 +273,13 @@ export default class DevtoolsDialog extends React.Component {
let body; let body;
if (this.state.mode) { if (this.state.mode) {
body = <this.state.mode {...this.props} />; body = <this.state.mode {...this.props} onBack={this.onBack} />;
} else { } else {
body = <div> body = <div>
<div className="mx_Dialog_content"> <div className="mx_Dialog_content">
<button onClick={this._setMode(SendCustomEvent)}>Send Custom Event</button> <button onClick={this._setMode(SendCustomEvent)}>Send Custom Event</button>
<button onClick={this._setMode(SendCustomStateEvent)}>Send Custom State Event</button> <button onClick={this._setMode(SendCustomStateEvent)}>Send Custom State Event</button>
<button onClick={this._setMode(RoomStateExplorer)}>Explore Room State</button>
</div> </div>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button onClick={this.onCancel}>Cancel</button> <button onClick={this.onCancel}>Cancel</button>