diff --git a/packages/shared/src/components/notifications/NotificationItem.tsx b/packages/shared/src/components/notifications/NotificationItem.tsx index 23d6af3c00..a0a7009c7c 100644 --- a/packages/shared/src/components/notifications/NotificationItem.tsx +++ b/packages/shared/src/components/notifications/NotificationItem.tsx @@ -90,7 +90,7 @@ const NotificationOptionsButton = ({ }); }; - const Icon = (): ReactElement => { + const Icon = (): ReactElement | null => { if (!notification) { return null; } @@ -109,7 +109,7 @@ const NotificationOptionsButton = ({ const label = useMemo((): string => { if (!notification) { - return null; + return ''; } if (isFetching) { @@ -120,6 +120,10 @@ const NotificationOptionsButton = ({ preferences[0]?.status === NotificationPreferenceStatus.Muted; const copy = notificationMutingCopy[notification?.type]; + if (!copy) { + return ''; + } + return isMuted ? copy.unmute : copy.mute; }, [notification, preferences, isFetching]); const options = [{ icon: , label, action: onItemClick }]; @@ -145,7 +149,7 @@ const NotificationOptionsButton = ({ ); }; -function NotificationItem(props: NotificationItemProps): ReactElement { +function NotificationItem(props: NotificationItemProps): ReactElement | null { const { icon, type, @@ -165,7 +169,7 @@ function NotificationItem(props: NotificationItemProps): ReactElement { isReady, title: memoizedTitle, description: memoizedDescription, - } = useObjectPurify({ title, description }); + } = useObjectPurify({ title, description: description ?? '' }); const router = useRouter(); const isClickable = !notificationTypeNotClickable[type]; @@ -281,6 +285,7 @@ function NotificationItem(props: NotificationItemProps): ReactElement { ))} diff --git a/packages/shared/src/components/notifications/NotificationItemAttachment.tsx b/packages/shared/src/components/notifications/NotificationItemAttachment.tsx index 6c69ec5488..f2a747cf8a 100644 --- a/packages/shared/src/components/notifications/NotificationItemAttachment.tsx +++ b/packages/shared/src/components/notifications/NotificationItemAttachment.tsx @@ -1,15 +1,28 @@ import type { ReactElement } from 'react'; import React from 'react'; +import classNames from 'classnames'; import type { NotificationAttachment } from '../../graphql/notifications'; import { NotificationAttachmentType } from '../../graphql/notifications'; import { IconSize } from '../Icon'; import { CardCover } from '../cards/common/CardCover'; +import { NotificationType } from './utils'; + +interface NotificationItemAttachmentProps extends NotificationAttachment { + notificationType?: NotificationType; +} + +const truncatedNotificationTypes = new Set([ + NotificationType.SourcePostAdded, + NotificationType.UserPostAdded, + NotificationType.SquadPostAdded, +]); function NotificationItemAttachment({ image, title, type, -}: NotificationAttachment): ReactElement { + notificationType, +}: NotificationItemAttachmentProps): ReactElement { return (
@@ -25,7 +38,16 @@ function NotificationItemAttachment({ videoProps={{ size: IconSize.XLarge }} />
- {title} + + {title} +
); }