aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/ui/Comment.js
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/ui/Comment.js')
-rw-r--r--vnext/src/ui/Comment.js71
1 files changed, 24 insertions, 47 deletions
diff --git a/vnext/src/ui/Comment.js b/vnext/src/ui/Comment.js
index 45c80187..717d62e9 100644
--- a/vnext/src/ui/Comment.js
+++ b/vnext/src/ui/Comment.js
@@ -1,76 +1,53 @@
import { useEffect, useRef, useState } from 'react';
+import MessageInput from './MessageInput';
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';
-import { useVisitor } from './VisitorContext';
-let isMounted;
+import { chatItemStyle } from './helpers/BubbleStyle';
+import { useVisitor } from './VisitorContext';
/**
* @param {{
- msg: import('../api').Message,
+ visitor: import('../client').SecureUser,
+ msg: import('../client').Message,
draft: string,
active: number,
- setActive: function,
- onStartEditing: function,
- postComment: function
- }} props
+ setActive: Function,
+ onStartEditing: Function,
+ postComment: function({body:string, attach: string | File}) : void
+ }} props props
+ * @returns React.ReactElement
*/
export default function Comment({ msg, draft, active, setActive, onStartEditing, postComment }) {
- const embedRef = useRef();
- const msgRef = useRef();
const [visitor] = useVisitor();
- const [author, setAuthor] = useState(msg.user);
+ /** @type {React.MutableRefObject<HTMLDivElement?>} */
+ const embedRef = useRef(null);
+ /** @type {React.MutableRefObject<HTMLDivElement?>} */
+ const msgRef = useRef(null);
+ const [author] = useState(msg.user);
useEffect(() => {
- if (msgRef.current) {
+ if (msgRef.current && embedRef.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 (
<div style={chatItemStyle(visitor, msg)}>
<div className="msg-header">
<Avatar user={author} link={author.uri}>
<div className="msg-ts">
- {msg.replyto > 0 &&
+ {
+ msg.to && msg.replyto && msg.replyto > 0 &&
(
<UserLink user={msg.to} />
- )}
+ )
+ }
</div>
</Avatar>
</div>
@@ -92,7 +69,7 @@ export default function Comment({ msg, draft, active, setActive, onStartEditing,
}
<div className="embedContainer" ref={embedRef} />
{
- active === msg.rid && <MessageInput data={msg} text={draft || ''} onSend={postComment}>Write a comment...</MessageInput>
+ active === msg.rid && <MessageInput text={draft || ''} onSend={postComment} placeholder="Write a comment..." />
}
<div className="msg-links">
{
@@ -118,8 +95,8 @@ export default function Comment({ msg, draft, active, setActive, onStartEditing,
);
}
/**
- * @type React.CSSProperties
+ * @type {React.CSSProperties}
*/
- const linkStyle = {
+const linkStyle = {
cursor: 'pointer'
-};
+}; \ No newline at end of file