From 51ac5421c9848be775c977009454e7f55c79d155 Mon Sep 17 00:00:00 2001 From: Panagiotis <27917356+panoschal@users.noreply.github.com> Date: Sat, 6 Mar 2021 11:30:31 +0200 Subject: [PATCH] chore: refactor code pass only the mxEvent object to ViewSource derive the necessary values inside the component --- src/components/structures/ViewSource.js | 161 +++++++++--------- .../views/context_menus/MessageContextMenu.js | 9 +- .../views/messages/EditHistoryMessage.js | 6 +- 3 files changed, 86 insertions(+), 90 deletions(-) diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.js index a31876ea76..369a0a1ddd 100644 --- a/src/components/structures/ViewSource.js +++ b/src/components/structures/ViewSource.js @@ -26,127 +26,134 @@ import { SendCustomEvent } from "../views/dialogs/DevtoolsDialog"; export default class ViewSource extends React.Component { static propTypes = { - content: PropTypes.object.isRequired, onFinished: PropTypes.func.isRequired, - roomId: PropTypes.string.isRequired, - eventId: PropTypes.string.isRequired, - isEncrypted: PropTypes.bool.isRequired, - decryptedContent: PropTypes.object, - event: PropTypes.object.isRequired, // the MatrixEvent associated with the context menu + mxEvent: PropTypes.object.isRequired, // the MatrixEvent associated with the context menu }; constructor(props) { super(props); this.state = { - editComponent: null, + isEditing: false, }; } onBack() { - this.setState({ editComponent: null }); + this.setState({ isEditing: false }); } - editEvent() { - const isStateEvent = this.props.event.isState(); - console.log("isStateEvent", isStateEvent); - if (isStateEvent) { - this.setState({ - editComponent: ( - - {(cli) => ( - this.onBack()} - inputs={{ - eventType: this.props.event.getType(), - evContent: JSON.stringify(this.props.event.getContent(), null, "\t"), - stateKey: this.props.event.getStateKey(), - }} - /> - )} - - ), - }); - } else { - // send an edit-message event - // prefill the "m.new_content" field - const originalContent = this.props.event.getContent(); - const originalEventId = this.props.eventId; - const content = { - ...originalContent, - "m.new_content": originalContent, - "m.relates_to": { - rel_type: "m.replace", - event_id: originalEventId, - }, - }; - this.setState({ - editComponent: ( - - {(cli) => ( - this.onBack()} - inputs={{ - eventType: this.props.event.getType(), - evContent: JSON.stringify(content, null, "\t"), - }} - /> - )} - - ), - }); - } + onEdit() { + this.setState({ isEditing: true }); } - render() { - const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog"); + // returns the dialog body for viewing the event source + viewSourceContent() { + const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit + const isEncrypted = this.props.mxEvent.getType() !== this.props.mxEvent.getWireType(); + const decryptedEventSource = mxEvent._clearEvent; // FIXME: _clearEvent is private + const originalEventSource = mxEvent.event; - let content; - if (this.props.isEncrypted) { - content = ( + if (isEncrypted) { + return ( <>
{_t("Decrypted event source")} - {JSON.stringify(this.props.decryptedContent, null, 2)} + {JSON.stringify(decryptedEventSource, null, 2)}
{_t("Original event source")} - {JSON.stringify(this.props.content, null, 2)} + {JSON.stringify(originalEventSource, null, 2)}
); } else { - content = ( + return ( <>
{_t("Original event source")}
- {JSON.stringify(this.props.content, null, 2)} + {JSON.stringify(originalEventSource, null, 2)} ); } + } - const isEditing = this.state.editComponent !== null; - console.log(isEditing); + // returns the SendCustomEvent component prefilled with the correct details + editSourceContent() { + const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit + const isStateEvent = mxEvent.isState(); + console.log("isStateEvent", isStateEvent); + const roomId = mxEvent.getRoomId(); + const eventId = mxEvent.getId(); + const originalContent = mxEvent.getContent(); + if (isStateEvent) { + return ( + + {(cli) => ( + this.onBack()} + inputs={{ + eventType: mxEvent.getType(), + evContent: JSON.stringify(originalContent, null, "\t"), + stateKey: mxEvent.getStateKey(), + }} + /> + )} + + ); + } else { + // send an edit-message event + // prefill the "m.new_content" field + const newContent = { + ...originalContent, + "m.new_content": originalContent, + "m.relates_to": { + rel_type: "m.replace", + event_id: eventId, + }, + }; + return ( + + {(cli) => ( + this.onBack()} + inputs={{ + eventType: mxEvent.getType(), + evContent: JSON.stringify(newContent, null, "\t"), + }} + /> + )} + + ); + } + } + + render() { + const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog"); + const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit + + const isEditing = this.state.isEditing; + const roomId = mxEvent.getRoomId(); + const eventId = mxEvent.getId(); return (
-
Room ID: {this.props.roomId}
-
Event ID: {this.props.eventId}
+
Room ID: {roomId}
+
Event ID: {eventId}
- {isEditing ? this.state.editComponent : content} + {isEditing ? this.editSourceContent() : this.viewSourceContent()}
{!isEditing && (
- +
)} diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js index a1c111b19c..6809d28e36 100644 --- a/src/components/views/context_menus/MessageContextMenu.js +++ b/src/components/views/context_menus/MessageContextMenu.js @@ -124,16 +124,9 @@ export default class MessageContextMenu extends React.Component { }; onViewSourceClick = () => { - const ev = this.props.mxEvent.replacingEvent() || this.props.mxEvent; const ViewSource = sdk.getComponent('structures.ViewSource'); Modal.createTrackedDialog('View Event Source', '', ViewSource, { - roomId: ev.getRoomId(), - eventId: ev.getId(), - content: ev.event, - event: ev, - isEncrypted: this.props.mxEvent.getType() !== this.props.mxEvent.getWireType(), - // FIXME: _clearEvent is private - decryptedContent: ev._clearEvent, + mxEvent: this.props.mxEvent, }, 'mx_Dialog_viewsource'); this.closeMenu(); }; diff --git a/src/components/views/messages/EditHistoryMessage.js b/src/components/views/messages/EditHistoryMessage.js index 68a3c95745..3bd9dfbd21 100644 --- a/src/components/views/messages/EditHistoryMessage.js +++ b/src/components/views/messages/EditHistoryMessage.js @@ -74,11 +74,7 @@ export default class EditHistoryMessage extends React.PureComponent { _onViewSourceClick = () => { const ViewSource = sdk.getComponent('structures.ViewSource'); Modal.createTrackedDialog('View Event Source', 'Edit history', ViewSource, { - roomId: this.props.mxEvent.getRoomId(), - eventId: this.props.mxEvent.getId(), - content: this.props.mxEvent.event, - isEncrypted: this.props.mxEvent.getType() !== this.props.mxEvent.getWireType(), - decryptedContent: this.props.mxEvent._clearEvent, + mxEvent: this.props.mxEvent, }, 'mx_Dialog_viewsource'); };