import React from 'react';
import { Link } from 'react-router-dom';
import * as qs from 'query-string';
import moment from 'moment';
import Message from './Message';
import MessageInput from './MessageInput';
import Spinner from './Spinner';
import Avatar from './Avatar';
import Icon from './Icon';
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,
replies: [],
active: 0
};
this.loaded = this.loaded.bind(this);
this.postComment = this.postComment.bind(this);
}
componentDidMount() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
this.loadReplies();
}
loadReplies() {
this.setState({ replies: [] })
const { mid } = this.props.match.params;
let params = {
mid: mid
}
if (this.props.visitor && this.props.visitor.hash) {
params.hash = this.props.visitor.hash
};
const url = `https://api.juick.com/thread?${qs.stringify(params)}`;
fetch(url)
.then(response => {
return response.json()
})
.then(data => {
let msg = data.shift();
this.setState({
msg: msg,
replies: data,
active: 0
})
}
).catch(ex => {
console.log(ex);
});
}
loaded() {
return (this.state.replies && this.state.replies.length > 0) || ( 'mid' in this.state.msg && !('replies' in this.state.msg));
}
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();
form.append('mid', template.mid);
form.append('rid', template.rid);
form.append('body', template.body);
form.append('attach', template.attach);
fetch(url, {
method: 'POST',
body: form
}).then(response => {
return response.json()
}).then(res => {
this.loadReplies()
})
.catch(console.log)
}
render() {
const msg = this.state.msg;
return (
= 0) }}>
{
}
{msg.replies && `Replies (${msg.replies})`}
{
this.state.replies.map((msg) => (
) : (