Added new comments timeline functionality

• Added:
- new comments timeline functionality

app/javascript/gabsocial/components/comment.js

@@ -95,6 +95,7 @@ class Comment extends ImmutablePureComponent {
       status,
       isHidden,
       isHighlighted,
+      isDetached,
       ancestorAccountId,
     } = this.props
 
@@ -111,6 +112,16 @@ class Comment extends ImmutablePureComponent {
       paddingLeft: `${indent * 38}px`,
     }
 
+    const containerClasses = CX({
+      d: 1,
+      px15: 1,
+      py5: !isDetached,
+      pt10: isDetached,
+      pb5: isDetached,
+      borderBottom1PX: isDetached,
+      borderColorSecondary: isDetached,
+    })
+
     const contentClasses = CX({
       d: 1,
       px10: 1,
@@ -122,7 +133,7 @@ class Comment extends ImmutablePureComponent {
     })
 
     return (
-      <div className={[_s.d, _s.px15, _s.py5].join(' ')} data-comment={status.get('id')}>
+      <div className={containerClasses} data-comment={status.get('id')}>
         {
           indent > 0 &&
           <div className={[_s.d, _s.z3, _s.flexRow, _s.posAbs, _s.topNeg20PX, _s.left0, _s.bottom20PX, _s.aiCenter, _s.jcCenter].join(' ')}>
@@ -327,6 +338,7 @@ Comment.propTypes = {
   ancestorAccountId: PropTypes.string.isRequired,
   status: ImmutablePropTypes.map.isRequired,
   isHidden: PropTypes.bool,
+  isDetached: PropTypes.bool,
   isIntersecting: PropTypes.bool,
   isHighlighted: PropTypes.bool,
   onReply: PropTypes.func.isRequired,

app/javascript/gabsocial/components/status_list.js

@@ -23,6 +23,7 @@ import { fetchStatus, fetchContext } from '../actions/statuses'
 import StatusContainer from '../containers/status_container'
 import StatusPlaceholder from './placeholder/status_placeholder'
 import ScrollableList from './scrollable_list'
+import Comment from './comment'
 import TimelineQueueButtonHeader from './timeline_queue_button_header'
 import TimelineInjectionBase from './timeline_injections/timeline_injection_base'
 import TimelineInjectionRoot from './timeline_injections/timeline_injection_root'
@@ -161,6 +162,7 @@ class StatusList extends ImmutablePureComponent {
       onScrollToTop,
       onScroll,
       promotions,
+      isComments,
     } = this.props
     const { fetchedContext, isRefreshing } = this.state
 
@@ -226,16 +228,27 @@ class StatusList extends ImmutablePureComponent {
             )
           }
 
-          scrollableContent.push(
-            <StatusContainer
-              key={`${statusId}-${i}`}
-              id={statusId}
-              onMoveUp={this.handleMoveUp}
-              onMoveDown={this.handleMoveDown}
-              contextType={timelineId}
-              commentsLimited
-            />
-          )
+          if (isComments) {
+            scrollableContent.push(
+              <Comment
+                isDetached
+                key={`comment-${statusId}-${i}`}
+                id={statusId}
+                ancestorAccountId={1}
+              />
+            )
+          } else {
+            scrollableContent.push(
+              <StatusContainer
+                key={`${statusId}-${i}`}
+                id={statusId}
+                onMoveUp={this.handleMoveUp}
+                onMoveDown={this.handleMoveDown}
+                contextType={timelineId}
+                commentsLimited
+              />
+            )
+          }
         }
         
       }
@@ -339,11 +352,11 @@ const makeGetStatusIds = () => createSelector([
   })
 })
 
-const mapStateToProps = (state, { timelineId }) => {
+const mapStateToProps = (state, { timelineId, isComments }) => {
   if (!timelineId) return {}
 
   const getStatusIds = makeGetStatusIds()
-  const promotions = getPromotions()(state)
+  const promotions = isComments ? null : getPromotions()(state)
 
   const statusIds = getStatusIds(state, {
     type: timelineId.substring(0, 5) === 'group' ? 'group' : timelineId,
@@ -398,6 +411,7 @@ StatusList.propTypes = {
   onLoadMore: PropTypes.func,
   isLoading: PropTypes.bool,
   isPartial: PropTypes.bool,
+  isComments: PropTypes.bool,
   hasMore: PropTypes.bool,
   emptyMessage: PropTypes.string,
   timelineId: PropTypes.string,

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') }