import { useEffect, useRef, useState } from 'react' import MessageInput from './MessageInput' import Avatar from './Avatar' import { UserLink } from './UserInfo' import Button from './Button' import { format, embedUrls } from '../utils/embed' import { chatItemStyle } from './helpers/BubbleStyle' import { useVisitor } from './VisitorContext' /** * @param {{ visitor: import('../client').SecureUser, msg: import('../client').Message, draft: string, active: number, setActive: Function, onStartEditing: Function, postComment: function({body:string, attach: string | File}) : void }} props props * @returns import('react').ReactElement */ export default function Comment({ msg, draft, active, setActive, onStartEditing, postComment }) { const [visitor] = useVisitor() /** @type {import('react').MutableRefObject<HTMLDivElement?>} */ const embedRef = useRef(null) /** @type {import('react').MutableRefObject<HTMLDivElement?>} */ const msgRef = useRef(null) const [author] = useState(msg.user) useEffect(() => { if (msgRef.current && embedRef.current) { embedUrls(msgRef.current.querySelectorAll('a'), embedRef.current) if (!embedRef.current.hasChildNodes()) { embedRef.current.style.display = 'none' } } }, []) return ( <div style={chatItemStyle(visitor, msg)}> <div className="msg-header"> <Avatar user={author} link={author.uri}> <div className="msg-ts"> { msg.to && msg.replyto && msg.replyto > 0 && ( <UserLink user={msg.to} /> ) } </div> </Avatar> </div> { msg.body && <div className={visitor && visitor.uid === msg.user.uid ? 'msg-bubble msg-bubble-my' : 'msg-bubble'}> <div ref={msgRef}> <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid.toString(), (msg.tags || []).indexOf('code') >= 0) }} /> </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/photos-512/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" /> </a> </div> } <div className="embedContainer" ref={embedRef} /> { active === msg.rid && <MessageInput text={draft || ''} onSend={postComment} placeholder="Write a comment..." /> } {visitor && visitor.uid > 0 && <div className="msg-links"> { visitor.uid > 0 ? ( <> {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>} { visitor.uid == msg.user.uid && <> <span> · </span> <span style={linkStyle} onClick={() => onStartEditing(msg)}>Edit</span> </> } </> ) : ( <> <span> · </span>{active === msg.rid || <Button>Reply</Button>} </> ) } </div> } </div> ) } /** * @type {import('react').CSSProperties} */ const linkStyle = { cursor: 'pointer' }