From 8b0863c6d88001eb8dc24b013f1c23e8f5c09762 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Tue, 1 Oct 2024 00:12:08 +0200 Subject: [PATCH] refresh on notification filter type change MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- packages/pl-fe/src/actions/notifications.ts | 31 +++++-------------- .../notifications/components/filter-bar.tsx | 2 +- .../src/features/notifications/index.tsx | 8 ++--- .../notifications/useNotificationList.ts | 1 + 4 files changed, 13 insertions(+), 29 deletions(-) diff --git a/packages/pl-fe/src/actions/notifications.ts b/packages/pl-fe/src/actions/notifications.ts index 9a3311f8a..635d4484a 100644 --- a/packages/pl-fe/src/actions/notifications.ts +++ b/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, diff --git a/packages/pl-fe/src/features/notifications/components/filter-bar.tsx b/packages/pl-fe/src/features/notifications/components/filter-bar.tsx index 6e76d5747..e5344da5b 100644 --- a/packages/pl-fe/src/features/notifications/components/filter-bar.tsx +++ b/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); } diff --git a/packages/pl-fe/src/features/notifications/index.tsx b/packages/pl-fe/src/features/notifications/index.tsx index 0e0e7d1cd..19ecd97e9 100644 --- a/packages/pl-fe/src/features/notifications/index.tsx +++ b/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 | undefined> = { +type FilterType = 'mention' | 'favourite' | 'reblog' | 'poll' | 'status' | 'follow' | 'events'; + +const FILTER_TYPES: { all: undefined } & Record> = { all: undefined, mention: ['mention'], favourite: ['favourite', 'emoji_reaction'], @@ -34,15 +36,13 @@ const FILTER_TYPES: Record | 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, diff --git a/packages/pl-fe/src/pl-hooks/hooks/notifications/useNotificationList.ts b/packages/pl-fe/src/pl-hooks/hooks/notifications/useNotificationList.ts index 9ccd33cc3..9d1ac3c2f 100644 --- a/packages/pl-fe/src/pl-hooks/hooks/notifications/useNotificationList.ts +++ b/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', ];