import { useEffect, useRef, useState } from 'react'; import Avatar from './Avatar'; import { UserLink } from './UserInfo'; import Button from './Button'; import defaultAvatar from '../assets/av-96.png'; import MessageInput from './MessageInput'; import { fetchUserUri } from '../api'; import { chatItemStyle } from './helpers/BubbleStyle'; import { format, embedUrls } from '../utils/embed'; let isMounted; /** * @param {{ msg: import('../api').Message, draft: string, visitor: import('../api').User, active: number, setActive: function, onStartEditing: function, postComment: function }} props */ export default 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.replyto > 0 && ( )}
{ msg.body &&

= 0) }} />

} { 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 || } ) }
); } /** * @type React.CSSProperties */ const linkStyle = { cursor: 'pointer' };