interface: fixes all around for transcluded content that is subsequently deleted

pkg/interface/src/views/apps/chat/components/ChatMessage.tsx

@@ -245,6 +245,12 @@ function ChatMessage(props: ChatMessageProps) {
     permalink
   } = props;
 
+  if (typeof msg === 'string' || !msg) {
+    return (
+      <Text gray>This message has been deleted.</Text>
+    );
+  }
+
   let onReply = props?.onReply ?? (() => {});
   let onDelete = props?.onDelete ?? (() => {});
   const transcluded = props?.transcluded ?? 0;

pkg/interface/src/views/apps/chat/components/ChatWindow.tsx

@@ -1,7 +1,6 @@
-import { Col } from '@tlon/indigo-react';
+import { Col, Text } from '@tlon/indigo-react';
 import {
   Graph,
-
   GraphNode, Post
 } from '@urbit/api';
 import bigInt, { BigInteger } from 'big-integer';
@@ -197,7 +196,13 @@ class ChatWindow extends Component<
     };
 
     const msg = graph.get(index)?.post;
-    if (!msg || typeof msg === 'string') return null;
+    if (!msg || typeof msg === 'string') {
+      return (
+        <Text pl="44px" pt="1" pb="1" gray display="block">
+          This message has been deleted.
+        </Text>
+      );
+    };
     if (!this.state.initialized) {
       return (
         <MessagePlaceholder

pkg/interface/src/views/apps/links/components/LinkItem.tsx

@@ -1,7 +1,7 @@
 import { Action, Anchor, Box, Col, Icon, Row, Rule, Text } from '@tlon/indigo-react';
 import { Association, GraphNode, Group } from '@urbit/api';
 import React, { ReactElement, useCallback, useEffect, useRef } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
 import GlobalApi from '~/logic/api/global';
 import { roleForShip } from '~/logic/lib/group';
 import { getPermalinkForGraph, referenceToPermalink } from '~/logic/lib/permalinks';
@@ -27,6 +27,10 @@ export const LinkItem = React.forwardRef((props: LinkItemProps, ref): ReactEleme
     ...rest
   } = props;
 
+  if (typeof node.post === 'string' || !note.post) {
+    return <Redirect to="/~404" />;
+  }
+
   const remoteRef = useRef<typeof RemoteContent | null>(null);
   const index = node.post.index.split('/')[1];
 

pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx

@@ -22,6 +22,10 @@ function TranscludedLinkNode(props: {
   const { node, api, assoc, transcluded } = props;
   const idx = node?.post?.index?.slice(1)?.split('/') ?? [];
 
+  if (typeof node?.post === 'string') {
+    return <Text gray>This link has been deleted.</Text>
+  }
+
   switch (idx.length) {
     case 1:
     const [{ text }, link] = node.post.contents;
@@ -59,6 +63,11 @@ function TranscludedComment(props: {
   transcluded: number;
 }) {
   const { assoc, node, api, transcluded } = props;
+
+  if (typeof node?.post === 'string') {
+    return <Text gray>This comment has been deleted.</Text>
+  }
+
   const group = useGroupForAssoc(assoc)!;
 
   const comment = node.children?.peekLargest()![1]!;
@@ -91,6 +100,11 @@ function TranscludedPublishNode(props: {
 }) {
   const { node, assoc, transcluded, api } = props;
   const group = useGroupForAssoc(assoc)!;
+
+  if (typeof node?.post === 'string') {
+    return <Text gray>This note has been deleted.</Text>
+  }
+
   const idx = node?.post?.index?.slice(1)?.split('/') ?? [];
   switch (idx.length) {
     case 1:
@@ -138,6 +152,11 @@ export function TranscludedPost(props: {
   group: Group;
 }) {
   const { transcluded, post, group, api } = props;
+
+  if (typeof post === 'string') {
+    return <Text gray>This post has been deleted.</Text>
+  }
+
   return (
     <Col>
       <Author

pkg/interface/src/views/apps/publish/components/Note.tsx

@@ -14,6 +14,7 @@ import Author from '~/views/components/Author';
 import { Comments } from '~/views/components/Comments';
 import { Spinner } from '~/views/components/Spinner';
 import { NoteNavigation } from './NoteNavigation';
+import { Redirect } from 'react-router-dom';
 
 interface NoteProps {
   ship: string;
@@ -47,6 +48,10 @@ export function Note(props: NoteProps & RouteComponentProps) {
     props.history.push(rootUrl);
   };
 
+  if (typeof note.post === 'string' || !note.post) {
+    return <Redirect to="/~404" />;
+  }
+
   const { query } = useQuery();
   const comments = getComments(note);
   const [revNum, title, body, post] = getLatestRevision(note);