From 6e2f663ef80a784dd9b51fae76b17c042bbb46ee Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Fri, 28 Oct 2022 14:29:54 +0300 Subject: Split `Thread` and `Comment` components --- vnext/src/ui/Comment.js | 124 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 vnext/src/ui/Comment.js (limited to 'vnext/src/ui/Comment.js') diff --git a/vnext/src/ui/Comment.js b/vnext/src/ui/Comment.js new file mode 100644 index 00000000..756b3487 --- /dev/null +++ b/vnext/src/ui/Comment.js @@ -0,0 +1,124 @@ +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 ( +
= 0) }} /> +