1 files changed, 17 insertions, 9 deletions
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index 241aca07..0de366e4 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -38,6 +38,7 @@ function Message({ data, visitor, children, ...rest }) {
                     <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 ? (
                     <a href={`/${data.user.uname}/${data.mid}`} className="a-like msg-button">
@@ -51,7 +52,6 @@ function Message({ data, visitor, children, ...rest }) {
                     <Link to={{ pathname: '/post', search: `?body=!+%23${data.mid}` }} className="a-like msg-button">
                         <span className="msg-button-icon">
                             <Icon name="ei-heart" size="s" />
-                            {data.likes > 0 && (` ${data.likes}`)}
                         </span>
                         <span>&nbsp;Recommend</span>
                     </Link>
@@ -59,7 +59,6 @@ function Message({ data, visitor, children, ...rest }) {
                             <a href="/login" className="a-login msg-button">
                                 <span className="msg-button-icon">
                                     <Icon name="ei-heart" size="s" />
-                                    {data.likes > 0 && (` ${data.likes}`)}
                                 </span>
                                 <span>&nbsp;Recommend</span>
                             </a>
@@ -69,13 +68,6 @@ function Message({ data, visitor, children, ...rest }) {
                         <Link to={{ pathname: `/${data.user.uname}/${data.mid}`, state: { msg: data } }} className="a-comment msg-button">
                             <span className="msg-button-icon">
                                 <Icon name="ei-comment" size="s" />
-                                {data.replies > 0 &&
-                                    (visitor.unread && visitor.unread.includes(data.mid) ? (
-                                        <span className="badge">{data.replies}</span>
-                                    ) : (
-                                            `${data.replies}`
-                                        ))
-                                }
                             </span>
                             <span>&nbsp;Comment</span>
                         </Link>
@@ -125,6 +117,22 @@ 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,