Merge branch 'reactions-column' into 'develop'

Add column headers to some more pages

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

app/soapbox/features/account_gallery/index.js

@@ -8,7 +8,7 @@ import {
 } from 'soapbox/actions/accounts';
 import { expandAccountMediaTimeline } from '../../actions/timelines';
 import LoadingIndicator from 'soapbox/components/loading_indicator';
-import Column from '../ui/components/column';
+import Column from 'soapbox/components/column';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { getAccountGallery, findAccountByUsername } from 'soapbox/selectors';
 import MediaItem from './components/media_item';
@@ -17,6 +17,7 @@ import MissingIndicator from 'soapbox/components/missing_indicator';
 import { openModal } from 'soapbox/actions/modal';
 import { NavLink } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
+import SubNavigation from 'soapbox/components/sub_navigation';
 
 const mapStateToProps = (state, { params, withReplies = false }) => {
   const username = params.username || '';
@@ -186,6 +187,7 @@ class AccountGallery extends ImmutablePureComponent {
 
     return (
       <Column>
+        <SubNavigation message={`@${accountUsername}`} />
         <div className='slist slist--flex' onScroll={this.handleScroll}>
           <div className='account__section-headline'>
             <div style={{ width: '100%', display: 'flex' }}>

app/soapbox/features/favourited_statuses/index.js

@@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { fetchFavouritedStatuses, expandFavouritedStatuses, fetchAccountFavouritedStatuses, expandAccountFavouritedStatuses } from '../../actions/favourites';
 import Column from '../ui/components/column';
 import StatusList from '../../components/status_list';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { debounce } from 'lodash';
 import MissingIndicator from 'soapbox/components/missing_indicator';
@@ -13,6 +13,10 @@ import { fetchAccount, fetchAccountByUsername } from '../../actions/accounts';
 import LoadingIndicator from '../../components/loading_indicator';
 import { findAccountByUsername } from 'soapbox/selectors';
 
+const messages = defineMessages({
+  heading: { id: 'column.favourited_statuses', defaultMessage: 'Liked posts' },
+});
+
 const mapStateToProps = (state, { params }) => {
   const username = params.username || '';
   const me = state.get('me');
@@ -102,7 +106,7 @@ class Favourites extends ImmutablePureComponent {
   }, 300, { leading: true })
 
   render() {
-    const { statusIds, isLoading, hasMore, isMyAccount, isAccount, accountId, unavailable } = this.props;
+    const { intl, statusIds, isLoading, hasMore, isMyAccount, isAccount, accountId, unavailable } = this.props;
 
     if (!isMyAccount && !isAccount && accountId !== -1) {
       return (
@@ -135,7 +139,7 @@ class Favourites extends ImmutablePureComponent {
       : <FormattedMessage id='empty_column.account_favourited_statuses' defaultMessage="This user doesn't have any liked posts yet." />;
 
     return (
-      <Column>
+      <Column heading={intl.formatMessage(messages.heading)}>
         <StatusList
           statusIds={statusIds}
           scrollKey='favourited_statuses'

app/soapbox/features/followers/index.js

@@ -11,7 +11,7 @@ import {
   expandFollowers,
   fetchAccountByUsername,
 } from '../../actions/accounts';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import AccountContainer from '../../containers/account_container';
 import Column from '../ui/components/column';
 import ScrollableList from '../../components/scrollable_list';
@@ -19,6 +19,10 @@ import MissingIndicator from 'soapbox/components/missing_indicator';
 import { getFollowDifference } from 'soapbox/utils/accounts';
 import { findAccountByUsername } from 'soapbox/selectors';
 
+const messages = defineMessages({
+  heading: { id: 'column.followers', defaultMessage: 'Followers' },
+});
+
 const mapStateToProps = (state, { params, withReplies = false }) => {
   const username = params.username || '';
   const me = state.get('me');
@@ -47,9 +51,11 @@ const mapStateToProps = (state, { params, withReplies = false }) => {
 };
 
 export default @connect(mapStateToProps)
+@injectIntl
 class Followers extends ImmutablePureComponent {
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
     params: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
     accountIds: ImmutablePropTypes.orderedSet,
@@ -85,7 +91,7 @@ class Followers extends ImmutablePureComponent {
   }, 300, { leading: true });
 
   render() {
-    const { accountIds, hasMore, diffCount, isAccount, accountId, unavailable } = this.props;
+    const { intl, accountIds, hasMore, diffCount, isAccount, accountId, unavailable } = this.props;
 
     if (!isAccount && accountId !== -1) {
       return (
@@ -114,7 +120,7 @@ class Followers extends ImmutablePureComponent {
     }
 
     return (
-      <Column>
+      <Column heading={intl.formatMessage(messages.heading)}>
         <ScrollableList
           scrollKey='followers'
           hasMore={hasMore}

app/soapbox/features/following/index.js

@@ -11,7 +11,7 @@ import {
   expandFollowing,
   fetchAccountByUsername,
 } from '../../actions/accounts';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import AccountContainer from '../../containers/account_container';
 import Column from '../ui/components/column';
 import ScrollableList from '../../components/scrollable_list';
@@ -19,6 +19,10 @@ import MissingIndicator from 'soapbox/components/missing_indicator';
 import { getFollowDifference } from 'soapbox/utils/accounts';
 import { findAccountByUsername } from 'soapbox/selectors';
 
+const messages = defineMessages({
+  heading: { id: 'column.following', defaultMessage: 'Following' },
+});
+
 const mapStateToProps = (state, { params, withReplies = false }) => {
   const username = params.username || '';
   const me = state.get('me');
@@ -47,9 +51,11 @@ const mapStateToProps = (state, { params, withReplies = false }) => {
 };
 
 export default @connect(mapStateToProps)
+@injectIntl
 class Following extends ImmutablePureComponent {
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
     params: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
     accountIds: ImmutablePropTypes.orderedSet,
@@ -85,7 +91,7 @@ class Following extends ImmutablePureComponent {
   }, 300, { leading: true });
 
   render() {
-    const { accountIds, hasMore, isAccount, diffCount, accountId, unavailable } = this.props;
+    const { intl, accountIds, hasMore, isAccount, diffCount, accountId, unavailable } = this.props;
 
     if (!isAccount && accountId !== -1) {
       return (
@@ -114,7 +120,7 @@ class Following extends ImmutablePureComponent {
     }
 
     return (
-      <Column>
+      <Column heading={intl.formatMessage(messages.heading)}>
         <ScrollableList
           scrollKey='following'
           hasMore={hasMore}

app/soapbox/features/pinned_statuses/index.js

@@ -5,10 +5,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { fetchPinnedStatuses } from '../../actions/pin_statuses';
 import Column from '../ui/components/column';
 import StatusList from '../../components/status_list';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import MissingIndicator from 'soapbox/components/missing_indicator';
 
+const messages = defineMessages({
+  heading: { id: 'column.pins', defaultMessage: 'Pinned posts' },
+});
+
 const mapStateToProps = (state, { params }) => {
   const username = params.username || '';
   const me = state.get('me');
@@ -37,7 +41,7 @@ class PinnedStatuses extends ImmutablePureComponent {
   }
 
   render() {
-    const { statusIds, hasMore, isMyAccount } = this.props;
+    const { intl, statusIds, hasMore, isMyAccount } = this.props;
 
     if (!isMyAccount) {
       return (
@@ -48,7 +52,7 @@ class PinnedStatuses extends ImmutablePureComponent {
     }
 
     return (
-      <Column>
+      <Column heading={intl.formatMessage(messages.heading)}>
         <StatusList
           statusIds={statusIds}
           scrollKey='pinned_statuses'