parse the snapshot with the inAppNotificationList component

packages/app/src/components/InAppNotification/InAppNotificationElm.tsx

@@ -9,12 +9,12 @@ import FormattedDistanceDate from '../FormattedDistanceDate';
 
 interface Props {
   notification: IInAppNotification & HasObjectId
+  pagePath: string
 }
 
 const InAppNotificationElm = (props: Props): JSX.Element => {
 
-  const { notification } = props;
-
+  const { notification, pagePath } = props;
 
   const getActionUsers = () => {
     const latestActionUsers = notification.actionUsers.slice(0, 3);
@@ -70,9 +70,6 @@ const InAppNotificationElm = (props: Props): JSX.Element => {
 
   const actionUsers = getActionUsers();
 
-  const snapshot = JSON.parse(notification.snapshot);
-  const pagePath = { path: snapshot.path };
-
   const actionType: string = notification.action;
   let actionMsg: string;
   let actionIcon: string;
@@ -121,7 +118,7 @@ const InAppNotificationElm = (props: Props): JSX.Element => {
       <div className="p-2">
         <div onClick={notificationClickHandler}>
           <div>
-            <b>{actionUsers}</b> {actionMsg} <PagePathLabel page={pagePath} />
+            <b>{actionUsers}</b> {actionMsg} <PagePathLabel page={{ path: pagePath }} />
           </div>
           <i className={`${actionIcon} mr-2`} />
           <FormattedDistanceDate

packages/app/src/components/InAppNotification/InAppNotificationList.tsx

@@ -28,11 +28,17 @@ const InAppNotificationList: FC<Props> = (props: Props) => {
 
   const renderInAppNotificationList = () => {
     const inAppNotificationList = notifications.map((notification: IInAppNotification & HasObjectId) => {
-      return (
-        <div className="d-flex flex-row" key={notification._id}>
-          <InAppNotificationElm notification={notification} />
-        </div>
-      );
+
+      if (notification.targetModel === 'Page') {
+        const snapshot = JSON.parse(notification.snapshot);
+
+        return (
+          <div className="d-flex flex-row" key={notification._id}>
+            <InAppNotificationElm notification={notification} pagePath={snapshot.path} />
+          </div>
+        );
+      }
+
     });
 
     return inAppNotificationList;