imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

monitor associated send status for edit history events

Browse source 
to update local echo if needed
This commit is contained in:
Bruno Windels 2019-07-05 16:04:34 +02:00
parent 2182248d7c
commit 0aa1252d01
1 changed files with 21 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/views/messages/EditHistoryMessage.js
View file

@ -38,10 +38,17 @@ export default class EditHistoryMessage extends React.PureComponent {
const {userId} = cli.credentials; const {userId} = cli.credentials;
const event = this.props.mxEvent; const event = this.props.mxEvent;
const room = cli.getRoom(event.getRoomId()); const room = cli.getRoom(event.getRoomId());
if (event.localRedactionEvent()) {
event.localRedactionEvent().on("status", this._onAssociatedStatusChanged);
}
const canRedact = room.currentState.maySendRedactionForEvent(event, userId); const canRedact = room.currentState.maySendRedactionForEvent(event, userId);
this.state = {canRedact}; this.state = {canRedact, sendStatus: event.getAssociatedStatus()};
} }
_onAssociatedStatusChanged = () => {
this.setState({sendStatus: this.props.mxEvent.getAssociatedStatus()});
};
_onRedactClick = async () => { _onRedactClick = async () => {
const event = this.props.mxEvent; const event = this.props.mxEvent;
const cli = MatrixClientPeg.get(); const cli = MatrixClientPeg.get();
@ -63,15 +70,24 @@ export default class EditHistoryMessage extends React.PureComponent {
this.pillifyLinks(); this.pillifyLinks();
} }
componentWillUnmount() {
const event = this.props.mxEvent;
if (event.localRedactionEvent()) {
event.localRedactionEvent().off("status", this._onAssociatedStatusChanged);
}
}
componentDidUpdate() { componentDidUpdate() {
this.pillifyLinks(); this.pillifyLinks();
} }
_renderActionBar() { _renderActionBar() {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
// hide the button when already redacted
if (this.props.mxEvent.isRedacted()) { if (this.props.mxEvent.isRedacted()) {
return null; return null;
} }
// disabled remove button when not allowed
return (<div className="mx_MessageActionBar"> return (<div className="mx_MessageActionBar">
<AccessibleButton onClick={this._onRedactClick} disabled={!this.state.canRedact}>{_t("Remove")}</AccessibleButton> <AccessibleButton onClick={this._onRedactClick} disabled={!this.state.canRedact}>{_t("Remove")}</AccessibleButton>
</div>); </div>);
@ -82,9 +98,8 @@ export default class EditHistoryMessage extends React.PureComponent {
const originalContent = mxEvent.getOriginalContent(); const originalContent = mxEvent.getOriginalContent();
const content = originalContent["m.new_content"] || originalContent; const content = originalContent["m.new_content"] || originalContent;
const contentElements = HtmlUtils.bodyToHtml(content); const contentElements = HtmlUtils.bodyToHtml(content);
const isRedacted = this.props.mxEvent.isRedacted();
let contentContainer; let contentContainer;
if (isRedacted) { if (mxEvent.isRedacted()) {
const UnknownBody = sdk.getComponent('messages.UnknownBody'); const UnknownBody = sdk.getComponent('messages.UnknownBody');
contentContainer = (<UnknownBody mxEvent={this.props.mxEvent} />); contentContainer = (<UnknownBody mxEvent={this.props.mxEvent} />);
} else if (mxEvent.getContent().msgtype === "m.emote") { } else if (mxEvent.getContent().msgtype === "m.emote") {
@ -97,13 +112,12 @@ export default class EditHistoryMessage extends React.PureComponent {
contentContainer = (<div className="mx_EventTile_content" ref="content">{contentElements}</div>); contentContainer = (<div className="mx_EventTile_content" ref="content">{contentElements}</div>);
} }
const timestamp = formatTime(new Date(mxEvent.getTs()), this.props.isTwelveHour); const timestamp = formatTime(new Date(mxEvent.getTs()), this.props.isTwelveHour);
const sendStatus = mxEvent.getAssociatedStatus(); const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.state.sendStatus) !== -1);
const isSending = (['sending', 'queued', 'encrypting'].indexOf(sendStatus) !== -1);
const classes = classNames({ const classes = classNames({
"mx_EventTile": true, "mx_EventTile": true,
"mx_EventTile_redacted": isRedacted, "mx_EventTile_redacted": mxEvent.isRedacted(),
"mx_EventTile_sending": isSending, "mx_EventTile_sending": isSending,
"mx_EventTile_notSent": sendStatus === 'not_sent', "mx_EventTile_notSent": this.state.sendStatus === 'not_sent',
}); });
return <li className={classes}> return <li className={classes}>
<div className="mx_EventTile_line"> <div className="mx_EventTile_line">