chore: refactor code

pass only the mxEvent object to ViewSource
derive the necessary values inside the component

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,
+        mxEvent: PropTypes.object.isRequired, // the MatrixEvent associated with the context menu
-        eventId: PropTypes.string.isRequired,
-        isEncrypted: PropTypes.bool.isRequired,
-        decryptedContent: PropTypes.object,
-        event: 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() {
+    onEdit() {
-        const isStateEvent = this.props.event.isState();
+        this.setState({ isEditing: true });
-        console.log("isStateEvent", isStateEvent);
-        if (isStateEvent) {
-            this.setState({
-                editComponent: (
-                    <MatrixClientContext.Consumer>
-                        {(cli) => (
-                            <SendCustomEvent
-                                room={cli.getRoom(this.props.roomId)}
-                                forceStateEvent={true}
-                                onBack={() => this.onBack()}
-                                inputs={{
-                                    eventType: this.props.event.getType(),
-                                    evContent: JSON.stringify(this.props.event.getContent(), null, "\t"),
-                                    stateKey: this.props.event.getStateKey(),
-                                }}
-                            />
-                        )}
-                    </MatrixClientContext.Consumer>
-                ),
-            });
-        } 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: (
-                    <MatrixClientContext.Consumer>
-                        {(cli) => (
-                            <SendCustomEvent
-                                room={cli.getRoom(this.props.roomId)}
-                                forceStateEvent={false}
-                                forceGeneralEvent={true}
-                                onBack={() => this.onBack()}
-                                inputs={{
-                                    eventType: this.props.event.getType(),
-                                    evContent: JSON.stringify(content, null, "\t"),
-                                }}
-                            />
-                        )}
-                    </MatrixClientContext.Consumer>
-                ),
-            });
-        }
     }
 
-    render() {
+    // returns the dialog body for viewing the event source
-        const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
+    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 (isEncrypted) {
-        if (this.props.isEncrypted) {
+            return (
-            content = (
                 <>
                     <details open className="mx_ViewSource_details">
                         <summary>
                             <span className="mx_ViewSource_heading">{_t("Decrypted event source")}</span>
                         </summary>
-                        <SyntaxHighlight className="json">{JSON.stringify(this.props.decryptedContent, null, 2)}</SyntaxHighlight>
+                        <SyntaxHighlight className="json">{JSON.stringify(decryptedEventSource, null, 2)}</SyntaxHighlight>
                     </details>
                     <details className="mx_ViewSource_details">
                         <summary>
                             <span className="mx_ViewSource_heading">{_t("Original event source")}</span>
                         </summary>
-                        <SyntaxHighlight className="json">{JSON.stringify(this.props.content, null, 2)}</SyntaxHighlight>
+                        <SyntaxHighlight className="json">{JSON.stringify(originalEventSource, null, 2)}</SyntaxHighlight>
                     </details>
                 </>
             );
         } else {
-            content = (
+            return (
                 <>
                     <div className="mx_ViewSource_heading">{_t("Original event source")}</div>
-                    <SyntaxHighlight className="json">{JSON.stringify(this.props.content, null, 2)}</SyntaxHighlight>
+                    <SyntaxHighlight className="json">{JSON.stringify(originalEventSource, null, 2)}</SyntaxHighlight>
                 </>
             );
         }
+    }
 
-        const isEditing = this.state.editComponent !== null;
+    // returns the SendCustomEvent component prefilled with the correct details
-        console.log(isEditing);
+    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 (
+                <MatrixClientContext.Consumer>
+                    {(cli) => (
+                        <SendCustomEvent
+                            room={cli.getRoom(roomId)}
+                            forceStateEvent={true}
+                            onBack={() => this.onBack()}
+                            inputs={{
+                                eventType: mxEvent.getType(),
+                                evContent: JSON.stringify(originalContent, null, "\t"),
+                                stateKey: mxEvent.getStateKey(),
+                            }}
+                        />
+                    )}
+                </MatrixClientContext.Consumer>
+            );
+        } 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 (
+                <MatrixClientContext.Consumer>
+                    {(cli) => (
+                        <SendCustomEvent
+                            room={cli.getRoom(roomId)}
+                            forceStateEvent={false}
+                            forceGeneralEvent={true}
+                            onBack={() => this.onBack()}
+                            inputs={{
+                                eventType: mxEvent.getType(),
+                                evContent: JSON.stringify(newContent, null, "\t"),
+                            }}
+                        />
+                    )}
+                </MatrixClientContext.Consumer>
+            );
+        }
+    }
+
+    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 (
             <BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t("View Source")}>
                 <div>
-                    <div className="mx_ViewSource_label_left">Room ID: {this.props.roomId}</div>
+                    <div className="mx_ViewSource_label_left">Room ID: {roomId}</div>
-                    <div className="mx_ViewSource_label_left">Event ID: {this.props.eventId}</div>
+                    <div className="mx_ViewSource_label_left">Event ID: {eventId}</div>
                     <div className="mx_ViewSource_separator" />
-                    {isEditing ? this.state.editComponent : content}
+                    {isEditing ? this.editSourceContent() : this.viewSourceContent()}
                 </div>
                 {!isEditing && (
                     <div className="mx_Dialog_buttons">
-                        <button onClick={() => this.editEvent()}>{_t("Edit")}</button>
+                        <button onClick={() => this.onEdit()}>{_t("Edit")}</button>
                     </div>
                 )}
             </BaseDialog>

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(),
+            mxEvent: this.props.mxEvent,
-            eventId: ev.getId(),
-            content: ev.event,
-            event: ev,
-            isEncrypted: this.props.mxEvent.getType() !== this.props.mxEvent.getWireType(),
-            // FIXME: _clearEvent is private
-            decryptedContent: ev._clearEvent,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
     };

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(),
+            mxEvent: this.props.mxEvent,
-            eventId: this.props.mxEvent.getId(),
-            content: this.props.mxEvent.event,
-            isEncrypted: this.props.mxEvent.getType() !== this.props.mxEvent.getWireType(),
-            decryptedContent: this.props.mxEvent._clearEvent,
         }, 'mx_Dialog_viewsource');
     };