refresh on notification filter type change

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

packages/pl-fe/src/actions/notifications.ts

@@ -2,9 +2,11 @@ import IntlMessageFormat from 'intl-messageformat';
 import 'intl-pluralrules';
 import { defineMessages } from 'react-intl';
 
+import { FILTER_TYPES, type FilterType } from 'pl-fe/features/notifications';
 import { getNotificationStatus } from 'pl-fe/features/notifications/components/notification';
 import { normalizeNotification } from 'pl-fe/normalizers';
 import { importEntities } from 'pl-fe/pl-hooks/importer';
+import { queryClient } from 'pl-fe/queries/client';
 import { getFilters, regexFromFilters } from 'pl-fe/selectors';
 import { unescapeHTML } from 'pl-fe/utils/html';
 import { joinPublicPath } from 'pl-fe/utils/static';
@@ -16,7 +18,6 @@ import type { Notification } from 'pl-api';
 import type { AppDispatch, RootState } from 'pl-fe/store';
 
 const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE' as const;
-const NOTIFICATIONS_UPDATE_NOOP = 'NOTIFICATIONS_UPDATE_NOOP' as const;
 const NOTIFICATIONS_UPDATE_QUEUE = 'NOTIFICATIONS_UPDATE_QUEUE' as const;
 const NOTIFICATIONS_DEQUEUE = 'NOTIFICATIONS_DEQUEUE' as const;
 
@@ -24,19 +25,6 @@ const NOTIFICATIONS_FILTER_SET = 'NOTIFICATIONS_FILTER_SET' as const;
 
 const MAX_QUEUED_NOTIFICATIONS = 40;
 
-type FILTER_TYPES = {
-  all: undefined;
-  mention: ['mention'];
-  favourite: ['favourite', 'emoji_reaction'];
-  reblog: ['reblog'];
-  poll: ['poll'];
-  status: ['status'];
-  follow: ['follow', 'follow_request'];
-  events: ['event_reminder', 'participation_request', 'participation_accepted'];
-};
-
-type FilterType = keyof FILTER_TYPES;
-
 defineMessages({
   mention: { id: 'notification.mention', defaultMessage: '{name} mentioned you' },
 });
@@ -71,7 +59,6 @@ const updateNotificationsQueue = (notification: Notification, intlMessages: Reco
     if (notification.type === 'chat_mention') return; // Drop chat notifications, handle them per-chat
 
     const filters = getFilters(getState(), { contextType: 'notifications' });
-    const playSound = getSettings(getState()).getIn(['notifications', 'sounds', notification.type]);
 
     const status = getNotificationStatus(notification);
 
@@ -109,13 +96,6 @@ const updateNotificationsQueue = (notification: Notification, intlMessages: Reco
       console.warn(e);
     }
 
-    if (playSound && !filtered) {
-      dispatch({
-        type: NOTIFICATIONS_UPDATE_NOOP,
-        meta: { sound: 'boop' },
-      });
-    }
-
     if (isOnNotificationsPage) {
       dispatch({
         type: NOTIFICATIONS_UPDATE_QUEUE,
@@ -149,10 +129,14 @@ const dequeueNotifications = () =>
     // dispatch(markReadNotifications());
   };
 
-const setFilter = (filterType: FilterType, abort?: boolean) =>
+const setFilter = (filterType: FilterType | 'all') =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const activeFilter = getSettings(getState()).getIn(['notifications', 'quickFilter', 'active']);
 
+    queryClient.resetQueries({
+      queryKey: ['notifications', 'lists', filterType === 'all' ? 'all' : FILTER_TYPES[filterType].join('|')],
+    });
+
     dispatch({
       type: NOTIFICATIONS_FILTER_SET,
       path: ['notifications', 'quickFilter', 'active'],
@@ -163,7 +147,6 @@ const setFilter = (filterType: FilterType, abort?: boolean) =>
 
 export {
   NOTIFICATIONS_UPDATE,
-  NOTIFICATIONS_UPDATE_NOOP,
   NOTIFICATIONS_UPDATE_QUEUE,
   NOTIFICATIONS_DEQUEUE,
   NOTIFICATIONS_FILTER_SET,

packages/pl-fe/src/features/notifications/components/filter-bar.tsx

@@ -29,7 +29,7 @@ const NotificationFilterBar = () => {
 
   const onClick = (notificationType: FilterType) => () => {
     try {
-      dispatch(setFilter(notificationType, true));
+      dispatch(setFilter(notificationType));
     } catch (e) {
       console.error(e);
     }

packages/pl-fe/src/features/notifications/index.tsx

@@ -23,7 +23,9 @@ const messages = defineMessages({
   queue: { id: 'notifications.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {notification} other {notifications}}' },
 });
 
-const FILTER_TYPES: Record<string, Array<NotificationType> | undefined> = {
+type FilterType = 'mention' | 'favourite' | 'reblog' | 'poll' | 'status' | 'follow' | 'events';
+
+const FILTER_TYPES: { all: undefined } & Record<FilterType, Array<NotificationType>> = {
   all: undefined,
   mention: ['mention'],
   favourite: ['favourite', 'emoji_reaction'],
@@ -34,15 +36,13 @@ const FILTER_TYPES: Record<string, Array<NotificationType> | undefined> = {
   events: ['event_reminder', 'participation_request', 'participation_accepted'],
 };
 
-type FilterType = keyof typeof FILTER_TYPES;
-
 const Notifications = () => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const settings = useSettings();
 
 
-  const activeFilter = settings.notifications.quickFilter.active as FilterType;
+  const activeFilter = settings.notifications.quickFilter.active as FilterType | 'all';
 
   const params = activeFilter === 'all' ? {} : {
     types: FILTER_TYPES[activeFilter] || [activeFilter] as Array<NotificationType>,

packages/pl-fe/src/pl-hooks/hooks/notifications/useNotificationList.ts

@@ -16,6 +16,7 @@ type UseNotificationParams = {
 
 const getQueryKey = (params: UseNotificationParams) => [
   'notifications',
+  'lists',
   params.types ? params.types.join('|') : params.excludeTypes ? ('exclude:' + params.excludeTypes.join('|')) : 'all',
 ];