diff options
Diffstat (limited to 'vnext')
| -rw-r--r-- | vnext/src/components/Message.js | 45 |
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, |