import React, { useEffect, useRef } from 'react'; import { Link } from 'react-router-dom'; import moment from 'moment'; import Icon from './Icon'; import Avatar from './Avatar'; import { UserLink } from './UserInfo'; import { format, embedUrls } from '../utils/embed'; import './Message.css'; /** * Message component * @param {{data: import('../api').Message, visitor: import('../api').User, children: Element}} props */ export default function Message({ data, visitor, children }) { const isCode = (data.tags || []).indexOf('code') >= 0; const likesSummary = data.likes ? `${data.likes}` : 'Recommend'; const commentsSummary = data.replies ? `${data.replies}` : 'Comment'; /** * @type {React.RefObject} */ const embedRef = useRef(); /** * @type {React.RefObject} */ const msgRef = useRef(); useEffect(() => { if (msgRef.current) { embedUrls(msgRef.current.querySelectorAll('a'), embedRef.current); if (!embedRef.current.hasChildNodes()) { embedRef.current.style.display = 'none'; } } }, []); const canComment = visitor.uid === data.user.uid || !data.ReadOnly; return (
{ visitor.uid == data.user.uid && <>  ·  Edit }
{ data.body &&
} { data.photo &&
}
{children}
); } /** * @param {{isCode: boolean, data: {__html: string}}} props */ function MessageContainer({ isCode, data }) { return isCode ? (
) : (

); } /** * Tags component * @param {{user: import('../api').User, data: string[]}} props */ function Tags({ data, user }) { return data.length > 0 && (

{ data.map(tag => { return ({tag}); }).reduce((prev, curr) => [prev, ', ', curr]) }
); } const TagsList = React.memo(Tags); function Recommends({ forMessage }) { const { likes, recommendations } = forMessage; return recommendations && recommendations.length > 0 && (
{'♡ by '} { recommendations.map(it => ( )).reduce((prev, curr) => [prev, ', ', curr]) } { likes > recommendations.length && ( and {likes - recommendations.length} others) }
) || null; } const Recommendations = React.memo(Recommends);