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}
+
);
}