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
-};
-