diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.scss b/res/css/views/dialogs/_MessageEditHistoryDialog.scss index b917fe87fd..bc4c2680ed 100644 --- a/res/css/views/dialogs/_MessageEditHistoryDialog.scss +++ b/res/css/views/dialogs/_MessageEditHistoryDialog.scss @@ -15,6 +15,17 @@ limitations under the License. */ .mx_MessageEditHistoryDialog ul { +.mx_MessageEditHistoryDialog { + display: flex; + flex-direction: column; + max-height: 60vh; +} + +.mx_MessageEditHistoryDialog_scrollPanel { + flex: 1 1 auto; +} + +.mx_MessageEditHistoryDialog_edits { list-style-type: none; font-size: 14px; diff --git a/src/components/views/dialogs/MessageEditHistoryDialog.js b/src/components/views/dialogs/MessageEditHistoryDialog.js index d6198abea4..37f49026ac 100644 --- a/src/components/views/dialogs/MessageEditHistoryDialog.js +++ b/src/components/views/dialogs/MessageEditHistoryDialog.js @@ -28,21 +28,41 @@ export default class MessageEditHistoryDialog extends React.Component { }; componentWillMount() { + this.loadMoreEdits = this.loadMoreEdits.bind(this); this.setState({ - edits: [this.props.mxEvent], + events: [], + nextBatch: null, isLoading: true, isTwelveHour: SettingsStore.getValue("showTwelveHourTimestamps"), }); } - async componentDidMount() { + async loadMoreEdits(backwards) { + if (backwards || (!this.state.nextBatch && !this.state.isLoading)) { + // bail out on backwards as we only paginate in one direction + return false; + } + const opts = {token: this.state.nextBatch}; const roomId = this.props.mxEvent.getRoomId(); const eventId = this.props.mxEvent.getId(); - let edits = await MatrixClientPeg.get(). - relations(roomId, eventId, "m.replace", "m.room.message"); - edits = edits.slice().reverse(); - edits.unshift(this.props.mxEvent); - this.setState({edits, isLoading: false}); + const result = await MatrixClientPeg.get().relations( + roomId, eventId, "m.replace", "m.room.message", opts); + //console.log(`loadMoreEdits: got ${result.}`) + let resolve; + const promise = new Promise(r => resolve = r); + this.setState({ + events: this.state.events.concat(result.events), + nextBatch: result.nextBatch, + isLoading: false, + }, () => { + const hasMoreResults = !!this.state.nextBatch; + resolve(hasMoreResults); + }); + return promise; + } + + componentDidMount() { + this.loadMoreEdits(); } _renderEdits() { @@ -50,7 +70,7 @@ export default class MessageEditHistoryDialog extends React.Component { const DateSeparator = sdk.getComponent('messages.DateSeparator'); const nodes = []; let lastEvent; - this.state.edits.forEach(e => { + this.state.events.forEach(e => { if (!lastEvent || wantsDateSeparator(lastEvent.getDate(), e.getDate())) { nodes.push(
  • ); } @@ -61,18 +81,28 @@ export default class MessageEditHistoryDialog extends React.Component { } render() { - const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); - let spinner; - const edits = this._renderEdits(); - if (this.state.isLoading) { + let content; + if (this.state.error) { + content = this.state.error; + } else if (this.state.isLoading) { const Spinner = sdk.getComponent("elements.Spinner"); - spinner = ; + content = ; + } else { + const ScrollPanel = sdk.getComponent("structures.ScrollPanel"); + content = ( +
      {this._renderEdits()}
    +
    ); } + const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); return ( -
      {edits}
    - {spinner} + {content}
    ); }