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

Added GroupTimelineSortOptionsPopover, GroupTimelineSortTopOptionsPopover compnents 

• Added:
- GroupTimelineSortOptionsPopover, GroupTimelineSortTopOptionsPopover components
- redux for sorting
- intl for sorting
- constants
This commit is contained in:
mgabdev 2020-08-05 22:59:12 -05:00
parent a571c2cbe8
commit 9b1a39e90b
6 changed files with 267 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/gabsocial/actions/groups.js
View File

@ -63,13 +63,16 @@ export const GROUP_UPDATE_ROLE_REQUEST = 'GROUP_UPDATE_ROLE_REQUEST';
export const GROUP_UPDATE_ROLE_SUCCESS = 'GROUP_UPDATE_ROLE_SUCCESS';
export const GROUP_UPDATE_ROLE_FAIL = 'GROUP_UPDATE_ROLE_FAIL';
export const GROUP_TIMELINE_SORT = 'GROUP_TIMELINE_SORT'
export const GROUP_TIMELINE_TOP_SORT = 'GROUP_TIMELINE_TOP_SORT'
export const GROUP_SORT = 'GROUP_SORT'
export const importGroup = (group) => (dispatch) => {
dispatch(fetchGroupSuccess(group))
}
export const fetchGroup = id => (dispatch, getState) => {
export const fetchGroup = (id) => (dispatch, getState) => {
dispatch(fetchGroupRelationships([id]));
if (getState().getIn(['groups', id])) {
@ -614,4 +617,18 @@ export function groupsSort(tab, groupIds) {
tab,
groupIds,
}
}
export const setGroupTimelineSort = (sortValue) => (dispatch) => {
dispatch({
type: GROUP_TIMELINE_SORT,
sortValue,
})
}
export const setGroupTimelineTopSort = (sortValue) => (dispatch) => {
dispatch({
type: GROUP_TIMELINE_TOP_SORT,
sortValue,
})
}

99
app/javascript/gabsocial/components/popover/group_timeline_sort_options_popover.js Normal file
View File

@ -0,0 +1,99 @@
import { defineMessages, injectIntl } from 'react-intl'
import { closePopover } from '../../actions/popover'
import { setGroupTimelineSort } from '../../actions/groups'
import {
GROUP_TIMELINE_SORTING_TYPE_NEWEST,
GROUP_TIMELINE_SORTING_TYPE_RECENT_ACTIVITY,
GROUP_TIMELINE_SORTING_TYPE_TOP,
} from '../../constants'
import PopoverLayout from './popover_layout'
import List from '../list'
const messages = defineMessages({
topTitle: { id: 'group_timeline_sorting.top_title', defaultMessage: 'Top Posts' },
topSubtitle: { id: 'group_timeline_sorting.top_subtitle', defaultMessage: 'See gabs with most comments, likes and reposts first' },
recentTitle: { id: 'group_timeline_sorting.recent_title', defaultMessage: 'Recent Activity' },
recentSubtitle: { id: 'group_timeline_sorting.recent_subtitle', defaultMessage: 'See gabs with most recent comments first' },
newTitle: { id: 'group_timeline_sorting.new_title', defaultMessage: 'New Posts' },
newSubtitle: { id: 'group_timeline_sorting.new_subtitle', defaultMessage: 'See most recent gabs first' },
})
const mapStateToProps = (state) => ({
sorting: state.getIn(['group_lists', 'sortByValue']),
})
const mapDispatchToProps = (dispatch) => ({
onSort(sort) {
dispatch(setGroupTimelineSort(sort))
dispatch(closePopover())
},
onClosePopover: () => dispatch(closePopover()),
})
export default
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
class GroupTimelineSortOptionsPopover extends PureComponent {
static propTypes = {
sorting: PropTypes.string.isRequired,
intl: PropTypes.object.isRequired,
isXS: PropTypes.bool,
onClosePopover: PropTypes.func.isRequired,
onSort: PropTypes.func.isRequired,
}
handleOnClick = (type) => {
this.props.onSort(type)
}
handleOnClosePopover = () => {
this.props.onClosePopover()
}
render() {
const {
sorting,
intl,
isXS,
} = this.props
const items = [
{
hideArrow: true,
isActive: sorting === GROUP_TIMELINE_SORTING_TYPE_TOP,
title: intl.formatMessage(messages.topTitle),
subtitle: intl.formatMessage(messages.topSubtitle),
onClick: () => this.handleOnClick(GROUP_TIMELINE_SORTING_TYPE_TOP),
},
{
hideArrow: true,
isActive: sorting === GROUP_TIMELINE_SORTING_TYPE_NEWEST,
title: intl.formatMessage(messages.newTitle),
subtitle: intl.formatMessage(messages.newSubtitle),
onClick: () => this.handleOnClick(GROUP_TIMELINE_SORTING_TYPE_NEWEST),
},
{
hideArrow: true,
isActive: sorting === GROUP_TIMELINE_SORTING_TYPE_RECENT_ACTIVITY,
title: intl.formatMessage(messages.recentTitle),
subtitle: intl.formatMessage(messages.recentSubtitle),
onClick: () => this.handleOnClick(GROUP_TIMELINE_SORTING_TYPE_RECENT_ACTIVITY),
},
]
return (
<PopoverLayout
width={280}
isXS={isXS}
onClose={this.handleOnClosePopover}
>
<List
size={isXS ? 'large' : 'small'}
scrollKey='group_timeline_sorting_options'
items={items}
/>
</PopoverLayout>
)
}
}

109
app/javascript/gabsocial/components/popover/group_timeline_sort_top_options_popover.js Normal file
View File

@ -0,0 +1,109 @@
import { defineMessages, injectIntl } from 'react-intl'
import { closePopover } from '../../actions/popover'
import { setGroupTimelineTopSort } from '../../actions/groups'
import {
GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_TODAY,
GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_WEEKLY,
GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_MONTHLY,
GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_YEARLY,
GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_ALL_TIME,
} from '../../constants'
import PopoverLayout from './popover_layout'
import List from '../list'
const messages = defineMessages({
topTodayTitle: { id: 'group_timeline_sorting.top_today_title', defaultMessage: 'Today' },
topWeekTitle: { id: 'group_timeline_sorting.top_week_title', defaultMessage: 'This Week' },
topMonthTitle: { id: 'group_timeline_sorting.top_month_title', defaultMessage: 'This Month' },
topYearTitle: { id: 'group_timeline_sorting.top_year_title', defaultMessage: 'This Year' },
topAllTitle: { id: 'group_timeline_sorting.top_all_title', defaultMessage: 'All Time' },
})
const mapStateToProps = (state) => ({
sortByTopValue: state.getIn(['group_lists', 'sortByTopValue']),
})
const mapDispatchToProps = (dispatch) => ({
onSort(sort) {
dispatch(setGroupTimelineTopSort(sort))
dispatch(closePopover())
},
onClosePopover: () => dispatch(closePopover()),
})
export default
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
class GroupTimelineSortTopOptionsPopover extends PureComponent {
static propTypes = {
sortByTopValue: PropTypes.string.isRequired,
intl: PropTypes.object.isRequired,
isXS: PropTypes.bool,
onClosePopover: PropTypes.func.isRequired,
onSort: PropTypes.func.isRequired,
}
handleOnClick = (type) => {
this.props.onSort(type)
}
handleOnClosePopover = () => {
this.props.onClosePopover()
}
render() {
const {
sortByTopValue,
intl,
isXS,
} = this.props
const items = [
{
hideArrow: true,
isActive: sortByTopValue === GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_TODAY,
title: intl.formatMessage(messages.topTodayTitle),
onClick: () => this.handleOnClick(GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_TODAY),
},
{
hideArrow: true,
isActive: sortByTopValue === GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_WEEKLY,
title: intl.formatMessage(messages.topWeekTitle),
onClick: () => this.handleOnClick(GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_WEEKLY),
},
{
hideArrow: true,
isActive: sortByTopValue === GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_MONTHLY,
title: intl.formatMessage(messages.topMonthTitle),
onClick: () => this.handleOnClick(GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_MONTHLY),
},
{
hideArrow: true,
isActive: sortByTopValue === GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_YEARLY,
title: intl.formatMessage(messages.topYearTitle),
onClick: () => this.handleOnClick(GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_YEARLY),
},
{
hideArrow: true,
isActive: sortByTopValue === GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_ALL_TIME,
title: intl.formatMessage(messages.topAllTitle),
onClick: () => this.handleOnClick(GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_ALL_TIME),
},
]
return (
<PopoverLayout
width={160}
isXS={isXS}
onClose={this.handleOnClosePopover}
>
<List
size={isXS ? 'large' : 'small'}
scrollKey='group_timeline_sorting_top_options'
items={items}
/>
</PopoverLayout>
)
}
}

6
app/javascript/gabsocial/components/popover/popover_root.js
View File

@ -6,6 +6,8 @@ import {
POPOVER_GROUP_LIST_SORT_OPTIONS,
POPOVER_GROUP_MEMBER_OPTIONS,
POPOVER_GROUP_OPTIONS,
POPOVER_GROUP_TIMELINE_SORT_OPTIONS,
POPOVER_GROUP_TIMELINE_SORT_TOP_OPTIONS,
POPOVER_NAV_SETTINGS,
POPOVER_PROFILE_OPTIONS,
POPOVER_SEARCH,
@ -23,6 +25,8 @@ import {
GroupListSortOptionsPopover,
GroupMemberOptionsPopover,
GroupOptionsPopover,
GroupTimelineSortOptionsPopover,
GroupTimelineSortTopOptionsPopover,
NavSettingsPopover,
ProfileOptionsPopover,
SearchPopover,
@ -51,6 +55,8 @@ POPOVER_COMPONENTS[POPOVER_EMOJI_PICKER] = EmojiPickerPopover
POPOVER_COMPONENTS[POPOVER_GROUP_LIST_SORT_OPTIONS] = GroupListSortOptionsPopover
POPOVER_COMPONENTS[POPOVER_GROUP_MEMBER_OPTIONS] = GroupMemberOptionsPopover
POPOVER_COMPONENTS[POPOVER_GROUP_OPTIONS] = GroupOptionsPopover
POPOVER_COMPONENTS[POPOVER_GROUP_TIMELINE_SORT_OPTIONS] = GroupTimelineSortOptionsPopover
POPOVER_COMPONENTS[POPOVER_GROUP_TIMELINE_SORT_TOP_OPTIONS] = GroupTimelineSortTopOptionsPopover
POPOVER_COMPONENTS[POPOVER_NAV_SETTINGS] = NavSettingsPopover
POPOVER_COMPONENTS[POPOVER_PROFILE_OPTIONS] = ProfileOptionsPopover
POPOVER_COMPONENTS[POPOVER_SEARCH] = SearchPopover

14
app/javascript/gabsocial/constants.js
View File

@ -26,6 +26,8 @@ export const POPOVER_EMOJI_PICKER = 'EMOJI_PICKER'
export const POPOVER_GROUP_LIST_SORT_OPTIONS = 'GROUP_LIST_SORT_OPTIONS'
export const POPOVER_GROUP_MEMBER_OPTIONS = 'GROUP_MEMBER_OPTIONS'
export const POPOVER_GROUP_OPTIONS = 'GROUP_OPTIONS'
export const POPOVER_GROUP_TIMELINE_SORT_OPTIONS = 'GROUP_TIMELINE_SORT_OPTIONS'
export const POPOVER_GROUP_TIMELINE_SORT_TOP_OPTIONS = 'GROUP_TIMELINE_SORT_TOP_OPTIONS'
export const POPOVER_NAV_SETTINGS = 'NAV_SETTINGS'
export const POPOVER_PROFILE_OPTIONS = 'PROFILE_OPTIONS'
export const POPOVER_SEARCH = 'SEARCH'
@ -123,4 +125,14 @@ export const STATUS_EXPIRATION_OPTION_60_MINUTES = '60-minutes'
export const STATUS_EXPIRATION_OPTION_6_HOURS = '6-hours'
export const STATUS_EXPIRATION_OPTION_24_HOURS = '24-hours'
export const STATUS_EXPIRATION_OPTION_3_DAYS = '3-days'
export const STATUS_EXPIRATION_OPTION_7_DAYS = '7-days'
export const STATUS_EXPIRATION_OPTION_7_DAYS = '7-days'
export const GROUP_TIMELINE_SORTING_TYPE_NEWEST = 'newest'
export const GROUP_TIMELINE_SORTING_TYPE_RECENT_ACTIVITY = 'recent'
export const GROUP_TIMELINE_SORTING_TYPE_TOP = 'top'
export const GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_TODAY = 'today'
export const GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_WEEKLY = 'weekly'
export const GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_MONTHLY = 'monthly'
export const GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_YEARLY = 'yearly'
export const GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_ALL_TIME = 'all-time'

22
app/javascript/gabsocial/reducers/group_lists.js
View File

@ -4,11 +4,19 @@ import {
GROUPS_FETCH_SUCCESS,
GROUPS_FETCH_FAIL,
GROUP_SORT,
GROUP_TIMELINE_SORT,
GROUP_TIMELINE_TOP_SORT,
} from '../actions/groups'
import {
GROUP_TIMELINE_SORTING_TYPE_TOP,
GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_TODAY,
} from '../constants'
const tabs = ['new', 'featured', 'member', 'admin']
const initialState = ImmutableMap({
sortByValue: GROUP_TIMELINE_SORTING_TYPE_TOP,
sortByTopValue: GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_TODAY,
new: ImmutableMap({
isFetched: false,
isLoading: false,
@ -57,6 +65,20 @@ export default function groupLists(state = initialState, action) {
return state.withMutations((mutable) => {
mutable.setIn([action.tab, 'items'], ImmutableList(action.groupIds))
})
case GROUP_TIMELINE_SORT:
return state.withMutations((mutable) => {
mutable.set('sortByValue', action.sortValue)
if (action.sortValue === GROUP_TIMELINE_SORTING_TYPE_TOP) {
mutable.set('sortByTopValue', GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_TODAY)
} else {
mutable.set('sortByTopValue', '')
}
})
case GROUP_TIMELINE_TOP_SORT:
return state.withMutations((mutable) => {
mutable.set('sortByValue', GROUP_TIMELINE_SORTING_TYPE_TOP)
mutable.set('sortByTopValue', action.sortValue)
})
default:
return state
}