Updated group timelines and sorting

• Updated: - group timelines and sorting
2020-08-07 17:59:39 -05:00
parent c725b37a39
commit 57d27420ca
8 changed files with 222 additions and 69 deletions
--- a/app/javascript/gabsocial/features/group_collection_timeline.js
+++ b/app/javascript/gabsocial/features/group_collection_timeline.js
@@ -1,63 +1,145 @@
 import { Fragment } from 'react'
 import { injectIntl, defineMessages } from 'react-intl'
+import { List as ImmutableList } from 'immutable'
 import { me } from '../initial_state'
-import { GROUP_TIMELINE_SORTING_TYPE_TOP } from '../constants'
 import { connectGroupCollectionStream } from '../actions/streaming'
-import { expandGroupCollectionTimeline } from '../actions/timelines'
+import {
+	clearTimeline,
+	expandGroupCollectionTimeline,
+} from '../actions/timelines'
+import {
+	setGroupTimelineSort,
+	setGroupTimelineTopSort,
+} from '../actions/groups'
+import {
+	GROUP_TIMELINE_SORTING_TYPE_TOP,
+	GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_WEEKLY,
+	GROUP_TIMELINE_SORTING_TYPE_NEWEST,
+} from '../constants'
+import getSortBy from '../utils/group_sort_by'
+import Text from '../components/text'
 import StatusList from '../components/status_list'
 import GroupSortBlock from '../components/group_sort_block'
+import GroupsCollection from './groups_collection'

 const messages = defineMessages({
 	empty: { id: 'empty_column.group_collection_timeline', defaultMessage: 'There are no gabs to display.' },
 })

-const mapStateToProps = (state) => ({
-	sortByValue: state.getIn(['group_lists', 'sortByValue']),
-	sortByTopValue: state.getIn(['group_lists', 'sortByTopValue']),
+const mapStateToProps = (state, { collectionType }) => {
+
+	let dontShowGroupSort = true
+	try {
+		dontShowGroupSort = !!me && collectionType === 'member' && state.getIn(['timelines', `group_collection:${collectionType}`, 'items'], ImmutableList()).count() === 0
+	} catch (error) {
+		//
+	}
+
+	return {
+		dontShowGroupSort,
+		sortByValue: state.getIn(['group_lists', 'sortByValue']),
+		sortByTopValue: state.getIn(['group_lists', 'sortByTopValue']),
+	}
+}
+
+const mapDispatchToProps = (dispatch) => ({
+	onConnectGroupCollectionStream(collectionType, sortBy) {
+		dispatch(connectGroupCollectionStream(collectionType, sortBy))
+	},
+	onClearTimeline(timeline) {
+		dispatch(clearTimeline(timeline))
+	},
+	onExpandGroupCollectionTimeline(collectionType, options) {
+		dispatch(expandGroupCollectionTimeline(collectionType, options))
+	},
+	setFeaturedTop() {
+		dispatch(setGroupTimelineSort(GROUP_TIMELINE_SORTING_TYPE_TOP))
+		dispatch(setGroupTimelineTopSort(GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_WEEKLY))
+	},
+	setMemberNewest() {
+		dispatch(setGroupTimelineSort(GROUP_TIMELINE_SORTING_TYPE_NEWEST))
+	},
 })

 export default
@injectIntl
-@connect(mapStateToProps)
+@connect(mapStateToProps, mapDispatchToProps)
 class GroupCollectionTimeline extends PureComponent {

 	static propTypes = {
 		params: PropTypes.object.isRequired,
-		dispatch: PropTypes.func.isRequired,
+		onConnectGroupCollectionStream: PropTypes.func.isRequired,
+		onClearTimeline: PropTypes.func.isRequired,
+		onExpandGroupCollectionTimeline: PropTypes.func.isRequired,
+		setFeaturedTop: PropTypes.func.isRequired,
+		setMemberNewest: PropTypes.func.isRequired,
 		intl: PropTypes.object.isRequired,
+		collectionType: PropTypes.string.isRequired,
 		sortByValue: PropTypes.string.isRequired,
 		sortByTopValue: PropTypes.string,
+		hasStatuses: PropTypes.bool.isRequired,
+	}
+
+	state = {
+		//keep track of loads for if no user, 
+		//only allow 2 loads before showing sign up msg
+		loadCount: 0,
+	}
+
+	_unsubscribe() {
+		if (this.disconnect && !!me) {
+			this.disconnect()
+			this.disconnect = null
+		}
+	}
+
+	_subscribe = () => {
+		if (!!me) {
+			const {
+				collectionType,
+				sortByValue,
+				sortByTopValue,
+			} = this.props
+
+			if (collectionType === 'member' && sortByValue === 'new') {
+				const sortBy = getSortBy(sortByValue, sortByTopValue)
+				this.disconnect = this.props.onConnectGroupCollectionStream(collectionType, sortBy)
+			}
+		}
 	}

 	componentDidMount() {
 		const {
 			collectionType,
-			dispatch,
 			sortByValue,
 			sortByTopValue,
 		} = this.props

-		const sortBy = sortByValue === GROUP_TIMELINE_SORTING_TYPE_TOP ? `${sortByValue}_${sortByTopValue}` : sortByValue
-		const options = { sortBy }
-	
-		dispatch(expandGroupCollectionTimeline(collectionType, options))
+		if (this.props.collectionType === 'featured' && sortByValue !== GROUP_TIMELINE_SORTING_TYPE_TOP) {
+			this.props.setFeaturedTop()
+		} else if (!!me && this.props.collectionType === 'member' && sortByValue !== GROUP_TIMELINE_SORTING_TYPE_NEWEST) {
+			this.props.setMemberNewest()
+		} else {
+			const sortBy = getSortBy(sortByValue, sortByTopValue)
+			this.props.onExpandGroupCollectionTimeline(collectionType, { sortBy })

-		if (!!me) {
-			this.disconnect = dispatch(connectGroupCollectionStream(collectionType))
+			this._subscribe()
 		}
 	}

 	componentDidUpdate(prevProps) {
-		if (prevProps.sortByValue !== this.props.sortByValue ||  prevProps.sortByTopValue !== this.props.sortByTopValue) {
-      this.handleLoadMore()
+		if (prevProps.sortByValue !== this.props.sortByValue || 
+				prevProps.sortByTopValue !== this.props.sortByTopValue ||
+				prevProps.collectionType !== this.props.collectionType) {
+				this._unsubscribe()
+				this._subscribe()
+				this.props.onClearTimeline(`group_collection:${prevProps.collectionType}`)
+				this.handleLoadMore()
    }
  }

 	componentWillUnmount() {
-		if (this.disconnect && !!me) {
-			this.disconnect()
-			this.disconnect = null
-		}
+		this._unsubscribe()
 	}

 	handleLoadMore = (maxId) => {
@@ -67,26 +149,39 @@ class GroupCollectionTimeline extends PureComponent {
 			sortByTopValue,
 		} = this.props

-		const sortBy = sortByValue === GROUP_TIMELINE_SORTING_TYPE_TOP ? `${sortByValue}_${sortByTopValue}` : sortByValue
+		const sortBy = getSortBy(sortByValue, sortByTopValue)
 		const options = { sortBy, maxId }

-		this.props.dispatch(expandGroupCollectionTimeline(collectionType, options))
+		this.props.onExpandGroupCollectionTimeline(collectionType, options)
 	}

 	render() {
 		const {
 			collectionType,
 			intl,
+			dontShowGroupSort,
 		} = this.props

+		const emptyMessage = !!me && collectionType === 'member' ? (
+			<div className={[_s.default, _s.width100PC]}>
+				<Text className={[_s.default, _s.mb10].join(' ')}>
+					Join some groups then come back here to view your group timeline
+				</Text>
+				<GroupsCollection activeTab='featured' />
+			</div>
+		) : intl.formatMessage(messages.empty)
+
 		return (
 			<Fragment>
-				<GroupSortBlock collectionType={collectionType} />
+				{
+					!dontShowGroupSort &&
+					<GroupSortBlock collectionType={collectionType} />
+				}
 				<StatusList
 					scrollKey={`group-collection-timeline-${collectionType}`}
-					timelineId={`group:collection:${collectionType}`}
+					timelineId={`group_collection:${collectionType}`}
 					onLoadMore={this.handleLoadMore}
-					emptyMessage={intl.formatMessage(messages.empty)}
+					emptyMessage={emptyMessage}
 				/>
 			</Fragment>
 		)
--- a/app/javascript/gabsocial/features/group_timeline.js
+++ b/app/javascript/gabsocial/features/group_timeline.js
@@ -3,9 +3,18 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { injectIntl, defineMessages } from 'react-intl'
 import { me } from '../initial_state'
-import { GROUP_TIMELINE_SORTING_TYPE_TOP } from '../constants'
+import getSortBy from '../utils/group_sort_by'
 import { connectGroupStream } from '../actions/streaming'
-import { expandGroupTimeline } from '../actions/timelines'
+import {
+	clearTimeline,
+	expandGroupTimeline,
+} from '../actions/timelines'
+import {
+	setGroupTimelineSort,
+} from '../actions/groups'
+import {
+	GROUP_TIMELINE_SORTING_TYPE_NEWEST,
+} from '../constants'
 import StatusList from '../components/status_list'
 import ColumnIndicator from '../components/column_indicator'
 import GroupSortBlock from '../components/group_sort_block'
@@ -15,49 +24,82 @@ const messages = defineMessages({
 })

 const mapStateToProps = (state, props) => ({
+	groupId: props.params.id,
 	group: state.getIn(['groups', props.params.id]),
 	sortByValue: state.getIn(['group_lists', 'sortByValue']),
 	sortByTopValue: state.getIn(['group_lists', 'sortByTopValue']),
 })

+const mapDispatchToProps = (dispatch) => ({
+	onConnectGroupStream(groupId) {
+		dispatch(connectGroupStream(groupId))
+	},
+	onClearTimeline(timelineId) {
+		dispatch(clearTimeline(timelineId))
+	},
+	onExpandGroupTimeline(groupId, options) {
+		dispatch(expandGroupTimeline(groupId, options))
+	},
+	setMemberNewest() {
+		dispatch(setGroupTimelineSort(GROUP_TIMELINE_SORTING_TYPE_NEWEST))
+	},
+})
+
 export default
-@connect(mapStateToProps)
+@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
 class GroupTimeline extends ImmutablePureComponent {

 	static propTypes = {
 		params: PropTypes.object.isRequired,
-		dispatch: PropTypes.func.isRequired,
 		group: PropTypes.oneOfType([
 			ImmutablePropTypes.map,
 			PropTypes.bool,
 		]),
+		groupId: PropTypes.string,
 		intl: PropTypes.object.isRequired,
+		onConnectGroupStream: PropTypes.func.isRequired,
+		onClearTimeline: PropTypes.func.isRequired,
+		onExpandGroupTimeline: PropTypes.func.isRequired,
+		setMemberNewest: PropTypes.func.isRequired,
 		sortByValue: PropTypes.string.isRequired,
 		sortByTopValue: PropTypes.string,
+		onlyMedia: PropTypes.bool,
 	}

+	state = {
+		//keep track of loads for if no user, 
+		//only allow 2 loads before showing sign up msg
+		loadCount: 0,
+	}
+	
 	componentDidMount() {
 		const {
-			dispatch,
+			groupId,
 			sortByValue,
 			sortByTopValue,
+			onlyMedia,
 		} = this.props
-		const { id } = this.props.params

-		const sortBy = sortByValue === GROUP_TIMELINE_SORTING_TYPE_TOP ? `${sortByValue}_${sortByTopValue}` : sortByValue
-		const options = { sortBy }
+		if (sortByValue !== GROUP_TIMELINE_SORTING_TYPE_NEWEST) {
+			this.props.setMemberNewest()
+		} else {
+			const sortBy = getSortBy(sortByValue, sortByTopValue, onlyMedia)
+			this.props.onExpandGroupTimeline(groupId, { sortBy, onlyMedia })

-		dispatch(expandGroupTimeline(id, options))
-
-		if (!!me) {
-			this.disconnect = dispatch(connectGroupStream(id))
+			if (!!me) {
+				this.disconnect = this.props.onConnectGroupStream(groupId)
+			}
 		}
 	}

 	componentDidUpdate(prevProps) {
-		if (prevProps.sortByValue !== this.props.sortByValue || prevProps.sortByTopValue !== this.props.sortByTopValue) {
+		if ((prevProps.sortByValue !== this.props.sortByValue ||
+				prevProps.sortByTopValue !== this.props.sortByTopValue ||
+				prevProps.onlyMedia !== this.props.onlyMedia) &&
+				prevProps.groupId === this.props.groupId) {
 			this.handleLoadMore()
+			this.props.onClearTimeline(`group:${this.props.groupId}`)
 		}
 	}

@@ -70,21 +112,22 @@ class GroupTimeline extends ImmutablePureComponent {

 	handleLoadMore = (maxId) => {
 		const {
-			dispatch,
+			groupId,
 			sortByValue,
 			sortByTopValue,
+			onlyMedia,
 		} = this.props
-		const { id } = this.props.params

-		const sortBy = sortByValue === GROUP_TIMELINE_SORTING_TYPE_TOP ? `${sortByValue}_${sortByTopValue}` : sortByValue
-		const options = { sortBy, maxId }
-
-		dispatch(expandGroupTimeline(id, options))
+		const sortBy = getSortBy(sortByValue, sortByTopValue)
+		this.props.onExpandGroupTimeline(groupId, { sortBy, maxId, onlyMedia })
 	}

 	render() {
-		const { group, intl } = this.props
-		const { id } = this.props.params
+		const {
+			group,
+			groupId,
+			intl,
+		} = this.props

 		if (typeof group === 'undefined') {
 			return <ColumnIndicator type='loading' />
@@ -94,10 +137,10 @@ class GroupTimeline extends ImmutablePureComponent {

 		return (
 			<Fragment>
-				<GroupSortBlock groupId={id} />
+				<GroupSortBlock />
 				<StatusList
-					scrollKey={`group-timeline-${id}`}
-					timelineId={`group:${id}`}
+					scrollKey={`group-timeline-${groupId}`}
+					timelineId={`group:${groupId}`}
 					onLoadMore={this.handleLoadMore}
 					emptyMessage={intl.formatMessage(messages.empty)}
 				/>