floating message input

1 files changed, 12 insertions, 6 deletions

diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index cfef2372..5b57fe0e 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -15,7 +15,8 @@ export default class Thread extends React.Component {
     super(props);
     this.state = {
       msg: {},
-      replies: []
+      replies: [],
+      active: 0
     };
     this.loaded = this.loaded.bind(this);
     this.postComment = this.postComment.bind(this);
@@ -43,7 +44,8 @@ export default class Thread extends React.Component {
         let msg = data.shift();
         this.setState({
           msg: msg,
-          replies: data
+          replies: data,
+          active: 0
         })
       }
       ).catch(ex => {
@@ -53,7 +55,11 @@ export default class Thread extends React.Component {
   loaded() {
     return this.state.msg.mid;
   }
-
+  setActive(msg, event) {
+    this.setState({
+      active: msg.rid || 0
+    })
+  }
   postComment(template) {
     const url = `https://api.juick.com/comment?hash=${this.props.visitor.hash}`;
     let form = new FormData();
@@ -81,7 +87,7 @@ export default class Thread extends React.Component {
             {
               this.loaded() ? (
                 <Message data={msg} visitor={this.props.visitor}>
-                  <MessageInput data={msg} onSend={this.postComment} />
+                  { this.state.active === (msg.rid || 0) && <MessageInput data={msg} onSend={this.postComment} /> }
                   <Recommendations src={msg.recommendations} />
                 </Message>
               ) : (
@@ -143,8 +149,8 @@ export default class Thread extends React.Component {
                             this.props.visitor.uid > 0 ? (
                               <React.Fragment>
                                 <span>&middot;&nbsp;</span>
-                                <a href={`/post?body=%23${msg.mid}/${msg.rid}%20`} className="a-thread-comment">Reply</a>
-                                <div className="msg-comment-target msg-comment-hidden"></div>
+                                <button onClick={this.setActive.bind(this, msg)} className="badge">Reply</button>
+                                { this.state.active === msg.rid && <MessageInput data={msg} onSend={this.postComment} /> }
                               </React.Fragment>
                             ) : (
                                 <React.Fragment>