import React, { useEffect, useState, useRef } from 'react';
import PropTypes from 'prop-types';
import ReactRouterPropTypes from 'react-router-prop-types';
import { UserType, MessageType } from './Types';
import Message from './Message';
import MessageInput from './MessageInput';
import Spinner from './Spinner';
import Avatar from './Avatar';
import Button from './Button';
import { format, embedUrls } from '../utils/embed';
import { getMessages, comment, markReadTracker } from '../api';
function Comment({ msg, visitor, active, setActive, postComment }) {
const embedRef = useRef();
const msgRef = useRef();
useEffect(() => {
if (msgRef.current) {
embedUrls(msgRef.current.querySelectorAll('a'), embedRef.current);
if (!embedRef.current.hasChildNodes()) {
embedRef.current.style.display = 'none';
}
}
}, []);
return (
{
msg.html ?
:
}
{
msg.photo &&
}
{
visitor.uid > 0 ? (
<>
{active === msg.rid || setActive(msg.rid)}>Reply}
{active === msg.rid && Write a comment...}
>
) : (
<>
· {active === msg.rid || }
>
)
}
);
}
Comment.propTypes = {
msg: MessageType.isRequired,
visitor: UserType.isRequired,
active: PropTypes.bool.isRequired,
setActive: PropTypes.func.isRequired,
postComment: PropTypes.func.isRequired
};
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(() => {
if (props.connection) {
props.connection.addEventListener('msg', onReply);
}
setActive(0);
loadReplies();
return () => {
if (props.connection) {
props.connection.removeEventListener('msg', onReply);
}
};
}, [props.connection]);
let loadReplies = () => {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
setReplies([]);
setLoading(true);
const { mid } = props.match.params;
let params = {
mid: mid
};
if (props.visitor && props.visitor.hash) {
params.hash = props.visitor.hash;
}
getMessages('/api/thread', params)
.then(response => {
setMessage(response.data.shift());
setReplies(response.data);
setLoading(false);
setActive(0);
}
).catch(ex => {
console.log(ex);
});
};
let onReply = (json) => {
const msg = JSON.parse(json.data);
if (msg.mid == message.mid) {
setReplies([...this.state.replies, msg]);
}
};
let postComment = (template) => {
const { mid, rid, body, attach } = template;
comment(mid, rid, body, attach).then(res => {
loadReplies();
})
.catch(console.log);
};
const loaders = Math.min(message.replies || 0, 10);
return (
<>
{
message.mid ? (
{active === (message.rid || 0) && Write a comment...}
) : (
)
}
{
!loading ? replies.map((msg) => (
-
)) : (
<>
{Array(loaders).fill().map((it, i) => )}
>
)
}
>
);
}
const linkStyle = {
cursor: 'pointer'
};
Thread.propTypes = {
location: ReactRouterPropTypes.location,
history: ReactRouterPropTypes.history,
match: ReactRouterPropTypes.match,
visitor: UserType.isRequired,
connection: PropTypes.shape.isRequired
};