Updated group timelines and sorting

• Updated:
- group timelines and sorting

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