import { useEffect, useState, useRef, useCallback } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import Message from './Message';
import MessageInput from './MessageInput';
import Spinner from './Spinner';
import Avatar from './Avatar';
import { UserLink } from './UserInfo';
import Button from './Button';
import defaultAvatar from '../assets/av-96.png';
import { format, embedUrls } from '../utils/embed';
import { getMessages, comment, update, fetchUserUri } from '../api';
import { chatItemStyle } from './helpers/BubbleStyle';
import './Thread.css';
let isMounted;
/**
* @type import('../api').Message
*/
const emptyMessage = {};
/**
* @param {{
msg: import('../api').Message,
draft: string,
visitor: import('../api').User,
active: number,
setActive: function,
onStartEditing: function,
postComment: function
}} props
*/
function Comment({ msg, draft, visitor, active, setActive, onStartEditing, postComment }) {
const embedRef = useRef();
const msgRef = useRef();
const [author, setAuthor] = useState(msg.user);
useEffect(() => {
if (msgRef.current) {
embedUrls(msgRef.current.querySelectorAll('a'), embedRef.current);
if (!embedRef.current.hasChildNodes()) {
embedRef.current.style.display = 'none';
}
}
}, []);
const userRef = useRef(author);
useEffect(() => {
isMounted = true;
if (userRef.current.uri) {
fetchUserUri(userRef.current.uri).then(remote_user => {
if (isMounted) {
setAuthor({
uid: 0,
uname: remote_user.preferredUsername,
avatar: remote_user.icon && remote_user.icon.url,
uri: author.uri
});
}
}).catch(e => {
setAuthor({
uid: 0,
uname: userRef.current.uri,
uri: author.uri,
avatar: defaultAvatar
});
});
}
return () => {
isMounted = false;
};
}, [author.uri, msg.user]);
return (
{
msg.body &&
}
{
msg.photo &&
}
{
active === msg.rid &&
Write a comment...
}
{
visitor.uid > 0 ? (
<>
{active === msg.rid || setActive(msg.rid)}>Reply}
{
visitor.uid == msg.user.uid &&
<>
·
onStartEditing(msg)}>Edit
>
}
>
) : (
<>
· {active === msg.rid || }
>
)
}
);
}
/**
* @param {{
visitor: import('../api').SecureUser
connection: EventSource?
}} props
*/
export default function Thread(props) {
const location = useLocation();
const params = useParams();
const [message, setMessage] = useState((location.state || {}).msg || {});
const [replies, setReplies] = useState([]);
const [loading, setLoading] = useState(false);
const [active, setActive] = useState(0);
const [editing, setEditing] = useState(emptyMessage);
const [hash, setHash] = useState(props.visitor.hash);
const { mid } = params;
let loadReplies = useCallback(() => {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
setReplies([]);
setLoading(true);
let params = {
mid: mid
};
params.hash = hash;
getMessages('/api/thread', params)
.then(response => {
let updatedMessage = response.data.shift();
if (!message.mid) {
setMessage(updatedMessage);
}
setReplies(response.data);
setLoading(false);
setActive(0);
}
).catch(ex => {
console.log(ex);
});
}, [hash, message.mid, mid]);
let onReply = useCallback((json) => {
const msg = JSON.parse(json.data);
if (msg.mid == message.mid) {
setReplies(oldReplies => {
return [...oldReplies, msg];
});
}
}, [message]);
let postComment = useCallback((template) => {
const { mid, rid, body, attach } = template;
let commentAction = editing.rid ? update(mid, editing.rid, body) : comment(mid, rid, body, attach);
commentAction.then(res => {
setEditing(emptyMessage);
loadReplies();
})
.catch(console.log);
}, [editing.rid, loadReplies]);
let startEditing = (reply) => {
setActive(reply.replyto);
setEditing(reply);
};
useEffect(() => {
setActive(0);
loadReplies();
}, [loadReplies]);
useEffect(() => {
if (props.connection.addEventListener && message.mid) {
props.connection.addEventListener('msg', onReply);
}
return () => {
if (props.connection.removeEventListener && message.mid) {
props.connection.removeEventListener('msg', onReply);
}
};
}, [props.connection, message.mid, onReply]);
const loaders = Math.min(message.replies || 0, 10);
return (
<>
{
message.mid ? (
{active === (message.rid || 0) && Write a comment...}
) : (
)
}
{
message.replies &&
{
!loading ? replies.map((msg) => (
-
)) : (
<>
{
// @ts-ignore
Array(loaders).fill().map((it, i) => )
}
>
)
}
}
>
);
}
/**
* @type React.CSSProperties
*/
const linkStyle = {
cursor: 'pointer'
};