diff options
Diffstat (limited to 'vnext/src/components')
| -rw-r--r-- | vnext/src/components/Thread.js | 99 |
1 files changed, 58 insertions, 41 deletions
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js index c1dc915b2..3fa0ce100 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} </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> · </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} </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> · </span>{active === msg.rid || <Button>Reply</Button>} - </> - ) - } - </div> - </div> + <Comment msg={msg} visitor={props.visitor} active={active} setActive={setActive} /> </li> )) : ( <> |