Progress

app/javascript/gabsocial/components/comment_header.js

@@ -1,7 +1,7 @@
 import { Fragment } from 'react'
 import { NavLink } from 'react-router-dom'
-import ImmutablePropTypes from 'react-immutable-proptypes'
 import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import Button from './button'
 import DisplayName from './display_name'
@@ -9,16 +9,36 @@ import DotTextSeperator from './dot_text_seperator'
 import RelativeTimestamp from './relative_timestamp'
 import Text from './text'
 
+const messages = defineMessages({
+  edited: { id: 'status.edited', defaultMessage: 'Edited' },
+  likesLabel: { id: 'likes.label', defaultMessage: '{number, plural, one {# like} other {# likes}}' },
+  repostsLabel: { id: 'reposts.label', defaultMessage: '{number, plural, one {# repost} other {# reposts}}' },
+})
+
 export default
 @injectIntl
 class CommentHeader extends ImmutablePureComponent {
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
     status: ImmutablePropTypes.map.isRequired,
+    openLikesList: PropTypes.func.isRequired,
+    openRepostsList: PropTypes.func.isRequired,
+  }
+
+  openLikesList = () => {
+    this.props.onOpenLikes(this.props.status)
+  }
+
+  openRepostsList = () => {
+    this.props.onOpenReposts(this.props.status)
   }
 
   render() {
-    const { status } = this.props
+    const {
+      intl,
+      status,
+    } = this.props
 
     const repostCount = status.get('reblogs_count')
     const favoriteCount = status.get('favourites_count')
@@ -50,7 +70,7 @@ class CommentHeader extends ImmutablePureComponent {
                 className={_s.ml5}
               >
                 <Text size='extraSmall' color='inherit'>
-                  Edited
+                  {intl.formatMessage(messages.edited)}
                 </Text>
               </Button>
             </Fragment>
@@ -65,12 +85,13 @@ class CommentHeader extends ImmutablePureComponent {
                   underlineOnHover
                   backgroundColor='none'
                   color='tertiary'
-                  to={statusUrl}
                   className={_s.ml5}
+                  onClick={this.openLikesList}
                 >
                 <Text size='extraSmall' color='inherit'>
-                  {favoriteCount}
-                  &nbsp;Likes
+                  {intl.formatMessage(messages.likesLabel, {
+                    number: favoriteCount,
+                  })}
                 </Text>
               </Button>
             </Fragment>
@@ -85,12 +106,13 @@ class CommentHeader extends ImmutablePureComponent {
                   underlineOnHover
                   backgroundColor='none'
                   color='tertiary'
-                  to={statusUrl}
                   className={_s.ml5}
+                  onClick={this.openRepostsList}
                 >
                 <Text size='extraSmall' color='inherit'>
-                  {repostCount}
-                  &nbsp;Reposts
+                  {intl.formatMessage(messages.repostsLabel, {
+                    number: repostCount,
+                  })}
                 </Text>
               </Button>
             </Fragment>