Message editing

1 files changed, 39 insertions, 22 deletions

diff --git a/vnext/src/ui/Thread.js b/vnext/src/ui/Thread.js
index 30fa0723..6cbb5188 100644
--- a/vnext/src/ui/Thread.js
+++ b/vnext/src/ui/Thread.js
@@ -12,13 +12,13 @@ import Button from './Button';
 
 import { format, embedUrls } from '../utils/embed';
 
-import { getMessages, comment, markReadTracker, fetchUserUri } from '../api';
+import { getMessages, comment, update, markReadTracker, fetchUserUri, updateAvatar } from '../api';
 
 import './Thread.css';
 
 let isMounted;
 
-function Comment({ msg, visitor, active, setActive, postComment }) {
+function Comment({ msg, draft, visitor, active, setActive, onStartEditing, postComment }) {
   const embedRef = useRef();
   const msgRef = useRef();
   const [author, setAuthor] = useState(msg.user);
@@ -33,16 +33,16 @@ function Comment({ msg, visitor, active, setActive, postComment }) {
   useEffect(() => {
     isMounted = true;
     if (author.uri) {
-        fetchUserUri(author.uri).then(response => {
-            if (isMounted) {
-                setAuthor(response.data);
-            }
-        });
+      fetchUserUri(author.uri).then(response => {
+        if (isMounted) {
+          setAuthor(response.data);
+        }
+      });
     }
     return () => {
-        isMounted = false;
+      isMounted = false;
     };
-}, [author.uri]);
+  }, [author.uri]);
   return (
     <div>
       <div className="msg-header" style={{ padding: '6px', display: 'flex', alignItems: 'flex-start' }}>
@@ -59,6 +59,13 @@ function Comment({ msg, visitor, active, setActive, postComment }) {
             visitor.uid > 0 ? (
               <>
                 {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>}
+                {
+                  visitor.uid == msg.user.uid &&
+                  <>
+                    <span>&nbsp;&middot;&nbsp;</span>
+                    <span style={linkStyle} onClick={() => onStartEditing(msg)}>Edit</span>
+                  </>
+                }
               </>
             ) : (
                 <>
@@ -77,18 +84,18 @@ function Comment({ msg, visitor, active, setActive, postComment }) {
             </div>
         }
       </div>
-        {
-          msg.photo &&
-          <div className="msg-media">
-            <a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
-              <img src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" />
-            </a>
-          </div>
-        }
+      {
+        msg.photo &&
+        <div className="msg-media">
+          <a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
+            <img src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" />
+          </a>
+        </div>
+      }
       <div className="embedContainer" ref={embedRef} />
       <div className="msg-links">
         {
-          active === msg.rid && <MessageInput data={msg} onSend={postComment}>Write a comment...</MessageInput>
+          active === msg.rid && <MessageInput data={msg} text={draft || ''} onSend={postComment}>Write a comment...</MessageInput>
         }
       </div>
     </div>
@@ -97,9 +104,11 @@ function Comment({ msg, visitor, active, setActive, postComment }) {
 
 Comment.propTypes = {
   msg: MessageType.isRequired,
+  draft: PropTypes.string.isRequired,
   visitor: UserType.isRequired,
   active: PropTypes.number.isRequired,
   setActive: PropTypes.func.isRequired,
+  onStartEditing: PropTypes.func.isRequired,
   postComment: PropTypes.func.isRequired
 };
 
@@ -108,6 +117,7 @@ export default function Thread(props) {
   const [replies, setReplies] = useState([]);
   const [loading, setLoading] = useState(false);
   const [active, setActive] = useState(0);
+  const [editing, setEditing] = useState({});
   useEffect(() => {
     setActive(0);
     loadReplies();
@@ -157,19 +167,26 @@ export default function Thread(props) {
   }, [message]);
   let postComment = (template) => {
     const { mid, rid, body, attach } = template;
-    comment(mid, rid, body, attach).then(res => {
+    let commentAction = editing.rid ? update(mid, editing.rid, body) : comment(mid, rid, body, attach);
+    commentAction.then(res => {
+      setEditing({});
       loadReplies();
     })
       .catch(console.log);
   };
 
+  let startEditing = (reply) => {
+    setActive(reply.replyto);
+    setEditing(reply);
+  };
+
   const loaders = Math.min(message.replies || 0, 10);
   return (
     <>
       {
         message.mid ? (
           <Message data={message} visitor={props.visitor}>
-            {active === (message.rid || 0) && <MessageInput data={message} onSend={postComment}>Write a comment...</MessageInput>}
+            {active === (message.rid || 0) && <MessageInput data={message} text={editing.body || ''} onSend={postComment}>Write a comment...</MessageInput>}
           </Message>
         ) : (
             <Spinner />
@@ -179,7 +196,7 @@ export default function Thread(props) {
         {
           !loading ? replies.map((msg) => (
             <li id={msg.rid} key={msg.rid}>
-              <Comment msg={msg} visitor={props.visitor} active={active} setActive={setActive} postComment={postComment} />
+              <Comment msg={msg} draft={msg.rid === editing.replyto && editing.body} visitor={props.visitor} active={active} setActive={setActive} onStartEditing={startEditing} postComment={postComment} />
             </li>
           )) : (
               <>
@@ -201,5 +218,5 @@ Thread.propTypes = {
   history: ReactRouterPropTypes.history,
   match: ReactRouterPropTypes.match,
   visitor: UserType.isRequired,
-  connection: PropTypes.object.isRequired
+  connection: PropTypes.object.isRequired,
 };