Merge branch 'reactions-column' into 'develop'

Add column header to reactions page

See merge request soapbox-pub/soapbox-fe!946

app/soapbox/features/admin/user_index.js

@@ -12,6 +12,7 @@ import { SimpleForm, TextInput } from 'soapbox/features/forms';
 import { Set as ImmutableSet, OrderedSet as ImmutableOrderedSet, is } from 'immutable';
 
 const messages = defineMessages({
+  heading: { id: 'column.admin.users', defaultMessage: 'Users' },
   empty: { id: 'admin.user_index.empty', defaultMessage: 'No users found.' },
   searchPlaceholder: { id: 'admin.user_index.search_input_placeholder', defaultMessage: 'Who are you looking for?' },
 });
@@ -100,7 +101,7 @@ class UserIndex extends ImmutablePureComponent {
     const showLoading = isLoading && accountIds.isEmpty();
 
     return (
-      <Column>
+      <Column heading={intl.formatMessage(messages.heading)}>
         <SimpleForm style={{ paddingBottom: 0 }}>
           <TextInput
             onChange={this.handleQueryChange}

app/soapbox/features/reactions/index.js

@@ -4,16 +4,20 @@ import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 import LoadingIndicator from '../../components/loading_indicator';
 import MissingIndicator from '../../components/missing_indicator';
 import { fetchFavourites, fetchReactions } from '../../actions/interactions';
 import { fetchStatus } from '../../actions/statuses';
-import { FormattedMessage } from 'react-intl';
 import AccountContainer from '../../containers/account_container';
 import Column from '../ui/components/column';
 import ScrollableList from '../../components/scrollable_list';
 import { makeGetStatus } from '../../selectors';
 
+const messages = defineMessages({
+  heading: { id: 'column.reactions', defaultMessage: 'Reactions' },
+});
+
 const mapStateToProps = (state, props) => {
   const getStatus = makeGetStatus();
   const status = getStatus(state, {
@@ -35,6 +39,7 @@ const mapStateToProps = (state, props) => {
 };
 
 export default @connect(mapStateToProps)
+@injectIntl
 class Reactions extends ImmutablePureComponent {
 
   static contextTypes = {
@@ -78,14 +83,11 @@ class Reactions extends ImmutablePureComponent {
   };
 
   render() {
-    const { params, reactions, accounts, status } = this.props;
+    const { intl, params, reactions, accounts, status } = this.props;
-    const { username, statusId } = params;
-
-    const back = `/@${username}/posts/${statusId}`;
 
     if (!accounts) {
       return (
-        <Column back={back}>
+        <Column>
           <LoadingIndicator />
         </Column>
       );
@@ -93,7 +95,7 @@ class Reactions extends ImmutablePureComponent {
 
     if (!status) {
       return (
-        <Column back={back}>
+        <Column>
           <MissingIndicator />
         </Column>
       );
@@ -102,7 +104,7 @@ class Reactions extends ImmutablePureComponent {
     const emptyMessage = <FormattedMessage id='status.reactions.empty' defaultMessage='No one has reacted to this post yet. When someone does, they will show up here.' />;
 
     return (
-      <Column back={back}>
+      <Column heading={intl.formatMessage(messages.heading)}>
         {
           reactions.size > 0 && (
             <div className='reaction__filter-bar'>