aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components/Message.js
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components/Message.js')
-rw-r--r--vnext/src/components/Message.js45
1 files changed, 16 insertions, 29 deletions
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index c63c5750..f19888c2 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -14,6 +14,8 @@ import './Message.css';
function Message({ data, visitor, children, ...rest }) {
const isCode = (data.tags || []).indexOf('code') >= 0;
+ const likesSummary = data.likes ? `${data.likes}` : 'Recommend';
+ const commentsSummary = data.replies ? `${data.replies}` : 'Comment';
return (
<div className="msg-cont">
<Recommendations forMessage={data} />
@@ -30,39 +32,40 @@ function Message({ data, visitor, children, ...rest }) {
</Avatar>
<TagsList user={data.user} data={data.tags || []} />
</header>
- <div className="msg-txt">
- <MessageContainer isCode={isCode} data={{ __html: format(data.body, data.mid, isCode) }} />
- </div>
- {data.photo &&
+ {
+ data.body &&
+ <div className="msg-txt">
+ <MessageContainer isCode={isCode} data={{ __html: format(data.body, data.mid, isCode) }} />
+ </div>
+ }
+ {
+ data.photo &&
<p className="ir"><a href={`//i.juick.com/p/${data.mid}.${data.attach}`} data-fname={`${data.mid}.${data.attach}`}>
<img src={`//i.juick.com/photos-512/${data.mid}.${data.attach}`} alt="" /></a>
</p>
}
- <MessageSummary message={data} />
<nav className="l">
{visitor.uid === data.user.uid ? (
- <Link to={{ pathname: `/${data.user.uname}/${data.mid}`}} className="a-like msg-button">
+ <Link to={{ pathname: `/${data.user.uname}/${data.mid}` }} className="a-like msg-button">
<Icon name="ei-heart" size="s" />
- <span className="desktop">Recommend</span>
+ <span>{likesSummary}</span>
</Link>
) : visitor.uid > 0 ? (
<Link to={{ pathname: '/post', search: `?body=!+%23${data.mid}` }} className="a-like msg-button">
<Icon name="ei-heart" size="s" />
- <span className="desktop">Recommend</span>
+ <span>{likesSummary}</span>
</Link>
) : (
<a href="/login" className="a-login msg-button">
- <span className="msg-button-icon">
- <Icon name="ei-heart" size="s" />
- </span>
- <span className="desktop">Recommend</span>
+ <Icon name="ei-heart" size="s" />
+ <span>{likesSummary}</span>
</a>
)}
{!data.ReadOnly | (visitor.uid === data.user.uid) && (
<>
<Link to={{ pathname: `/${data.user.uname}/${data.mid}`, state: { msg: data } }} className="a-comment msg-button">
<Icon name="ei-comment" size="s" />
- <span className="desktop">Comment</span>
+ <span>{ commentsSummary }</span>
</Link>
</>
)}
@@ -110,22 +113,6 @@ function Recommends({ forMessage, ...rest }) {
const Recommendations = React.memo(Recommends);
-function Summary({ message }) {
- let likes = message.likes && `Recommended: ${message.likes}`;
- let comments = message.replies && `Comments: ${message.replies}`;
- return (
- <div className="msg-summary">
- {[likes, comments].filter(Boolean).join(' ')}
- </div>
- );
-}
-
-Summary.propTypes = {
- message: MessageType.isRequired
-};
-
-const MessageSummary = React.memo(Summary);
-
Message.propTypes = {
data: MessageType,
visitor: UserType.isRequired,