Merge pull request #2671 from matrix-org/bwindels/permalinkperf

Improve permalink performance

src/components/structures/MessagePanel.js

@@ -525,6 +525,7 @@ module.exports = React.createClass({
                         eventSendStatus={mxEv.status}
                         tileShape={this.props.tileShape}
                         isTwelveHour={this.props.isTwelveHour}
+                        permalinkCreator={this.props.permalinkCreator}
                         last={last} isSelectedEvent={highlight} />
                 </li>,
         );

src/components/structures/RoomView.js

@@ -30,6 +30,7 @@ import Promise from 'bluebird';
 import filesize from 'filesize';
 const classNames = require("classnames");
 import { _t } from '../../languageHandler';
+import {RoomPermalinkCreator} from "../../matrix-to";
 
 const MatrixClientPeg = require("../../MatrixClientPeg");
 const ContentMessages = require("../../ContentMessages");
@@ -441,6 +442,11 @@ module.exports = React.createClass({
             RoomScrollStateStore.setScrollState(this.state.roomId, this._getScrollState());
         }
 
+        // stop tracking room changes to format permalinks
+        if (this.state.permalinkCreator) {
+            this.state.permalinkCreator.stop();
+        }
+
         if (this.refs.roomView) {
             // disconnect the D&D event listeners from the room view. This
             // is really just for hygiene - we're going to be
@@ -652,6 +658,11 @@ module.exports = React.createClass({
         this._loadMembersIfJoined(room);
         this._calculateRecommendedVersion(room);
         this._updateE2EStatus(room);
+        if (!this.state.permalinkCreator) {
+            const permalinkCreator = new RoomPermalinkCreator(room);
+            permalinkCreator.start();
+            this.setState({permalinkCreator});
+        }
     },
 
     _calculateRecommendedVersion: async function(room) {
@@ -1219,6 +1230,7 @@ module.exports = React.createClass({
                      searchResult={result}
                      searchHighlights={this.state.searchHighlights}
                      resultLink={resultLink}
+                     permalinkCreator={this.state.permalinkCreator}
                      onWidgetLoad={onWidgetLoad} />);
         }
         return ret;
@@ -1725,6 +1737,7 @@ module.exports = React.createClass({
                     showApps={this.state.showApps}
                     uploadAllowed={this.isFileUploadAllowed}
                     e2eStatus={this.state.e2eStatus}
+                    permalinkCreator={this.state.permalinkCreator}
                 />;
         }
 
@@ -1826,6 +1839,7 @@ module.exports = React.createClass({
                 showUrlPreview = {this.state.showUrlPreview}
                 className="mx_RoomView_messagePanel"
                 membersLoaded={this.state.membersLoaded}
+                permalinkCreator={this.state.permalinkCreator}
             />);
 
         let topUnreadMessagesBar = null;

src/components/structures/TimelinePanel.js

@@ -1202,6 +1202,7 @@ var TimelinePanel = React.createClass({
         return (
             <MessagePanel ref="messagePanel"
                           room={this.props.timelineSet.room}
+                          permalinkCreator={this.props.permalinkCreator}
                           hidden={this.props.hidden}
                           backPaginating={this.state.backPaginating}
                           forwardPaginating={forwardPaginating}

src/components/views/context_menus/MessageContextMenu.js

@@ -26,7 +26,6 @@ import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import Resend from '../../../Resend';
 import SettingsStore from '../../../settings/SettingsStore';
-import {makeEventPermalink} from '../../../matrix-to';
 import { isUrlPermitted } from '../../../HtmlUtils';
 
 module.exports = React.createClass({
@@ -197,6 +196,7 @@ module.exports = React.createClass({
         const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
         Modal.createTrackedDialog('share room message dialog', '', ShareDialog, {
             target: this.props.mxEvent,
+            permalinkCreator: this.props.permalinkCreator,
         });
         this.closeMenu();
     },
@@ -305,10 +305,17 @@ module.exports = React.createClass({
             }
         }
 
+        let permalink;
+        if (this.props.permalinkCreator) {
+            permalink = this.props.permalinkCreator.forEvent(
+                this.props.mxEvent.getRoomId(),
+                this.props.mxEvent.getId(),
+            );
+        }
         // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
         const permalinkButton = (
             <div className="mx_MessageContextMenu_field">
-                <a href={makeEventPermalink(mxEvent.getRoomId(), mxEvent.getId())}
+                <a href={permalink}
                   target="_blank" rel="noopener" onClick={this.onPermalinkClick}>
                     { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
                         ? _t('Share Permalink') : _t('Share Message') }

src/components/views/dialogs/ShareDialog.js

@@ -20,7 +20,7 @@ import {Room, User, Group, RoomMember, MatrixEvent} from 'matrix-js-sdk';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import QRCode from 'qrcode-react';
-import {makeEventPermalink, makeGroupPermalink, makeRoomPermalink, makeUserPermalink} from "../../../matrix-to";
+import {RoomPermalinkCreator, makeGroupPermalink, makeUserPermalink} from "../../../matrix-to";
 import * as ContextualMenu from "../../structures/ContextualMenu";
 
 const socials = [
@@ -123,6 +123,14 @@ export default class ShareDialog extends React.Component {
         });
     }
 
+    componentWillMount() {
+        if (this.props.target instanceof Room) {
+            const permalinkCreator = new RoomPermalinkCreator(this.props.target);
+            permalinkCreator.load();
+            this.setState({permalinkCreator});
+        }
+    }
+
     render() {
         let title;
         let matrixToUrl;
@@ -146,9 +154,9 @@ export default class ShareDialog extends React.Component {
             }
 
             if (this.state.linkSpecificEvent) {
-                matrixToUrl = makeEventPermalink(this.props.target.roomId, events[events.length - 1].getId());
+                matrixToUrl = this.state.permalinkCreator.forEvent(events[events.length - 1].getId());
             } else {
-                matrixToUrl = makeRoomPermalink(this.props.target.roomId);
+                matrixToUrl = this.state.permalinkCreator.forRoom();
             }
         } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
             title = _t('Share User');
@@ -169,9 +177,9 @@ export default class ShareDialog extends React.Component {
             </div>;
 
             if (this.state.linkSpecificEvent) {
-                matrixToUrl = makeEventPermalink(this.props.target.getRoomId(), this.props.target.getId());
+                matrixToUrl = this.props.permalinkCreator.forEvent(this.props.target.getId());
             } else {
-                matrixToUrl = makeRoomPermalink(this.props.target.getRoomId());
+                matrixToUrl = this.props.permalinkCreator.forRoom();
             }
         }
 

src/components/views/elements/ReplyThread.js

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import dis from '../../../dispatcher';
 import {wantsDateSeparator} from '../../../DateUtils';
 import {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
-import {makeEventPermalink, makeUserPermalink} from "../../../matrix-to";
+import {makeUserPermalink} from "../../../matrix-to";
 import SettingsStore from "../../../settings/SettingsStore";
 
 // This component does no cycle detection, simply because the only way to make such a cycle would be to
@@ -32,6 +32,7 @@ export default class ReplyThread extends React.Component {
         parentEv: PropTypes.instanceOf(MatrixEvent),
         // called when the ReplyThread contents has changed, including EventTiles thereof
         onWidgetLoad: PropTypes.func.isRequired,
+        permalinkCreator: PropTypes.object.isRequired,
     };
 
     static contextTypes = {
@@ -85,7 +86,7 @@ export default class ReplyThread extends React.Component {
     }
 
     // Part of Replies fallback support
-    static getNestedReplyText(ev) {
+    static getNestedReplyText(ev, permalinkCreator) {
         if (!ev) return null;
 
         let {body, formatted_body: html} = ev.getContent();
@@ -94,7 +95,7 @@ export default class ReplyThread extends React.Component {
             if (html) html = this.stripHTMLReply(html);
         }
 
-        const evLink = makeEventPermalink(ev.getRoomId(), ev.getId());
+        const evLink = permalinkCreator.forEvent(ev.getId());
         const userLink = makeUserPermalink(ev.getSender());
         const mxid = ev.getSender();
 
@@ -159,11 +160,12 @@ export default class ReplyThread extends React.Component {
         };
     }
 
-    static makeThread(parentEv, onWidgetLoad, ref) {
+    static makeThread(parentEv, onWidgetLoad, permalinkCreator, ref) {
         if (!ReplyThread.getParentEventId(parentEv)) {
             return <div />;
         }
-        return <ReplyThread parentEv={parentEv} onWidgetLoad={onWidgetLoad} ref={ref} />;
+        return <ReplyThread parentEv={parentEv} onWidgetLoad={onWidgetLoad}
+            ref={ref} permalinkCreator={permalinkCreator} />;
     }
 
     componentWillMount() {
@@ -294,6 +296,7 @@ export default class ReplyThread extends React.Component {
                 <EventTile mxEvent={ev}
                            tileShape="reply"
                            onWidgetLoad={this.props.onWidgetLoad}
+                           permalinkCreator={this.props.permalinkCreator}
                            isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")} />
             </blockquote>;
         });

src/components/views/messages/RoomCreate.js

@@ -18,8 +18,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import dis from '../../../dispatcher';
-import { makeEventPermalink } from '../../../matrix-to';
+import { RoomPermalinkCreator } from '../../../matrix-to';
 import { _t } from '../../../languageHandler';
+import MatrixClientPeg from '../../../MatrixClientPeg';
 
 module.exports = React.createClass({
     displayName: 'RoomCreate',
@@ -47,13 +48,17 @@ module.exports = React.createClass({
         if (predecessor === undefined) {
             return <div />; // We should never have been instaniated in this case
         }
+        const prevRoom = MatrixClientPeg.get().getRoom(predecessor['room_id']);
+        const permalinkCreator = new RoomPermalinkCreator(prevRoom);
+        permalinkCreator.load();
+        const predecessorPermalink = permalinkCreator.forEvent(predecessor['event_id']);
         return <div className="mx_CreateEvent">
             <img className="mx_CreateEvent_image" src={require("../../../../res/img/room-continuation.svg")} />
             <div className="mx_CreateEvent_header">
                 {_t("This room is a continuation of another conversation.")}
             </div>
             <a className="mx_CreateEvent_link"
-                href={makeEventPermalink(predecessor['room_id'], predecessor['event_id'])}
+                href={predecessorPermalink}
                 onClick={this._onLinkClicked}
             >
                 {_t("Click here to see older messages.")}

src/components/views/rooms/EventTile.js

@@ -32,7 +32,6 @@ import withMatrixClient from '../../../wrappers/withMatrixClient';
 
 const ContextualMenu = require('../../structures/ContextualMenu');
 import dis from '../../../dispatcher';
-import {makeEventPermalink} from "../../../matrix-to";
 import SettingsStore from "../../../settings/SettingsStore";
 import {EventStatus} from 'matrix-js-sdk';
 
@@ -329,6 +328,7 @@ module.exports = withMatrixClient(React.createClass({
             mxEvent: this.props.mxEvent,
             left: x,
             top: y,
+            permalinkCreator: this.props.permalinkCreator,
             eventTileOps: tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined,
             collapseReplyThread: replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined,
             e2eInfoCallback: e2eInfoCallback,
@@ -544,7 +544,10 @@ module.exports = withMatrixClient(React.createClass({
             mx_EventTile_redacted: isRedacted,
         });
 
-        const permalink = makeEventPermalink(this.props.mxEvent.getRoomId(), this.props.mxEvent.getId());
+        let permalink = "#";
+        if (this.props.permalinkCreator) {
+            permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
+        }
 
         const readAvatars = this.getReadAvatars();
 
@@ -697,6 +700,15 @@ module.exports = withMatrixClient(React.createClass({
 
             case 'reply':
             case 'reply_preview': {
+                let thread;
+                if (this.props.tileShape === 'reply_preview') {
+                    thread = ReplyThread.makeThread(
+                        this.props.mxEvent,
+                        this.props.onWidgetLoad,
+                        this.props.permalinkCreator,
+                        'replyThread',
+                    );
+                }
                 return (
                     <div className={classes}>
                         { avatar }
@@ -706,10 +718,7 @@ module.exports = withMatrixClient(React.createClass({
                                 { timestamp }
                             </a>
                             { this._renderE2EPadlock() }
-                            {
-                                this.props.tileShape === 'reply_preview'
-                                && ReplyThread.makeThread(this.props.mxEvent, this.props.onWidgetLoad, 'replyThread')
-                            }
+                            { thread }
                             <EventTileType ref="tile"
                                            mxEvent={this.props.mxEvent}
                                            highlights={this.props.highlights}
@@ -721,6 +730,12 @@ module.exports = withMatrixClient(React.createClass({
                 );
             }
             default: {
+                const thread = ReplyThread.makeThread(
+                    this.props.mxEvent,
+                    this.props.onWidgetLoad,
+                    this.props.permalinkCreator,
+                    'replyThread',
+                );
                 return (
                     <div className={classes}>
                         <div className="mx_EventTile_msgOption">
@@ -732,7 +747,7 @@ module.exports = withMatrixClient(React.createClass({
                                 { timestamp }
                             </a>
                             { this._renderE2EPadlock() }
-                            { ReplyThread.makeThread(this.props.mxEvent, this.props.onWidgetLoad, 'replyThread') }
+                            { thread }
                             <EventTileType ref="tile"
                                            mxEvent={this.props.mxEvent}
                                            highlights={this.props.highlights}

src/components/views/rooms/MessageComposer.js

@@ -415,7 +415,8 @@ export default class MessageComposer extends React.Component {
                     room={this.props.room}
                     placeholder={placeholderText}
                     onFilesPasted={this.uploadFiles}
-                    onInputStateChanged={this.onInputStateChanged} />,
+                    onInputStateChanged={this.onInputStateChanged}
+                    permalinkCreator={this.props.permalinkCreator} />,
                 formattingButton,
                 stickerpickerButton,
                 uploadButton,

src/components/views/rooms/MessageComposerInput.js

@@ -1195,7 +1195,7 @@ export default class MessageComposerInput extends React.Component {
 
             // Part of Replies fallback support - prepend the text we're sending
             // with the text we're replying to
-            const nestedReply = ReplyThread.getNestedReplyText(replyingToEv);
+            const nestedReply = ReplyThread.getNestedReplyText(replyingToEv, this.props.permalinkCreator);
             if (nestedReply) {
                 if (content.formatted_body) {
                     content.formatted_body = nestedReply.html + content.formatted_body;

src/components/views/rooms/SearchResultTile.js

@@ -56,6 +56,7 @@ module.exports = React.createClass({
             }
             if (EventTile.haveTileForEvent(ev)) {
                 ret.push(<EventTile key={eventId+"+"+j} mxEvent={ev} contextual={contextual} highlights={highlights}
+                          permalinkCreator={this.props.permalinkCreator}
                           highlightLink={this.props.resultLink}
                           onWidgetLoad={this.props.onWidgetLoad} />);
             }