diff options
Diffstat (limited to 'vnext/src/ui/Message.js')
-rw-r--r-- | vnext/src/ui/Message.js | 66 |
1 files changed, 33 insertions, 33 deletions
diff --git a/vnext/src/ui/Message.js b/vnext/src/ui/Message.js index c5ad175d..e4135700 100644 --- a/vnext/src/ui/Message.js +++ b/vnext/src/ui/Message.js @@ -1,18 +1,18 @@ -import React, { Fragment, memo, useEffect, useRef } from 'react'; +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 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 { 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'; +import { format, embedUrls } from '../utils/embed' +import { useVisitor } from './VisitorContext' /** * @callback ToggleSubscriptionCallback @@ -31,30 +31,30 @@ import { useVisitor } from './VisitorContext'; * @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'; + 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<HTMLDivElement?>} */ - const embedRef = useRef(null); + const embedRef = useRef(null) /** * @type {React.MutableRefObject<HTMLDivElement?>} */ - const msgRef = useRef(null); + const msgRef = useRef(null) useEffect(() => { - const msg = msgRef.current; - const embed = embedRef.current; + const msg = msgRef.current + const embed = embedRef.current if (msg && embed) { - embedUrls(msg.querySelectorAll('a'), embed); + embedUrls(msg.querySelectorAll('a'), embed) if (!embed.hasChildNodes()) { - embed.style.display = 'none'; + embed.style.display = 'none' } } - }, []); + }, []) const canComment = data.user && visitor.uid === data.user.uid || !data.ReadOnly && visitor.uid > 0 - || !data.ReadOnly && !isThread; + || !data.ReadOnly && !isThread return ( <div className="msg-cont"> <Recommendations forMessage={data} /> @@ -120,7 +120,7 @@ export default function Message({ data, isThread, onToggleSubscription, children { data.user && canComment && (( isThread ? ( - <a className="msg-button" onClick={() => { onToggleSubscription(data); }}> + <a className="msg-button" onClick={() => { onToggleSubscription(data) }}> { data.subscribed ? (<> <Icon name="ei-check" size="s" /> @@ -143,14 +143,14 @@ export default function Message({ data, isThread, onToggleSubscription, children } {children} </div > - ); + ) } /** * @param {{isCode: boolean, data: {__html: string}}} props props */ function MessageContainer({ isCode, data }) { - return isCode ? (<pre dangerouslySetInnerHTML={data} />) : (<span dangerouslySetInnerHTML={data} />); + return isCode ? (<pre dangerouslySetInnerHTML={data} />) : (<span dangerouslySetInnerHTML={data} />) } /** @@ -171,18 +171,18 @@ function Tags({ data, user }) { )) } </span> - ) : null; + ) : null } -const TagsList = memo(Tags); +const TagsList = memo(Tags) /** * * @param {{forMessage: import('../client').Message}} props props */ function Recommends({ forMessage }) { - const { recommendations } = forMessage; - const likes = forMessage.likes || 0; + const { recommendations } = forMessage + const likes = forMessage.likes || 0 return recommendations && recommendations.length > 0 && ( <div className="msg-recomms">{'♡ by '} { @@ -197,7 +197,7 @@ function Recommends({ forMessage }) { likes > recommendations.length && (<span> and {likes - recommendations.length} others</span>) } </div> - ) || null; + ) || null } -const Recommendations = memo(Recommends); +const Recommendations = memo(Recommends) |