Updated group sorting in frontend

• Updated:
- group sorting in frontend

app/javascript/gabsocial/features/group_collection_timeline.js

@@ -1,14 +1,17 @@
+import { Fragment } from 'react'
 import { injectIntl, defineMessages } from 'react-intl'
 import { me } from '../initial_state'
+import { GROUP_TIMELINE_SORTING_TYPE_TOP } from '../constants'
 import { connectGroupCollectionStream } from '../actions/streaming'
 import { expandGroupCollectionTimeline } from '../actions/timelines'
 import StatusList from '../components/status_list'
+import GroupSortBlock from '../components/group_sort_block'
 
 const messages = defineMessages({
 	empty: { id: 'empty_column.group_collection_timeline', defaultMessage: 'There are no gabs to display.' },
 })
 
-const mapStateToProps = (state) = ({
+const mapStateToProps = (state) => ({
 	sortByValue: state.getIn(['group_lists', 'sortByValue']),
 	sortByTopValue: state.getIn(['group_lists', 'sortByTopValue']),
 })
@@ -27,15 +30,29 @@ class GroupCollectionTimeline extends PureComponent {
 	}
 
 	componentDidMount() {
-		const { collectionType, dispatch } = this.props
+		const {
+			collectionType,
+			dispatch,
+			sortByValue,
+			sortByTopValue,
+		} = this.props
 
-		dispatch(expandGroupCollectionTimeline(collectionType))
+		const sortBy = sortByValue === GROUP_TIMELINE_SORTING_TYPE_TOP ? `${sortByValue}_${sortByTopValue}` : sortByValue
+		const options = { sortBy }
+	
+		dispatch(expandGroupCollectionTimeline(collectionType, options))
 
 		if (!!me) {
 			this.disconnect = dispatch(connectGroupCollectionStream(collectionType))
 		}
 	}
 
+	componentDidUpdate(prevProps) {
+		if (prevProps.sortByValue !== this.props.sortByValue ||  prevProps.sortByTopValue !== this.props.sortByTopValue) {
+      this.handleLoadMore()
+    }
+  }
+
 	componentWillUnmount() {
 		if (this.disconnect && !!me) {
 			this.disconnect()
@@ -44,8 +61,16 @@ class GroupCollectionTimeline extends PureComponent {
 	}
 
 	handleLoadMore = (maxId) => {
-		const { collectionType } = this.props
-		this.props.dispatch(expandGroupCollectionTimeline(collectionType, { maxId }))
+		const {
+			collectionType,
+			sortByValue,
+			sortByTopValue,
+		} = this.props
+
+		const sortBy = sortByValue === GROUP_TIMELINE_SORTING_TYPE_TOP ? `${sortByValue}_${sortByTopValue}` : sortByValue
+		const options = { sortBy, maxId }
+
+		this.props.dispatch(expandGroupCollectionTimeline(collectionType, options))
 	}
 
 	render() {
@@ -55,12 +80,15 @@ class GroupCollectionTimeline extends PureComponent {
 		} = this.props
 
 		return (
-			<StatusList
-				scrollKey={`group-collection-timeline-${collectionType}`}
-				timelineId={`group:collection:${collectionType}`}
-				onLoadMore={this.handleLoadMore}
-				emptyMessage={intl.formatMessage(messages.empty)}
-			/>
+			<Fragment>
+				<GroupSortBlock collectionType={collectionType} />
+				<StatusList
+					scrollKey={`group-collection-timeline-${collectionType}`}
+					timelineId={`group:collection:${collectionType}`}
+					onLoadMore={this.handleLoadMore}
+					emptyMessage={intl.formatMessage(messages.empty)}
+				/>
+			</Fragment>
 		)
 	}
 

app/javascript/gabsocial/features/group_timeline.js

@@ -1,11 +1,14 @@
+import { Fragment } from 'react'
 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 { connectGroupStream } from '../actions/streaming'
 import { expandGroupTimeline } from '../actions/timelines'
 import StatusList from '../components/status_list'
 import ColumnIndicator from '../components/column_indicator'
+import GroupSortBlock from '../components/group_sort_block'
 
 const messages = defineMessages({
 	empty: { id: 'empty_column.group', defaultMessage: 'There is nothing in this group yet.\nWhen members of this group post new statuses, they will appear here.' },
@@ -13,6 +16,8 @@ const messages = defineMessages({
 
 const mapStateToProps = (state, props) => ({
 	group: state.getIn(['groups', props.params.id]),
+	sortByValue: state.getIn(['group_lists', 'sortByValue']),
+	sortByTopValue: state.getIn(['group_lists', 'sortByTopValue']),
 })
 
 export default
@@ -28,19 +33,34 @@ class GroupTimeline extends ImmutablePureComponent {
 			PropTypes.bool,
 		]),
 		intl: PropTypes.object.isRequired,
+		sortByValue: PropTypes.string.isRequired,
+		sortByTopValue: PropTypes.string,
 	}
 
 	componentDidMount() {
-		const { dispatch } = this.props
+		const {
+			dispatch,
+			sortByValue,
+			sortByTopValue,
+		} = this.props
 		const { id } = this.props.params
 
-		dispatch(expandGroupTimeline(id))
+		const sortBy = sortByValue === GROUP_TIMELINE_SORTING_TYPE_TOP ? `${sortByValue}_${sortByTopValue}` : sortByValue
+		const options = { sortBy }
+
+		dispatch(expandGroupTimeline(id, options))
 
 		if (!!me) {
 			this.disconnect = dispatch(connectGroupStream(id))
 		}
 	}
 
+	componentDidUpdate(prevProps) {
+		if (prevProps.sortByValue !== this.props.sortByValue || prevProps.sortByTopValue !== this.props.sortByTopValue) {
+			this.handleLoadMore()
+		}
+	}
+
 	componentWillUnmount() {
 		if (this.disconnect && !!me) {
 			this.disconnect()
@@ -48,9 +68,18 @@ class GroupTimeline extends ImmutablePureComponent {
 		}
 	}
 
-	handleLoadMore = maxId => {
+	handleLoadMore = (maxId) => {
+		const {
+			dispatch,
+			sortByValue,
+			sortByTopValue,
+		} = this.props
 		const { id } = this.props.params
-		this.props.dispatch(expandGroupTimeline(id, { maxId }))
+
+		const sortBy = sortByValue === GROUP_TIMELINE_SORTING_TYPE_TOP ? `${sortByValue}_${sortByTopValue}` : sortByValue
+		const options = { sortBy, maxId }
+
+		dispatch(expandGroupTimeline(id, options))
 	}
 
 	render() {
@@ -64,12 +93,15 @@ class GroupTimeline extends ImmutablePureComponent {
 		}
 
 		return (
-			<StatusList
-				scrollKey={`group-timeline-${id}`}
-				timelineId={`group:${id}`}
-				onLoadMore={this.handleLoadMore}
-				emptyMessage={intl.formatMessage(messages.empty)}
-			/>
+			<Fragment>
+				<GroupSortBlock groupId={id} />
+				<StatusList
+					scrollKey={`group-timeline-${id}`}
+					timelineId={`group:${id}`}
+					onLoadMore={this.handleLoadMore}
+					emptyMessage={intl.formatMessage(messages.empty)}
+				/>
+			</Fragment>
 		)
 	}
 

app/javascript/gabsocial/features/list_timeline.js

@@ -71,7 +71,6 @@ class ListTimeline extends ImmutablePureComponent {
   }
 
   handleEditClick = () => {
-    // console.log("handleEditClick:", this.props.params.id)
     this.props.dispatch(openModal('LIST_EDITOR', { id: this.props.params.id }))
   }