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.uid === data.user.uid || !data.ReadOnly && visitor.uid > 0 || !data.ReadOnly && !isThread; return (
{ data.user &&
{ 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);