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