diff options
author | 2019-07-26 13:22:00 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:55 +0300 | |
commit | f707d3d524d8d16e2bb780764f029d85fc57ecc0 (patch) | |
tree | 1580074a665bd16c9744b5749c2a777700c5ae73 /vnext/src/ui/Message.js | |
parent | 6016b0888e77497e15384f1cd024eb42672129a4 (diff) |
prop-types -> jsdoc
Diffstat (limited to 'vnext/src/ui/Message.js')
-rw-r--r-- | vnext/src/ui/Message.js | 48 |
1 files changed, 24 insertions, 24 deletions
diff --git a/vnext/src/ui/Message.js b/vnext/src/ui/Message.js index fd225282..51ff12ec 100644 --- a/vnext/src/ui/Message.js +++ b/vnext/src/ui/Message.js @@ -1,9 +1,8 @@ import React, { useEffect, useRef } from 'react'; -import PropTypes from 'prop-types'; + import { Link } from 'react-router-dom'; import moment from 'moment'; -import { UserType, MessageType } from './Types'; import Icon from './Icon'; import Avatar from './Avatar'; import { UserLink } from './UserInfo'; @@ -12,11 +11,21 @@ import { format, embedUrls } from '../utils/embed'; import './Message.css'; -export default function Message({ data, visitor, children, ...rest }) { +/** + * 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<HTMLDivElement>} + */ const embedRef = useRef(); + /** + * @type {React.RefObject<HTMLDivElement>} + */ const msgRef = useRef(); useEffect(() => { if (msgRef.current) { @@ -26,6 +35,7 @@ export default function Message({ data, visitor, children, ...rest }) { } } }, []); + const canComment = visitor.uid === data.user.uid || !data.ReadOnly; return ( <div className="msg-cont"> <Recommendations forMessage={data} /> @@ -53,7 +63,7 @@ export default function Message({ data, visitor, children, ...rest }) { { data.body && <div className="msg-txt" ref={msgRef}> - <MessageContainer isCode={isCode} data={{ __html: format(data.body, data.mid, isCode) }} /> + <MessageContainer isCode={isCode} data={{ __html: format(data.body, data.mid.toString(), isCode) }} /> </div> } { @@ -82,7 +92,7 @@ export default function Message({ data, visitor, children, ...rest }) { <span>{likesSummary}</span> </a> )} - {!data.ReadOnly | (visitor.uid === data.user.uid) && ( + {canComment && ( <> <Link to={{ pathname: `/${data.user.uname}/${data.mid}`, state: { msg: data } }} className="a-comment msg-button"> <Icon name="ei-comment" size="s" /> @@ -96,11 +106,18 @@ export default function Message({ data, visitor, children, ...rest }) { ); } +/** + * @param {{isCode: boolean, data: {__html: string}}} props + */ function MessageContainer({ isCode, data }) { return isCode ? (<pre dangerouslySetInnerHTML={data} />) : (<p dangerouslySetInnerHTML={data} />); } -function Tags({ data, user, ...rest }) { +/** + * Tags component + * @param {{user: import('../api').User, data: string[]}} props + */ +function Tags({ data, user }) { return data.length > 0 && ( <div className="msg-tags"> { @@ -114,7 +131,7 @@ function Tags({ data, user, ...rest }) { const TagsList = React.memo(Tags); -function Recommends({ forMessage, ...rest }) { +function Recommends({ forMessage }) { const { likes, recommendations } = forMessage; return recommendations && recommendations.length > 0 && ( <div className="msg-recomms">{'♡ by '} @@ -131,20 +148,3 @@ function Recommends({ forMessage, ...rest }) { } const Recommendations = React.memo(Recommends); - -Message.propTypes = { - data: MessageType, - visitor: UserType.isRequired, - children: PropTypes.node -}; - -MessageContainer.propTypes = { - isCode: PropTypes.bool.isRequired, - data: PropTypes.object.isRequired -}; - -Tags.propTypes = { - user: UserType.isRequired, - data: PropTypes.array -}; - |