Updated notifications to set filter if view query is present on load
• Updated: - notifications to set filter if view query is present on load
This commit is contained in:
parent
1f84ff8f1a
commit
3c310c457b
|
@ -12,6 +12,7 @@ import { List as ImmutableList } from 'immutable';
|
||||||
import { unescapeHTML } from '../utils/html';
|
import { unescapeHTML } from '../utils/html';
|
||||||
import { getFilters, regexFromFilters } from '../selectors';
|
import { getFilters, regexFromFilters } from '../selectors';
|
||||||
import { me } from '../initial_state';
|
import { me } from '../initial_state';
|
||||||
|
import { NOTIFICATION_FILTERS } from '../constants'
|
||||||
|
|
||||||
export const NOTIFICATIONS_INITIALIZE = 'NOTIFICATIONS_INITIALIZE';
|
export const NOTIFICATIONS_INITIALIZE = 'NOTIFICATIONS_INITIALIZE';
|
||||||
export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
|
export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
|
||||||
|
@ -157,16 +158,10 @@ export function expandNotifications({ maxId } = {}, done = noOp) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// console.log("activeFilter:", activeFilter)
|
|
||||||
|
|
||||||
const params = {
|
const params = {
|
||||||
max_id: maxId,
|
max_id: maxId,
|
||||||
exclude_types: activeFilter === 'all' ? null : excludeTypesFromFilter(activeFilter),
|
exclude_types: activeFilter === 'all' ? null : excludeTypesFromFilter(activeFilter),
|
||||||
// : todo : ?
|
}
|
||||||
// exclude_types: activeFilter === 'all'
|
|
||||||
// ? excludeTypesFromSettings(getState())
|
|
||||||
// : excludeTypesFromFilter(activeFilter),
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!!onlyVerified) params.only_verified = onlyVerified
|
if (!!onlyVerified) params.only_verified = onlyVerified
|
||||||
if (!!onlyFollowing) params.only_following = onlyFollowing
|
if (!!onlyFollowing) params.only_following = onlyFollowing
|
||||||
|
@ -240,7 +235,9 @@ export function scrollTopNotifications(top) {
|
||||||
};
|
};
|
||||||
|
|
||||||
export function setFilter(path, value) {
|
export function setFilter(path, value) {
|
||||||
return dispatch => {
|
return (dispatch) => {
|
||||||
|
if (path === 'active' && NOTIFICATION_FILTERS.indexOf(value) === -1) return
|
||||||
|
|
||||||
dispatch({
|
dispatch({
|
||||||
type: NOTIFICATIONS_FILTER_SET,
|
type: NOTIFICATIONS_FILTER_SET,
|
||||||
path: path,
|
path: path,
|
||||||
|
|
|
@ -88,4 +88,13 @@ export const THEMES = [
|
||||||
]
|
]
|
||||||
|
|
||||||
export const DEFAULT_THEME = 'light'
|
export const DEFAULT_THEME = 'light'
|
||||||
export const DEFAULT_FONT_SIZE = 'normal'
|
export const DEFAULT_FONT_SIZE = 'normal'
|
||||||
|
|
||||||
|
export const NOTIFICATION_FILTERS = [
|
||||||
|
'all',
|
||||||
|
'mention',
|
||||||
|
'favourite',
|
||||||
|
'reblog',
|
||||||
|
'poll',
|
||||||
|
'follow',
|
||||||
|
]
|
|
@ -4,12 +4,14 @@ import { HotKeys } from 'react-hotkeys'
|
||||||
import { defineMessages, injectIntl } from 'react-intl'
|
import { defineMessages, injectIntl } from 'react-intl'
|
||||||
import { Switch, Redirect, withRouter } from 'react-router-dom'
|
import { Switch, Redirect, withRouter } from 'react-router-dom'
|
||||||
import debounce from 'lodash.debounce'
|
import debounce from 'lodash.debounce'
|
||||||
|
import queryString from 'query-string'
|
||||||
import { uploadCompose, resetCompose } from '../../actions/compose'
|
import { uploadCompose, resetCompose } from '../../actions/compose'
|
||||||
import { expandHomeTimeline } from '../../actions/timelines'
|
import { expandHomeTimeline } from '../../actions/timelines'
|
||||||
import { fetchGroups } from '../../actions/groups'
|
import { fetchGroups } from '../../actions/groups'
|
||||||
import {
|
import {
|
||||||
initializeNotifications,
|
initializeNotifications,
|
||||||
expandNotifications,
|
expandNotifications,
|
||||||
|
setFilter,
|
||||||
} from '../../actions/notifications'
|
} from '../../actions/notifications'
|
||||||
import LoadingBar from '../../components/loading_bar'
|
import LoadingBar from '../../components/loading_bar'
|
||||||
import { fetchFilters } from '../../actions/filters'
|
import { fetchFilters } from '../../actions/filters'
|
||||||
|
@ -380,6 +382,15 @@ class UI extends PureComponent {
|
||||||
this.setState({ fetchedHome: true })
|
this.setState({ fetchedHome: true })
|
||||||
this.props.dispatch(expandHomeTimeline())
|
this.props.dispatch(expandHomeTimeline())
|
||||||
} else if (pathname.startsWith('/notifications')) {
|
} else if (pathname.startsWith('/notifications')) {
|
||||||
|
try {
|
||||||
|
const search = this.context.router.route.location.search
|
||||||
|
const qp = queryString.parse(search)
|
||||||
|
const view = `${qp.view}`.toLowerCase()
|
||||||
|
this.props.dispatch(setFilter('active', view))
|
||||||
|
} catch (error) {
|
||||||
|
//
|
||||||
|
}
|
||||||
|
|
||||||
this.setState({ fetchedNotifications: true })
|
this.setState({ fetchedNotifications: true })
|
||||||
this.props.dispatch(expandNotifications())
|
this.props.dispatch(expandNotifications())
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { Fragment } from 'react'
|
import { Fragment } from 'react'
|
||||||
import { defineMessages, injectIntl } from 'react-intl'
|
import { defineMessages, injectIntl } from 'react-intl'
|
||||||
import queryString from 'query-string'
|
|
||||||
import { setFilter } from '../actions/notifications'
|
import { setFilter } from '../actions/notifications'
|
||||||
|
import { NOTIFICATION_FILTERS } from '../constants'
|
||||||
import PageTitle from '../features/ui/util/page_title'
|
import PageTitle from '../features/ui/util/page_title'
|
||||||
import LinkFooter from '../components/link_footer'
|
import LinkFooter from '../components/link_footer'
|
||||||
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
|
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
|
||||||
|
@ -9,15 +9,6 @@ import NotificationFilterPanel from '../components/panel/notification_filter_pan
|
||||||
import TrendsPanel from '../components/panel/trends_panel'
|
import TrendsPanel from '../components/panel/trends_panel'
|
||||||
import DefaultLayout from '../layouts/default_layout'
|
import DefaultLayout from '../layouts/default_layout'
|
||||||
|
|
||||||
const filters = [
|
|
||||||
'all',
|
|
||||||
'mention',
|
|
||||||
'favourite',
|
|
||||||
'reblog',
|
|
||||||
'poll',
|
|
||||||
'follow',
|
|
||||||
]
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
|
notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
|
||||||
mention: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
|
mention: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
|
||||||
|
@ -57,22 +48,6 @@ class NotificationsPage extends PureComponent {
|
||||||
selectedFilter: PropTypes.string.isRequired,
|
selectedFilter: PropTypes.string.isRequired,
|
||||||
}
|
}
|
||||||
|
|
||||||
UNSAFE_componentWillMount() {
|
|
||||||
this.checkForQueryStringChange(this.context.router.route.location)
|
|
||||||
}
|
|
||||||
|
|
||||||
checkForQueryStringChange = (location) => {
|
|
||||||
try {
|
|
||||||
const qp = queryString.parse(location.search)
|
|
||||||
const view = `${qp.view}`.toLowerCase()
|
|
||||||
if (filters.indexOf(view) > -1) {
|
|
||||||
this.onChangeActiveFilter(view)
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
//
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onChangeActiveFilter(notificationType) {
|
onChangeActiveFilter(notificationType) {
|
||||||
this.props.setFilter(notificationType)
|
this.props.setFilter(notificationType)
|
||||||
|
|
||||||
|
@ -91,7 +66,7 @@ class NotificationsPage extends PureComponent {
|
||||||
selectedFilter,
|
selectedFilter,
|
||||||
} = this.props
|
} = this.props
|
||||||
|
|
||||||
const tabs = filters.map((filter) => ({
|
const tabs = NOTIFICATION_FILTERS.map((filter) => ({
|
||||||
title: intl.formatMessage(messages[filter]),
|
title: intl.formatMessage(messages[filter]),
|
||||||
onClick: () => this.onChangeActiveFilter(filter),
|
onClick: () => this.onChangeActiveFilter(filter),
|
||||||
active: selectedFilter.toLowerCase() === filter.toLowerCase(),
|
active: selectedFilter.toLowerCase() === filter.toLowerCase(),
|
||||||
|
|
Loading…
Reference in New Issue