From 3c5dc104466c005b42261cc90f60230b0ff42636 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 22 May 2023 09:31:18 -0400
Subject: [PATCH] fix: Notification from unknown actor causes app crash

---
 .../Notifications/NotificationListItem.tsx    |  2 +-
 .../Notifications/Notifications.tsx           | 77 ++++++++++---------
 app/models/Notification.ts                    |  2 +-
 shared/i18n/locales/en_US/translation.json    |  1 +
 4 files changed, 43 insertions(+), 39 deletions(-)

diff --git a/app/components/Notifications/NotificationListItem.tsx b/app/components/Notifications/NotificationListItem.tsx
index 867c0c05f..a8b6219a7 100644
--- a/app/components/Notifications/NotificationListItem.tsx
+++ b/app/components/Notifications/NotificationListItem.tsx
@@ -46,7 +46,7 @@ function NotificationListItem({ notification, onNavigate }: Props) {
         <Flex column>
           <Text as="div" size="small">
             <Text as="span" weight="bold">
-              {notification.actor.name}
+              {notification.actor?.name ?? t("Unknown")}
             </Text>{" "}
             {notification.eventText(t)}{" "}
             <Text as="span" weight="bold">
diff --git a/app/components/Notifications/Notifications.tsx b/app/components/Notifications/Notifications.tsx
index 9ae841828..e2cc4da3d 100644
--- a/app/components/Notifications/Notifications.tsx
+++ b/app/components/Notifications/Notifications.tsx
@@ -12,6 +12,7 @@ import useStores from "~/hooks/useStores";
 import { hover } from "~/styles";
 import Desktop from "~/utils/Desktop";
 import Empty from "../Empty";
+import ErrorBoundary from "../ErrorBoundary";
 import Flex from "../Flex";
 import NudeButton from "../NudeButton";
 import PaginatedList from "../PaginatedList";
@@ -47,45 +48,47 @@ function Notifications(
   }, [notifications.approximateUnreadCount]);
 
   return (
-    <Flex style={{ width: "100%" }} column>
-      <Header justify="space-between">
-        <Text weight="bold" as="span">
-          {t("Notifications")}
-        </Text>
-        <Text color="textSecondary" as={Flex} gap={8}>
-          {notifications.approximateUnreadCount > 0 && (
-            <Tooltip delay={500} tooltip={t("Mark all as read")}>
-              <Button action={markNotificationsAsRead} context={context}>
-                <MarkAsReadIcon />
+    <ErrorBoundary>
+      <Flex style={{ width: "100%" }} column>
+        <Header justify="space-between">
+          <Text weight="bold" as="span">
+            {t("Notifications")}
+          </Text>
+          <Text color="textSecondary" as={Flex} gap={8}>
+            {notifications.approximateUnreadCount > 0 && (
+              <Tooltip delay={500} tooltip={t("Mark all as read")}>
+                <Button action={markNotificationsAsRead} context={context}>
+                  <MarkAsReadIcon />
+                </Button>
+              </Tooltip>
+            )}
+            <Tooltip delay={500} tooltip={t("Settings")}>
+              <Button action={navigateToNotificationSettings} context={context}>
+                <SettingsIcon />
               </Button>
             </Tooltip>
-          )}
-          <Tooltip delay={500} tooltip={t("Settings")}>
-            <Button action={navigateToNotificationSettings} context={context}>
-              <SettingsIcon />
-            </Button>
-          </Tooltip>
-        </Text>
-      </Header>
-      <React.Suspense fallback={null}>
-        <Scrollable ref={ref} flex topShadow>
-          <PaginatedList
-            fetch={notifications.fetchPage}
-            items={notifications.orderedData}
-            renderItem={(item: Notification) => (
-              <NotificationListItem
-                key={item.id}
-                notification={item}
-                onNavigate={onRequestClose}
-              />
-            )}
-          />
-        </Scrollable>
-      </React.Suspense>
-      {isEmpty && (
-        <EmptyNotifications>{t("No notifications yet")}.</EmptyNotifications>
-      )}
-    </Flex>
+          </Text>
+        </Header>
+        <React.Suspense fallback={null}>
+          <Scrollable ref={ref} flex topShadow>
+            <PaginatedList
+              fetch={notifications.fetchPage}
+              items={notifications.orderedData}
+              renderItem={(item: Notification) => (
+                <NotificationListItem
+                  key={item.id}
+                  notification={item}
+                  onNavigate={onRequestClose}
+                />
+              )}
+            />
+          </Scrollable>
+        </React.Suspense>
+        {isEmpty && (
+          <EmptyNotifications>{t("No notifications yet")}.</EmptyNotifications>
+        )}
+      </Flex>
+    </ErrorBoundary>
   );
 }
 
diff --git a/app/models/Notification.ts b/app/models/Notification.ts
index 35d10c53a..8faa13561 100644
--- a/app/models/Notification.ts
+++ b/app/models/Notification.ts
@@ -25,7 +25,7 @@ class Notification extends BaseModel {
   @observable
   archivedAt: Date | null;
 
-  actor: User;
+  actor?: User;
 
   documentId?: string;
 
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index 6cebe1260..a4cb7cec1 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -205,6 +205,7 @@
   "Sorry, an error occurred.": "Sorry, an error occurred.",
   "Click to retry": "Click to retry",
   "Back": "Back",
+  "Unknown": "Unknown",
   "Mark all as read": "Mark all as read",
   "No notifications yet": "No notifications yet",
   "Documents": "Documents",