Add mentioned users by status view (#28)

* Wip

* Add mentioned users menu to status

* Add test code

app/javascript/mastodon/features/mentioned_users/index.jsx

@@ -0,0 +1,90 @@
+import PropTypes from 'prop-types';
+
+import { injectIntl, FormattedMessage } from 'react-intl';
+
+import { Helmet } from 'react-helmet';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+
+import { debounce } from 'lodash';
+
+import { fetchMentionedUsers, expandMentionedUsers } from 'mastodon/actions/interactions';
+import ColumnHeader from 'mastodon/components/column_header';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
+import ScrollableList from 'mastodon/components/scrollable_list';
+import AccountContainer from 'mastodon/containers/account_container';
+import Column from 'mastodon/features/ui/components/column';
+
+const mapStateToProps = (state, props) => ({
+  accountIds: state.getIn(['user_lists', 'mentioned_users', props.params.statusId, 'items']),
+  hasMore: !!state.getIn(['user_lists', 'mentioned_users', props.params.statusId, 'next']),
+  isLoading: state.getIn(['user_lists', 'mentioned_users', props.params.statusId, 'isLoading'], true),
+});
+
+class MentionedUsers extends ImmutablePureComponent {
+
+  static propTypes = {
+    params: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    accountIds: ImmutablePropTypes.list,
+    hasMore: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    multiColumn: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+  };
+
+  UNSAFE_componentWillMount () {
+    if (!this.props.accountIds) {
+      this.props.dispatch(fetchMentionedUsers(this.props.params.statusId));
+    }
+  }
+
+  handleLoadMore = debounce(() => {
+    this.props.dispatch(expandMentionedUsers(this.props.params.statusId));
+  }, 300, { leading: true });
+
+  render () {
+    const { accountIds, hasMore, isLoading, multiColumn } = this.props;
+
+    if (!accountIds) {
+      return (
+        <Column>
+          <LoadingIndicator />
+        </Column>
+      );
+    }
+
+    const emptyMessage = <FormattedMessage id='empty_column.mentioned_users' defaultMessage='No one has been mentioned by this post.' />;
+
+    return (
+      <Column bindToDocument={!multiColumn}>
+        <ColumnHeader
+          showBackButton
+          multiColumn={multiColumn}
+        />
+
+        <ScrollableList
+          scrollKey='mentioned_users'
+          onLoadMore={this.handleLoadMore}
+          hasMore={hasMore}
+          isLoading={isLoading}
+          emptyMessage={emptyMessage}
+          bindToDocument={!multiColumn}
+        >
+          {accountIds.map(id =>
+            <AccountContainer key={id} id={id} withNote={false} />,
+          )}
+        </ScrollableList>
+
+        <Helmet>
+          <meta name='robots' content='noindex' />
+        </Helmet>
+      </Column>
+    );
+  }
+
+}
+
+export default connect(mapStateToProps)(injectIntl(MentionedUsers));

app/javascript/mastodon/features/status/components/action_bar.jsx

@@ -22,6 +22,7 @@ const messages = defineMessages({
   edit: { id: 'status.edit', defaultMessage: 'Edit' },
   direct: { id: 'status.direct', defaultMessage: 'Privately mention @{name}' },
   mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
+  mentions: { id: 'status.mentions', defaultMessage: 'Mentioned users' },
   reply: { id: 'status.reply', defaultMessage: 'Reply' },
   reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
   cancel_reblog: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
@@ -95,6 +96,10 @@ class ActionBar extends PureComponent {
     intl: PropTypes.object.isRequired,
   };
 
+  handleOpenMentions = () => {
+    this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/${this.props.status.get('id')}/mentioned_users`);
+  };
+
   handleReplyClick = () => {
     this.props.onReply(this.props.status);
   };
@@ -264,6 +269,7 @@ class ActionBar extends PureComponent {
           menu.push(null);
         }
 
+        menu.push({ text: intl.formatMessage(messages.mentions), action: this.handleOpenMentions });
         menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick });
         menu.push(null);
         menu.push({ text: intl.formatMessage(messages.edit), action: this.handleEditClick });

app/javascript/mastodon/features/ui/index.jsx

@@ -46,6 +46,7 @@ import {
   Favourites,
   EmojiReactions,
   StatusReferences,
+  MentionedUsers,
   DirectTimeline,
   HashtagTimeline,
   AntennaTimeline,
@@ -243,6 +244,7 @@ class SwitchingColumnsArea extends PureComponent {
           <WrappedRoute path='/@:acct/:statusId/favourites' component={Favourites} content={children} />
           <WrappedRoute path='/@:acct/:statusId/emoji_reactions' component={EmojiReactions} content={children} />
           <WrappedRoute path='/@:acct/:statusId/references' component={StatusReferences} content={children} />
+          <WrappedRoute path='/@:acct/:statusId/mentioned_users' component={MentionedUsers} content={children} />
 
           {/* Legacy routes, cannot be easily factored with other routes because they share a param name */}
           <WrappedRoute path='/timelines/tag/:id' component={HashtagTimeline} content={children} />

app/javascript/mastodon/features/ui/util/async-components.js

@@ -106,6 +106,10 @@ export function StatusReferences () {
   return import(/* webpackChunkName: "features/status_references" */'../../status_references');
 }
 
+export function MentionedUsers () {
+  return import(/* webpackChunkName: "features/mentioned_users" */'../../mentioned_users');
+}
+
 export function FollowRequests () {
   return import(/* webpackChunkName: "features/follow_requests" */'../../follow_requests');
 }