import React from 'react'; import ReactRouterPropTypes from 'react-router-prop-types'; import { UserType } from './Types'; import { Link } from 'react-router-dom'; import moment from 'moment'; import Message from './Message'; import MessageInput from './MessageInput'; import Spinner from './Spinner'; import Avatar from './Avatar'; import Button from './Button'; import { UserLink } from './UserInfo'; 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() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; this.setState({ replies: [], loading: true }); const { mid } = this.props.match.params; let params = { mid: mid }; if (this.props.visitor && this.props.visitor.hash) { params.hash = this.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 }); } ).catch(ex => { console.log(ex); }); } setActive(msg, event) { this.setState({ active: msg.rid || 0 }); } onReply = (msg) => { if (msg.mid == this.state.msg.mid) { this.setState({ replies: [...this.state.replies, msg] }); } } postComment = (template) => { const { mid, rid, body, attach } = template; comment(mid, rid, body, attach).then(res => { this.loadReplies(); }) .catch(console.log); } render() { const msg = this.state.msg; const loaders = Math.min(msg.replies || 0, 10); return ( <> { msg.mid ? ( {this.state.active === (msg.rid || 0) && Write a comment...} ) : ( ) } ); } } const linkStyle = { cursor: 'pointer' }; Thread.propTypes = { location: ReactRouterPropTypes.location, history: ReactRouterPropTypes.history, match: ReactRouterPropTypes.match, visitor: UserType.isRequired }; function Recommendations({ forMessage, ...rest }) { const { likes, recommendations } = forMessage; return recommendations && recommendations.length > 0 && (
{'Recommended by '} { recommendations.map(it => ( )).reduce((prev, curr) => [prev, ', ', curr]) } { likes > recommendations.length && ( and {likes - recommendations.length} others) }
) || null; }