aboutsummaryrefslogtreecommitdiff
path: root/vnext
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-04-08 17:36:56 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commit0729e5c052dceca39e227b14536f2a26580a1bf9 (patch)
treecc65b46eeaceaa43ddc5fe9e713577a1c912c651 /vnext
parent603c3960422fc9976d270cf8dc57afd245caa6e4 (diff)
embeds in Thread
Diffstat (limited to 'vnext')
-rw-r--r--vnext/src/components/Thread.js99
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>
)) : (
<>