From 47d4e5f8d15dc6bfb63415158dc632801f6bbb24 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 18 Dec 2017 19:28:01 +0000
Subject: [PATCH] nest quotes, but only when people want to click through them
 loads pre-emptively

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/elements/Quote.js       | 36 +++++++++++++++-----
 src/components/views/messages/TextualBody.js |  6 ++--
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/components/views/elements/Quote.js b/src/components/views/elements/Quote.js
index f1fa3bdbac..6a7e5d058f 100644
--- a/src/components/views/elements/Quote.js
+++ b/src/components/views/elements/Quote.js
@@ -54,6 +54,8 @@ export default class Quote extends React.Component {
         url: PropTypes.string,
         // The parent event
         parentEv: PropTypes.instanceOf(MatrixEvent),
+        // Whether this isn't the first Quote, and we're being nested
+        isNested: PropTypes.bool,
     };
 
     constructor(props, context) {
@@ -62,7 +64,10 @@ export default class Quote extends React.Component {
         this.state = {
             // The event related to this quote
             event: null,
+            show: !this.props.isNested,
         };
+
+        this.onShowNested = this.onShowNested.bind(this);
     }
 
     getChildContext() {
@@ -112,20 +117,33 @@ export default class Quote extends React.Component {
         this.setState({room, event});
     }
 
+    onShowNested() {
+        this.setState({
+            show: true,
+        });
+    }
+
     render() {
         const ev = this.state.event;
         if (ev) {
-            const EventTile = sdk.getComponent('views.rooms.EventTile');
-            let dateSep = null;
-            if (wantsDateSeparator(this.props.parentEv, this.state.event)) {
-                const DateSeparator = sdk.getComponent('messages.DateSeparator');
-                dateSep = <a href={this.props.url}><DateSeparator ts={this.state.event.getDate()} /></a>;
+            if (this.state.show) {
+                const EventTile = sdk.getComponent('views.rooms.EventTile');
+                let dateSep = null;
+                if (wantsDateSeparator(this.props.parentEv, this.state.event)) {
+                    const DateSeparator = sdk.getComponent('messages.DateSeparator');
+                    dateSep = <a href={this.props.url}><DateSeparator ts={this.state.event.getDate()} /></a>;
+                }
+
+                return <blockquote className="mx_Quote">
+                    { dateSep }
+                    <EventTile mxEvent={ev} tileShape="quote" />
+                </blockquote>;
             }
 
-            return <blockquote className="mx_Quote">
-                { dateSep }
-                <EventTile mxEvent={ev} tileShape="quote" />
-            </blockquote>;
+            return <div>
+                <a onClick={this.onShowNested} className="mx_Quote_show">{ _t('Quote') }</a>
+                <br />
+            </div>;
         }
 
         // Deliberately render nothing if the URL isn't recognised
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 54576fa794..fc5f1cc5f8 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -202,14 +202,12 @@ module.exports = React.createClass({
 
                     // update the current node with one that's now taken its place
                     node = pillContainer;
-                } else if (SettingsStore.isFeatureEnabled("feature_rich_quoting") && this.props.tileShape !== 'quote' &&
-                    Quote.isMessageUrl(href)
-                ) {
+                } else if (SettingsStore.isFeatureEnabled("feature_rich_quoting") && Quote.isMessageUrl(href)) {
                     // only allow this branch if we're not already in a quote, as fun as infinite nesting is.
                     const quoteContainer = document.createElement('span');
 
                     const quote =
-                        <Quote url={href} parentEv={this.props.mxEvent} />;
+                        <Quote url={href} parentEv={this.props.mxEvent} isNested={this.props.tileShape === 'quote'} />;
 
                     ReactDOM.render(quote, quoteContainer);
                     node.parentNode.replaceChild(quoteContainer, node);