import React, { Fragment, memo, useEffect, useRef } from 'react' import dayjs from 'dayjs' import utc from 'dayjs/plugin/utc' dayjs.extend(utc) import relativeTime from 'dayjs/plugin/relativeTime' dayjs.extend(relativeTime) import { Link } from 'react-router-dom' import Icon from './Icon' import Avatar from './Avatar' import { UserLink } from './UserInfo' import { format, embedUrls } from '../utils/embed' import { useVisitor } from './VisitorContext' /** * @callback ToggleSubscriptionCallback * @param { import('../client').Message } message */ /** * @typedef {object} MessageProps * @property { import('../client').Message } data data * @property {boolean} isThread * @property {ToggleSubscriptionCallback} onToggleSubscription */ /** * Message component * @param {React.PropsWithChildren<{}> & MessageProps} props props */ export default function Message({ data, isThread, onToggleSubscription, children }) { const [visitor] = useVisitor() const isCode = (data.tags || []).indexOf('code') >= 0 const likesSummary = data.likes ? `${data.likes}` : 'Recommend' const commentsSummary = data.replies ? `${data.replies}` : 'Comment' /** * @type {React.MutableRefObject} */ const embedRef = useRef(null) /** * @type {React.MutableRefObject} */ const msgRef = useRef(null) useEffect(() => { const msg = msgRef.current const embed = embedRef.current if (msg && embed) { embedUrls(msg.querySelectorAll('a'), embed) if (!embed.hasChildNodes()) { embed.style.display = 'none' } } }, []) const canComment = data.user && visitor && visitor.uid === data.user.uid || !data.ReadOnly && visitor && visitor.uid > 0 || !data.ReadOnly && !isThread return (
{ data.user &&
{ visitor && visitor.uid == data.user.uid && <>  ·  Edit }
}
{ data.body && data.user && data.mid &&
} { data.photo && data.attachment && data.attachment.small &&
Message media
}
{canComment && } {children}
) } /** * @param {{isCode: boolean, data: {__html: string}}} props props */ function MessageContainer({ isCode, data }) { return isCode ? (
) : ()
}

/**
 * Tags component
 * @param {{user: import('../client').User, data: string[]}} props props
 */
function Tags({ data, user }) {
    return data.length > 0 ? (
        
            {
                data.map((tag, index) => (
                    
                        {index > 0 && ' '}
                        
                            {tag}
                        
                    
                ))
            }
        
    ) : null
}

const TagsList = memo(Tags)

/**
 *
 * @param {{forMessage: import('../client').Message}} props props
 */
function Recommends({ forMessage }) {
    const { recommendations } = forMessage
    const likes = forMessage.likes || 0
    return recommendations && recommendations.length > 0 && (
        
{'♡ by '} { recommendations.map((it, index) => ( {index > 0 && ', '} )) } { likes > recommendations.length && ( and {likes - recommendations.length} others) }
) || null } const Recommendations = memo(Recommends)