push message to thread state

2 files changed, 9 insertions, 6 deletions

diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index 8e060aa80..e9d3eebd2 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -22,7 +22,7 @@ export default function Message(props) {
                 </span>
                 <Avatar user={msg.user} />
                 <div className="msg-ts">
-                    <Link to={{ pathname: `/${msg.user.uname}/${msg.mid}` }}>
+                    <Link to={{ pathname: `/${msg.user.uname}/${msg.mid}`, state: {msg: msg} }}>
                         <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={msg.timestamp}
                             title={moment.utc(msg.timestamp).local().format('lll')}>
                             {moment.utc(msg.timestamp).fromNow()}
@@ -69,7 +69,7 @@ export default function Message(props) {
                         )}
                 {!Boolean(msg.ReadOnly) | (visitor.uid === msg.user.uid) && (
                     <React.Fragment>
-                        <Link to={{ pathname: `/${msg.user.uname}/${msg.mid}` }} className="a-comment msg-button">
+                        <Link to={{ pathname: `/${msg.user.uname}/${msg.mid}`, state: {msg: msg} }} className="a-comment msg-button">
                             <span className="msg-button-icon">
                                 <Icon name="ei-comment" size="s" />
                                 {msg.replies > 0 &&
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index a1aaa837b..a404cf578 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -13,8 +13,9 @@ import { format } from '../utils/embed';
 export default class Thread extends React.Component {
   constructor(props) {
     super(props);
+    const { msg } = this.props.location.state || {}
     this.state = {
-      msg: {},
+      msg: msg,
       replies: [],
       active: 0
     };
@@ -53,7 +54,7 @@ export default class Thread extends React.Component {
       });
   }
   loaded() {
-    return this.state.msg.mid;
+    return this.state.msg && this.state.msg.mid;
   }
   setActive(msg, event) {
     this.setState({
@@ -85,7 +86,7 @@ export default class Thread extends React.Component {
         <ul id="0">
           <li className="msg msgthread">
             {
-              this.loaded() ? (
+              this.state.msg ? (
                 <Message data={msg} visitor={this.props.visitor}>
                   { this.state.active === (msg.rid || 0) && <MessageInput data={msg} onSend={this.postComment} /> }
                   <Recommendations src={msg.recommendations} />
@@ -97,7 +98,7 @@ export default class Thread extends React.Component {
           </li>
         </ul>
         {
-          this.loaded() && (
+          this.loaded() ? (
             <React.Fragment>
               <div className="title2">
                 {
@@ -165,6 +166,8 @@ export default class Thread extends React.Component {
                 }
               </ul>
             </React.Fragment>
+          ) : (
+            <Spinner /><Spinner /><Spinner />
           )
         }
       </React.Fragment>