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

Added GroupTimelineSortOptionsPopover, GroupTimelineSortTopOptionsPopover compnents

Browse Source 
• 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
Download Patch File Download Diff File Expand all files Collapse all files

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