Added new comments timeline functionality

• Added:
- new comments timeline functionality
This commit is contained in:
mgabdev 2020-12-10 01:18:19 -05:00
parent 6c13144fbc
commit c35e651b43
5 changed files with 133 additions and 14 deletions

View File

@ -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,

View File

@ -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,

View File

@ -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))

View File

@ -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} />

View File

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