aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/ui/Message.js
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/ui/Message.js')
-rw-r--r--vnext/src/ui/Message.js48
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
-};
-