diff --git a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_with_status.tsx b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_with_status.tsx index 941b1254f7..4f45189e59 100644 --- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_with_status.tsx +++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_with_status.tsx @@ -16,6 +16,7 @@ import { import type { IconProp } from 'flavours/glitch/components/icon'; import { Icon } from 'flavours/glitch/components/icon'; import Status from 'flavours/glitch/containers/status_container'; +import { getStatusHidden } from 'flavours/glitch/selectors/filters'; import { useAppSelector, useAppDispatch } from 'flavours/glitch/store'; import { DisplayedName } from './displayed_name'; @@ -51,6 +52,12 @@ export const NotificationWithStatus: React.FC<{ (state) => state.statuses.getIn([statusId, 'visibility']) === 'direct', ); + const isFiltered = useAppSelector( + (state) => + statusId && + getStatusHidden(state, { id: statusId, contextType: 'notifications' }), + ); + const handlers = useMemo( () => ({ open: () => { @@ -77,7 +84,7 @@ export const NotificationWithStatus: React.FC<{ [dispatch, statusId], ); - if (!statusId) return null; + if (!statusId || isFiltered) return null; return ( diff --git a/app/javascript/flavours/glitch/selectors/filters.ts b/app/javascript/flavours/glitch/selectors/filters.ts new file mode 100644 index 0000000000..5d7bfcbdc7 --- /dev/null +++ b/app/javascript/flavours/glitch/selectors/filters.ts @@ -0,0 +1,50 @@ +import { createSelector } from '@reduxjs/toolkit'; + +import type { RootState } from 'flavours/glitch/store'; +import { toServerSideType } from 'flavours/glitch/utils/filters'; + +// TODO: move to `app/javascript/flavours/glitch/models` and use more globally +type Filter = Immutable.Map; + +// TODO: move to `app/javascript/flavours/glitch/models` and use more globally +type FilterResult = Immutable.Map; + +export const getFilters = createSelector( + [ + (state: RootState) => state.filters as Immutable.Map, + (_, { contextType }: { contextType: string }) => contextType, + ], + (filters, contextType) => { + if (!contextType) { + return null; + } + + const now = new Date(); + const serverSideType = toServerSideType(contextType); + + return filters.filter((filter) => { + const context = filter.get('context') as Immutable.List; + const expiration = filter.get('expires_at') as Date | null; + return ( + context.includes(serverSideType) && + (expiration === null || expiration > now) + ); + }); + }, +); + +export const getStatusHidden = ( + state: RootState, + { id, contextType }: { id: string; contextType: string }, +) => { + const filters = getFilters(state, { contextType }); + if (filters === null) return false; + + const filtered = state.statuses.getIn([id, 'filtered']) as + | Immutable.List + | undefined; + return filtered?.some( + (result) => + filters.getIn([result.get('filter'), 'filter_action']) === 'hide', + ); +}; diff --git a/app/javascript/flavours/glitch/selectors/index.js b/app/javascript/flavours/glitch/selectors/index.js index 1b2d63ae36..7c9a68cba4 100644 --- a/app/javascript/flavours/glitch/selectors/index.js +++ b/app/javascript/flavours/glitch/selectors/index.js @@ -1,23 +1,12 @@ import { createSelector } from '@reduxjs/toolkit'; import { List as ImmutableList, Map as ImmutableMap } from 'immutable'; -import { toServerSideType } from 'flavours/glitch/utils/filters'; - import { me } from '../initial_state'; +import { getFilters } from './filters'; + export { makeGetAccount } from "./accounts"; -const getFilters = createSelector([state => state.get('filters'), (_, { contextType }) => contextType], (filters, contextType) => { - if (!contextType) { - return null; - } - - const now = new Date(); - const serverSideType = toServerSideType(contextType); - - return filters.filter(filter => filter.get('context').includes(serverSideType) && (filter.get('expires_at') === null || filter.get('expires_at') > now)); -}); - export const makeGetStatus = () => { return createSelector( [