aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-06-20 17:04:38 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:52 +0300
commit466aa625567db617149479b7b8f446d5537d320c (patch)
treec1ed1152159f33198714e535fe7e5e455931fb84
parent889f5564332de78c982ac1bb4f9964f393482449 (diff)
floating message input
-rw-r--r--vnext/src/components/Thread.js18
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>