Added new comments timeline functionality

• Added:
- new comments timeline functionality

app/javascript/gabsocial/features/account_comments_timeline.js

@@ -0,0 +1,91 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { List as ImmutableList } from 'immutable'
+import { injectIntl, defineMessages } from 'react-intl'
+import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../actions/timelines'
+import StatusList from '../components/status_list'
+import Block from '../components/block'
+import BlockHeading from '../components/block_heading'
+
+class AccountCommentsTimeline extends ImmutablePureComponent {
+
+  componentWillMount() {
+    const { accountId } = this.props
+
+    if (accountId && accountId !== -1) {
+      this.props.dispatch(expandAccountTimeline(accountId, { commentsOnly: true }))
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId)) {
+      this.props.dispatch(expandAccountTimeline(nextProps.accountId, { commentsOnly: true }))
+    }
+  }
+
+  handleLoadMore = (maxId) => {
+    if (this.props.accountId && this.props.accountId !== -1) {
+      this.props.dispatch(expandAccountTimeline(this.props.accountId, {
+        maxId,
+        commentsOnly: true
+      }))
+    }
+  }
+
+  render() {
+    const {
+      commentIds,
+      isLoading,
+      hasMore,
+      intl,
+    } = this.props
+
+    return (
+      <Block>
+        <BlockHeading title='Comments' />
+        <StatusList
+          isComments
+          scrollKey='account_comments_timeline'
+          statusIds={commentIds}
+          isLoading={isLoading}
+          hasMore={hasMore}
+          onLoadMore={this.handleLoadMore}
+          emptyMessage={intl.formatMessage(messages.empty)}
+        />
+      </Block>
+    )
+  }
+
+}
+
+const messages = defineMessages({
+  empty: { id: 'empty_column.account_timeline', defaultMessage: 'No gabs here!' },
+})
+
+const emptyList = ImmutableList()
+
+const mapStateToProps = (state, { account }) => {
+  const accountId = !!account ? account.getIn(['id'], null) : -1
+  const path = `${accountId}:comments_only`
+
+  return {
+    accountId,
+    commentIds: state.getIn(['timelines', `account:${path}`, 'items'], emptyList),
+    isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading'], true),
+    hasMore: state.getIn(['timelines', `account:${path}`, 'hasMore']),
+  }
+}
+
+AccountCommentsTimeline.propTypes = {
+  params: PropTypes.object.isRequired,
+  dispatch: PropTypes.func.isRequired,
+  commentIds: ImmutablePropTypes.list,
+  isLoading: PropTypes.bool,
+  hasMore: PropTypes.bool,
+  intl: PropTypes.object.isRequired,
+}
+
+export default injectIntl(connect(mapStateToProps)(AccountCommentsTimeline))

app/javascript/gabsocial/features/ui/ui.js

@@ -54,6 +54,7 @@ import {
   About,
   AccountGallery,
   AccountTimeline,
+  AccountCommentsTimeline,
   Assets,
   BlockedAccounts,
   BookmarkedStatuses,
@@ -266,7 +267,7 @@ class SwitchingArea extends React.PureComponent {
         
         <WrappedRoute path='/:username' publicRoute exact page={ProfilePage} component={AccountTimeline} content={children} />
 
-        <WrappedRoute path='/:username/comments' page={ProfilePage} component={AccountTimeline} content={children} componentParams={{ commentsOnly: true }} />
+        <WrappedRoute path='/:username/comments' page={ProfilePage} component={AccountCommentsTimeline} content={children} />
 
         <WrappedRoute path='/:username/followers' page={ProfilePage} component={Followers} content={children} />
         <WrappedRoute path='/:username/following' page={ProfilePage} component={Following} content={children} />

app/javascript/gabsocial/features/ui/util/async_components.js

@@ -1,6 +1,7 @@
 export function About() { return import(/* webpackChunkName: "features/about/about" */'../../about/about') }
 export function AboutSidebar() { return import(/* webpackChunkName: "components/about_sidebar" */'../../../components/sidebar/about_sidebar') }
 export function AccountTimeline() { return import(/* webpackChunkName: "features/account_timeline" */'../../account_timeline') }
+export function AccountCommentsTimeline() { return import(/* webpackChunkName: "features/account_comments_timeline" */'../../account_comments_timeline') }
 export function AccountGallery() { return import(/* webpackChunkName: "features/account_gallery" */'../../account_gallery') }
 export function Assets() { return import(/* webpackChunkName: "features/about/assets" */'../../about/assets') }
 export function BlockAccountModal() { return import(/* webpackChunkName: "components/block_account_modal" */'../../../components/modal/block_account_modal') }