aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components/Thread.js
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-04-08 11:59:59 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commit9c0f90c01b918cc56ac996eebdc21bf58ba07bb1 (patch)
treea67e1f3282f0dc6d48edfb95101cdcb6c1332fcc /vnext/src/components/Thread.js
parentdc0fd660d0b5e2ed557dd7409c10f06a198bfe52 (diff)
Thread using hooks
Diffstat (limited to 'vnext/src/components/Thread.js')
-rw-r--r--vnext/src/components/Thread.js182
1 files changed, 84 insertions, 98 deletions
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 6d8a5fd3..4946cf5f 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import ReactRouterPropTypes from 'react-router-prop-types';
import { UserType } from './Types';
@@ -16,133 +16,119 @@ import { format } from '../utils/embed';
import { getMessages, comment, markReadTracker } from '../api';
-export default class Thread extends React.Component {
- constructor(props) {
- super(props);
- const { msg } = (this.props.location.state || {});
- this.state = {
- msg: msg || {},
- replies: [],
- loading: false,
- active: 0
- };
- }
- componentDidMount() {
- this.loadReplies();
- }
- loadReplies() {
+export default function Thread(props) {
+ const [message, setMessage] = useState(props.location.state || {});
+ const [replies, setReplies] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [active, setActive] = useState(0);
+ useEffect(() => {
+ setActive(0);
+ loadReplies();
+ }, []);
+ let loadReplies = () => {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
- this.setState({ replies: [], loading: true });
- const { mid } = this.props.match.params;
+
+ setReplies([]);
+ setLoading(true);
+ const { mid } = props.match.params;
let params = {
mid: mid
};
- if (this.props.visitor && this.props.visitor.hash) {
- params.hash = this.props.visitor.hash;
+ if (props.visitor && props.visitor.hash) {
+ params.hash = props.visitor.hash;
}
getMessages('/api/thread', params)
.then(response => {
- let msg = response.data.shift();
- this.setState({
- msg: { ...msg },
- replies: response.data,
- loading: false,
- active: 0
- });
+ setMessage(response.data.shift());
+ setReplies(response.data);
+ setLoading(false);
+ setActive(0);
}
).catch(ex => {
console.log(ex);
});
}
- setActive(msg, event) {
- this.setState({
- active: msg.rid || 0
- });
- }
- onReply = (msg) => {
- if (msg.mid == this.state.msg.mid) {
+ let onReply = (msg) => {
+ if (msg.mid == message.mid) {
this.setState({
replies: [...this.state.replies, msg]
});
}
}
- postComment = (template) => {
+ let postComment = (template) => {
const { mid, rid, body, attach } = template;
comment(mid, rid, body, attach).then(res => {
- this.loadReplies();
+ loadReplies();
})
.catch(console.log);
}
- render() {
- const msg = this.state.msg;
- const loaders = Math.min(msg.replies || 0, 10);
- return (
- <>
+ const loaders = Math.min(message.replies || 0, 10);
+ return (
+ <>
+ {
+ message.mid ? (
+ <Message data={message} visitor={props.visitor}>
+ {active === (message.rid || 0) && <MessageInput data={message} onSend={postComment}>Write a comment...</MessageInput>}
+ </Message>
+ ) : (
+ <Spinner />
+ )
+ }
+ <ul id="replies">
{
- msg.mid ? (
- <Message data={msg} visitor={this.props.visitor}>
- {this.state.active === (msg.rid || 0) && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>}
- </Message>
- ) : (
- <Spinner />
- )
- }
- <ul id="replies">
- {
- !this.state.loading ? this.state.replies.map((msg) => (
- <li id={msg.rid} key={msg.rid} className="msg">
- <div className="msg-cont">
- <div className="msg-header">
- <Avatar user={msg.user}>
- <div className="msg-ts">
- {msg.replyto > 0 &&
- (
- <a href={`#${msg.replyto}`} className="info-avatar"><img src={msg.to.avatar}/> {msg.to.uname}&nbsp;</a>
- )}
- </div>
- </Avatar>
- </div>
- {
- msg.html ? <div className="msg-txt" dangerouslySetInnerHTML={{__html: msg.body }}/>
- :
- <div className="msg-txt">
- <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} />
+ !loading ? replies.map((msg) => (
+ <li id={msg.rid} key={msg.rid} className="msg">
+ <div className="msg-cont">
+ <div className="msg-header">
+ <Avatar user={msg.user}>
+ <div className="msg-ts">
+ {msg.replyto > 0 &&
+ (
+ <a href={`#${msg.replyto}`} className="info-avatar"><img src={msg.to.avatar} /> {msg.to.uname}&nbsp;</a>
+ )}
</div>
- }
+ </Avatar>
+ </div>
+ {
+ msg.html ? <div className="msg-txt" dangerouslySetInnerHTML={{ __html: msg.body }} />
+ :
+ <div className="msg-txt">
+ <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} />
+ </div>
+ }
+ {
+ msg.photo &&
+ <p className="ir"><a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
+ <img src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" /></a>
+ </p>
+ }
+ <div className="msg-links">
{
- msg.photo &&
- <p className="ir"><a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
- <img src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" /></a>
- </p>
- }
- <div className="msg-links">
- {
- this.props.visitor.uid > 0 ? (
+ props.visitor.uid > 0 ? (
+ <>
+ {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>}
+ {active === msg.rid && <MessageInput data={msg} onSend={postComment}>Write a comment...</MessageInput>}
+ </>
+ ) : (
<>
- {this.state.active === msg.rid || <span style={linkStyle} onClick={() => this.setActive(msg)}>Reply</span>}
- {this.state.active === msg.rid && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>}
+ <span>&nbsp;&middot;&nbsp;</span>{active === msg.rid || <Button>Reply</Button>}
</>
- ) : (
- <>
- <span>&nbsp;&middot;&nbsp;</span>{this.state.active === msg.rid || <Button>Reply</Button>}
- </>
- )
- }
- </div>
+ )
+ }
</div>
- </li>
- )) : (
- <>
- {Array(loaders).fill().map((it, i) => <Spinner key={i} />)}
- </>
- )
- }
- </ul>
- </>
- );
- }
+ </div>
+ </li>
+ )) : (
+ <>
+ {Array(loaders).fill().map((it, i) => <Spinner key={i} />)}
+ </>
+ )
+ }
+ </ul>
+ </>
+ );
}
const linkStyle = {