Updated notifications to set filter if view query is present on load

• Updated:
- notifications to set filter if view query is present on load

app/javascript/gabsocial/actions/notifications.js

@@ -12,6 +12,7 @@ import { List as ImmutableList } from 'immutable';
 import { unescapeHTML } from '../utils/html';
 import { getFilters, regexFromFilters } from '../selectors';
 import { me } from '../initial_state';
+import { NOTIFICATION_FILTERS } from '../constants'
 
 export const NOTIFICATIONS_INITIALIZE = 'NOTIFICATIONS_INITIALIZE';
 export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
@@ -157,16 +158,10 @@ export function expandNotifications({ maxId } = {}, done = noOp) {
       return;
     }
 
-    // console.log("activeFilter:", activeFilter)
-
     const params = {
       max_id: maxId,
       exclude_types: activeFilter === 'all' ? null : excludeTypesFromFilter(activeFilter),
-      // : todo : ?
+    }
-      // exclude_types: activeFilter === 'all'
-      //   ? excludeTypesFromSettings(getState())
-      //   : excludeTypesFromFilter(activeFilter),
-    };
 
     if (!!onlyVerified) params.only_verified = onlyVerified
     if (!!onlyFollowing) params.only_following = onlyFollowing
@@ -240,7 +235,9 @@ export function scrollTopNotifications(top) {
 };
 
 export function setFilter(path, value) {
-  return dispatch => {
+  return (dispatch) => {
+    if (path === 'active' && NOTIFICATION_FILTERS.indexOf(value) === -1) return
+
     dispatch({
       type: NOTIFICATIONS_FILTER_SET,
       path: path,

app/javascript/gabsocial/constants.js

@@ -89,3 +89,12 @@ export const THEMES = [
 
 export const DEFAULT_THEME = 'light'
 export const DEFAULT_FONT_SIZE = 'normal' 
+
+export const NOTIFICATION_FILTERS = [
+  'all',
+  'mention',
+  'favourite',
+  'reblog',
+  'poll',
+  'follow',
+]

app/javascript/gabsocial/features/ui/ui.js

@@ -4,12 +4,14 @@ import { HotKeys } from 'react-hotkeys'
 import { defineMessages, injectIntl } from 'react-intl'
 import { Switch, Redirect, withRouter } from 'react-router-dom'
 import debounce from 'lodash.debounce'
+import queryString from 'query-string'
 import { uploadCompose, resetCompose } from '../../actions/compose'
 import { expandHomeTimeline } from '../../actions/timelines'
 import { fetchGroups } from '../../actions/groups'
 import {
   initializeNotifications,
   expandNotifications,
+  setFilter,
 } from '../../actions/notifications'
 import LoadingBar from '../../components/loading_bar'
 import { fetchFilters } from '../../actions/filters'
@@ -380,6 +382,15 @@ class UI extends PureComponent {
       this.setState({ fetchedHome: true })
       this.props.dispatch(expandHomeTimeline())
     } 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.props.dispatch(expandNotifications())
     }

app/javascript/gabsocial/pages/notifications_page.js

@@ -1,7 +1,7 @@
 import { Fragment } from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
-import queryString from 'query-string'
 import { setFilter } from '../actions/notifications'
+import { NOTIFICATION_FILTERS } from '../constants'
 import PageTitle from '../features/ui/util/page_title'
 import LinkFooter from '../components/link_footer'
 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 DefaultLayout from '../layouts/default_layout'
 
-const filters = [
-  'all',
-  'mention',
-  'favourite',
-  'reblog',
-  'poll',
-  'follow',
-]
-
 const messages = defineMessages({
   notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
   mention: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
@@ -57,22 +48,6 @@ class NotificationsPage extends PureComponent {
     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) {
     this.props.setFilter(notificationType)
     
@@ -91,7 +66,7 @@ class NotificationsPage extends PureComponent {
       selectedFilter,
     } = this.props
 
-    const tabs = filters.map((filter) => ({ 
+    const tabs = NOTIFICATION_FILTERS.map((filter) => ({ 
       title: intl.formatMessage(messages[filter]),
       onClick: () => this.onChangeActiveFilter(filter),
       active: selectedFilter.toLowerCase() === filter.toLowerCase(),