random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added promoted statuses back to timelines

Browse Source 
• Added:
- promoted statuses back to timelines

• Todo:
- monitor performance of feeds
This commit is contained in:
mgabdev 2020-07-10 19:46:32 -05:00
parent 7c897d69a2
commit f0ce9bf21b
1 changed files with 137 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

209
app/javascript/gabsocial/components/status_list.js
View File

@ -1,17 +1,17 @@
import { Fragment } from 'react'; import { Fragment } from 'react'
import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; import { Map as ImmutableMap, List as ImmutableList } from 'immutable'
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component'
import { createSelector } from 'reselect'; import { createSelector } from 'reselect'
import debounce from 'lodash.debounce' import debounce from 'lodash.debounce'
import { me } from '../initial_state'; import { me, promotions } from '../initial_state'
import { dequeueTimeline } from '../actions/timelines'; import { dequeueTimeline } from '../actions/timelines'
import { scrollTopTimeline } from '../actions/timelines'; import { scrollTopTimeline } from '../actions/timelines'
import { fetchContext } from '../actions/statuses'; import { fetchStatus, fetchContext } from '../actions/statuses'
import StatusContainer from '../containers/status_container'; import StatusContainer from '../containers/status_container'
import ScrollableList from './scrollable_list'; import ScrollableList from './scrollable_list'
import TimelineQueueButtonHeader from './timeline_queue_button_header'; import TimelineQueueButtonHeader from './timeline_queue_button_header'
import ColumnIndicator from './column_indicator'; import ColumnIndicator from './column_indicator'
const makeGetStatusIds = () => createSelector([ const makeGetStatusIds = () => createSelector([
(state, { type, id }) => state.getIn(['settings', type], ImmutableMap()), (state, { type, id }) => state.getIn(['settings', type], ImmutableMap()),
@ -19,56 +19,67 @@ const makeGetStatusIds = () => createSelector([
(state) => state.get('statuses'), (state) => state.get('statuses'),
], (columnSettings, statusIds, statuses) => { ], (columnSettings, statusIds, statuses) => {
return statusIds.filter(id => { return statusIds.filter(id => {
if (id === null) return true; if (id === null) return true
const statusForId = statuses.get(id); const statusForId = statuses.get(id)
let showStatus = true; let showStatus = true
if (columnSettings.getIn(['shows', 'reblog']) === false) { if (columnSettings.getIn(['shows', 'reblog']) === false) {
showStatus = showStatus && statusForId.get('reblog') === null; showStatus = showStatus && statusForId.get('reblog') === null
} }
if (columnSettings.getIn(['shows', 'reply']) === false) { if (columnSettings.getIn(['shows', 'reply']) === false) {
showStatus = showStatus && (statusForId.get('in_reply_to_id') === null || statusForId.get('in_reply_to_account_id') === me); showStatus = showStatus && (statusForId.get('in_reply_to_id') === null || statusForId.get('in_reply_to_account_id') === me)
} }
return showStatus; return showStatus
}); })
}); })
const mapStateToProps = (state, { timelineId }) => { const mapStateToProps = (state, { timelineId }) => {
if (!timelineId) return {} if (!timelineId) return {}
const getStatusIds = makeGetStatusIds(); const getStatusIds = makeGetStatusIds()
const statusIds = getStatusIds(state, { const statusIds = getStatusIds(state, {
type: timelineId.substring(0, 5) === 'group' ? 'group' : timelineId, type: timelineId.substring(0, 5) === 'group' ? 'group' : timelineId,
id: timelineId id: timelineId
}) })
const promotedStatuses = Array.isArray(promotions) ?
promotions.map((block) => {
const s = {}
s[block.status_id] = state.getIn(['statuses', block.status_id])
return s
}) : []
return { return {
statusIds, statusIds,
promotedStatuses,
isLoading: state.getIn(['timelines', timelineId, 'isLoading'], true), isLoading: state.getIn(['timelines', timelineId, 'isLoading'], true),
isPartial: state.getIn(['timelines', timelineId, 'isPartial'], false), isPartial: state.getIn(['timelines', timelineId, 'isPartial'], false),
hasMore: state.getIn(['timelines', timelineId, 'hasMore']), hasMore: state.getIn(['timelines', timelineId, 'hasMore']),
totalQueuedItemsCount: state.getIn(['timelines', timelineId, 'totalQueuedItemsCount']), totalQueuedItemsCount: state.getIn(['timelines', timelineId, 'totalQueuedItemsCount']),
}; }
}; }
const mapDispatchToProps = (dispatch, ownProps) => ({ const mapDispatchToProps = (dispatch, ownProps) => ({
onDequeueTimeline(timelineId) { onDequeueTimeline(timelineId) {
dispatch(dequeueTimeline(timelineId, ownProps.onLoadMore)); dispatch(dequeueTimeline(timelineId, ownProps.onLoadMore))
}, },
onScrollToTop: debounce(() => { onScrollToTop: debounce(() => {
dispatch(scrollTopTimeline(ownProps.timelineId, true)); dispatch(scrollTopTimeline(ownProps.timelineId, true))
}, 100), }, 100),
onScroll: debounce(() => { onScroll: debounce(() => {
dispatch(scrollTopTimeline(ownProps.timelineId, false)); dispatch(scrollTopTimeline(ownProps.timelineId, false))
}, 100), }, 100),
onFetchContext(statusId) { onFetchContext(statusId) {
dispatch(fetchContext(statusId, true)) dispatch(fetchContext(statusId, true))
}, },
}); onFetchStatus(statusId) {
dispatch(fetchStatus(statusId))
},
})
export default export default
@connect(mapStateToProps, mapDispatchToProps) @connect(mapStateToProps, mapDispatchToProps)
@ -85,11 +96,13 @@ class StatusList extends ImmutablePureComponent {
emptyMessage: PropTypes.string, emptyMessage: PropTypes.string,
timelineId: PropTypes.string, timelineId: PropTypes.string,
queuedItemSize: PropTypes.number, queuedItemSize: PropTypes.number,
onDequeueTimeline: PropTypes.func,
group: ImmutablePropTypes.map, group: ImmutablePropTypes.map,
onScrollToTop: PropTypes.func, onDequeueTimeline: PropTypes.func.isRequired,
onScroll: PropTypes.func, onScrollToTop: PropTypes.func.isRequired,
onFetchContext: PropTypes.func, onScroll: PropTypes.func.isRequired,
onFetchContext: PropTypes.func.isRequired,
onFetchStatus: PropTypes.func.isRequired,
promotedStatuses: PropTypes.object,
} }
state = { state = {
@ -98,44 +111,69 @@ class StatusList extends ImmutablePureComponent {
} }
componentDidMount() { componentDidMount() {
this.handleDequeueTimeline(); this.handleDequeueTimeline()
this.fetchPromotedStatus()
} }
fetchPromotedStatus() {
const {
onFetchStatus,
promotedStatuses,
timelineId,
statusIds,
} = this.props
if (Array.isArray(promotions)) {
promotions.forEach((promotionBlock) => {
if (promotionBlock.timeline_id === timelineId &&
statusIds.count() >= promotionBlock.position &&
!promotedStatuses[promotionBlock.status_id]) {
onFetchStatus(promotionBlock.status_id)
}
})
}
}
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
if (prevState.refreshing) { if (prevState.refreshing) {
this.setState({ refreshing: false }) this.setState({ refreshing: false })
} }
if (prevProps.statusIds.count() < this.props.statusIds.count()) {
this.fetchPromotedStatus()
}
} }
fetchContextsForInitialStatuses = (statusIds) => { fetchContextsForInitialStatuses = (statusIds) => {
// console.log("fetchContextsForInitialStatuses:", statusIds)
for (let i = 0; i < statusIds.length; i++) { for (let i = 0; i < statusIds.length; i++) {
const statusId = statusIds[i]; const statusId = statusIds[i]
this.props.onFetchContext(statusId) this.props.onFetchContext(statusId)
} }
this.setState({ fetchedContext: true }) this.setState({ fetchedContext: true })
} }
getFeaturedStatusCount = () => { getFeaturedStatusCount = () => {
return this.props.featuredStatusIds ? this.props.featuredStatusIds.size : 0; return this.props.featuredStatusIds ? this.props.featuredStatusIds.size : 0
} }
getCurrentStatusIndex = (id, featured) => { getCurrentStatusIndex = (id, featured) => {
if (featured) { if (featured) {
return this.props.featuredStatusIds.indexOf(id); return this.props.featuredStatusIds.indexOf(id)
} }
return this.props.statusIds.indexOf(id) + this.getFeaturedStatusCount(); return this.props.statusIds.indexOf(id) + this.getFeaturedStatusCount()
} }
handleMoveUp = (id, featured) => { handleMoveUp = (id, featured) => {
const elementIndex = this.getCurrentStatusIndex(id, featured) - 1; const elementIndex = this.getCurrentStatusIndex(id, featured) - 1
this._selectChild(elementIndex, true); this._selectChild(elementIndex, true)
} }
handleMoveDown = (id, featured) => { handleMoveDown = (id, featured) => {
const elementIndex = this.getCurrentStatusIndex(id, featured) + 1; const elementIndex = this.getCurrentStatusIndex(id, featured) + 1
this._selectChild(elementIndex, false); this._selectChild(elementIndex, false)
} }
handleLoadOlder = debounce(() => { handleLoadOlder = debounce(() => {
@ -151,28 +189,28 @@ class StatusList extends ImmutablePureComponent {
}, 300, { trailing: true }) }, 300, { trailing: true })
_selectChild(index, align_top) { _selectChild(index, align_top) {
const container = this.node.node; const container = this.node.node
const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`); const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`)
if (element) { if (element) {
if (align_top && container.scrollTop > element.offsetTop) { if (align_top && container.scrollTop > element.offsetTop) {
element.scrollIntoView(true); element.scrollIntoView(true)
} else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) { } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
element.scrollIntoView(false); element.scrollIntoView(false)
} }
element.focus(); element.focus()
} }
} }
handleDequeueTimeline = () => { handleDequeueTimeline = () => {
const { onDequeueTimeline, timelineId } = this.props; const { onDequeueTimeline, timelineId } = this.props
if (!onDequeueTimeline || !timelineId) return; if (!onDequeueTimeline || !timelineId) return
onDequeueTimeline(timelineId); onDequeueTimeline(timelineId)
} }
setRef = c => { setRef = c => {
this.node = c; this.node = c
} }
render() { render() {
@ -185,6 +223,7 @@ class StatusList extends ImmutablePureComponent {
isLoading, isLoading,
isPartial, isPartial,
group, group,
promotedStatuses,
...other ...other
} = this.props } = this.props
const { fetchedContext, refreshing } = this.state const { fetchedContext, refreshing } = this.state
@ -205,28 +244,54 @@ class StatusList extends ImmutablePureComponent {
if (arr.length > 0) this.fetchContextsForInitialStatuses(arr) if (arr.length > 0) this.fetchContextsForInitialStatuses(arr)
} }
let scrollableContent = (isLoading || statusIds.size > 0) ? ( let scrollableContent = []
statusIds.map((statusId, index) => statusId === null ? (
<div if (isLoading || statusIds.size > 0) {
key={'gap:' + statusIds.get(index + 1)} for (let i = 0; i < statusIds.count(); i++) {
disabled={isLoading} const statusId = statusIds.get(i)
maxId={index > 0 ? statusIds.get(index - 1) : null} if (!statusId) {
onClick={onLoadMore} scrollableContent.push(
/> <div
) : ( key={'gap:' + statusIds.get(i + 1)}
<StatusContainer disabled={isLoading}
key={statusId} maxId={i > 0 ? statusIds.get(i - 1) : null}
id={statusId} onClick={onLoadMore}
onMoveUp={this.handleMoveUp} />
onMoveDown={this.handleMoveDown} )
contextType={timelineId} } else {
commentsLimited if (Array.isArray(promotions)) {
/> const promotionBlock = promotions.find(p => p.position === i)
)) if (promotionBlock) {
) : null; scrollableContent.push(
<StatusContainer
key={promotionBlock.status_id}
id={promotionBlock.status_id}
onMoveUp={this.handleMoveUp}
onMoveDown={this.handleMoveDown}
contextType={timelineId}
commentsLimited
isPromoted
/>
)
}
}
scrollableContent.push(
<StatusContainer
key={statusId}
id={statusId}
onMoveUp={this.handleMoveUp}
onMoveDown={this.handleMoveDown}
contextType={timelineId}
commentsLimited
/>
)
}
}
}
if (scrollableContent && featuredStatusIds) { if (scrollableContent && featuredStatusIds) {
scrollableContent = featuredStatusIds.map(statusId => ( scrollableContent = featuredStatusIds.map((statusId) => (
<StatusContainer <StatusContainer
key={`f-${statusId}`} key={`f-${statusId}`}
id={statusId} id={statusId}
@ -257,7 +322,7 @@ class StatusList extends ImmutablePureComponent {
{scrollableContent} {scrollableContent}
</ScrollableList> </ScrollableList>
</Fragment> </Fragment>
); )
} }
} }