From f1a484cc662174717118bff1274aa473f5fa6ad9 Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Fri, 4 Nov 2022 22:05:49 +0300
Subject: Fix editing

---
 vnext/src/ui/Comment.js             | 71 +++++++++++++------------------------
 vnext/src/ui/Message.js             |  6 +---
 vnext/src/ui/Post.js                |  2 +-
 vnext/src/ui/Thread.js              |  5 +--
 vnext/src/ui/helpers/BubbleStyle.js |  3 +-
 5 files changed, 31 insertions(+), 56 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
diff --git a/vnext/src/ui/Message.js b/vnext/src/ui/Message.js
index 37d74312..581ede55 100644
--- a/vnext/src/ui/Message.js
+++ b/vnext/src/ui/Message.js
@@ -64,11 +64,7 @@ export default function Message({ data, children }) {
                                     <span>&nbsp;&middot;&nbsp;</span>
                                     <Link to={{
                                         pathname: '/post',
-                                        query: {
-                                            mid: data.mid,
-                                            body: data.body
-                                        }
-                                    }}>Edit</Link>
+                                    }} state={{data: data}}>Edit</Link>
                                 </>
                             }
                         </div>
diff --git a/vnext/src/ui/Post.js b/vnext/src/ui/Post.js
index 9795092c..fbd55675 100644
--- a/vnext/src/ui/Post.js
+++ b/vnext/src/ui/Post.js
@@ -17,7 +17,7 @@ export default function Post() {
   const location = useLocation();
   const navigate = useNavigate();
   const [visitor] = useVisitor();
-  let draftMessage = (location.state || {}).draft || {};
+  let draftMessage = (location.state || {}).data || {};
   let [draft, setDraft] = useState(draftMessage.body);
   let params = qs.parse(window.location.search.substring(1));
   let postMessage = (template) => {
diff --git a/vnext/src/ui/Thread.js b/vnext/src/ui/Thread.js
index d00c197e..979ef72b 100644
--- a/vnext/src/ui/Thread.js
+++ b/vnext/src/ui/Thread.js
@@ -67,7 +67,8 @@ export default function Thread(props) {
   let postComment = (template) => {
     const { body, attach } = template;
     let commentAction = editing.rid ? update(mid, editing.rid, body) : comment(mid, active, body, attach);
-    commentAction.then(() => {
+    commentAction.then((res) => {
+      console.log(res);
       setEditing(emptyMessage);
       loadReplies();
     })
@@ -75,7 +76,7 @@ export default function Thread(props) {
   };
 
   let startEditing = (reply) => {
-    setActive(reply.replyto);
+    setActive(reply.to.rid || 0);
     setEditing(reply);
   };
 
diff --git a/vnext/src/ui/helpers/BubbleStyle.js b/vnext/src/ui/helpers/BubbleStyle.js
index 23c2df13..d2886e1e 100644
--- a/vnext/src/ui/helpers/BubbleStyle.js
+++ b/vnext/src/ui/helpers/BubbleStyle.js
@@ -4,7 +4,8 @@
  * @returns { import('react').CSSProperties} CSS properties
  */
 export function chatItemStyle(me, msg) {
-    const isMe = me.uid === msg.user.uid;
+    const user = msg.user;
+    const isMe = me.uid === user.uid;
     const alignment = isMe ? 'flex-end' : 'flex-start';
     return {
         padding: '3px 6px',
-- 
cgit v1.2.3