embeds in Thread

1 files changed, 58 insertions, 41 deletions

diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index c1dc915b..3fa0ce10 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 
 import ReactRouterPropTypes from 'react-router-prop-types';
 import { UserType } from './Types';
@@ -12,10 +12,65 @@ import Spinner from './Spinner';
 import Avatar from './Avatar';
 import Button from './Button';
 
-import { format } from '../utils/embed';
+import { format, embedUrls } from '../utils/embed';
 
 import { getMessages, comment, markReadTracker } from '../api';
 
+function Comment({ msg, visitor, active, setActive }) {
+  const embedRef = useRef();
+  const msgRef = useRef();
+  useEffect(() => {
+    if (msgRef.current) {
+      embedUrls(msgRef.current.querySelectorAll('a'), embedRef.current);
+      if (!embedRef.current.hasChildNodes()) {
+        embedRef.current.style.display = 'none';
+      }
+    }
+  }, []);
+  return (
+    <div className="msg-cont">
+      <div className="msg-header">
+        <Avatar user={msg.user}>
+          <div className="msg-ts">
+            {msg.replyto > 0 &&
+              (
+                <a href={`#${msg.replyto}`} className="info-avatar"><img src={msg.to.avatar} /> {msg.to.uname}&nbsp;</a>
+              )}
+          </div>
+        </Avatar>
+      </div>
+      {
+        msg.html ? <div className="msg-txt" dangerouslySetInnerHTML={{ __html: msg.body }} ref={msgRef} />
+          :
+          <div className="msg-txt" ref={msgRef}>
+            <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} />
+          </div>
+      }
+      {
+        msg.photo &&
+        <p className="ir"><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>
+        </p>
+      }
+      <div className="embedContainer" ref={embedRef} />
+      <div className="msg-links">
+        {
+          visitor.uid > 0 ? (
+            <>
+              {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>}
+              {active === msg.rid && <MessageInput data={msg} onSend={postComment}>Write a comment...</MessageInput>}
+            </>
+          ) : (
+              <>
+                <span>&nbsp;&middot;&nbsp;</span>{active === msg.rid || <Button>Reply</Button>}
+              </>
+            )
+        }
+      </div>
+    </div>
+  );
+}
+
 export default function Thread(props) {
   const [message, setMessage] = useState(props.location.state || {});
   const [replies, setReplies] = useState([]);
@@ -87,45 +142,7 @@ export default function Thread(props) {
         {
           !loading ? replies.map((msg) => (
             <li id={msg.rid} key={msg.rid} className="msg">
-              <div className="msg-cont">
-                <div className="msg-header">
-                  <Avatar user={msg.user}>
-                    <div className="msg-ts">
-                      {msg.replyto > 0 &&
-                        (
-                          <a href={`#${msg.replyto}`} className="info-avatar"><img src={msg.to.avatar} /> {msg.to.uname}&nbsp;</a>
-                        )}
-                    </div>
-                  </Avatar>
-                </div>
-                {
-                  msg.html ? <div className="msg-txt" dangerouslySetInnerHTML={{ __html: msg.body }} />
-                    :
-                    <div className="msg-txt">
-                      <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} />
-                    </div>
-                }
-                {
-                  msg.photo &&
-                  <p className="ir"><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>
-                  </p>
-                }
-                <div className="msg-links">
-                  {
-                    props.visitor.uid > 0 ? (
-                      <>
-                        {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>}
-                        {active === msg.rid && <MessageInput data={msg} onSend={postComment}>Write a comment...</MessageInput>}
-                      </>
-                    ) : (
-                        <>
-                          <span>&nbsp;&middot;&nbsp;</span>{active === msg.rid || <Button>Reply</Button>}
-                        </>
-                      )
-                  }
-                </div>
-              </div>
+              <Comment msg={msg} visitor={props.visitor} active={active} setActive={setActive} />
             </li>
           )) : (
               <>