Render 404 with search if user tries to load unknown document

frontend/scenes/Document/Document.js

@@ -20,6 +20,7 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import Collaborators from 'components/Collaborators';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
+import Search from 'scenes/Search';
 
 const DISCARD_CHANGES = `
 You have unsaved changes.
@@ -47,6 +48,7 @@ type Props = {
     isSaving: false,
     newDocument: undefined,
     showAsSaved: false,
+    notFound: false,
   };
 
   componentDidMount() {
@@ -58,6 +60,7 @@ type Props = {
       nextProps.match.params.documentSlug !==
       this.props.match.params.documentSlug
     ) {
+      this.setState({ notFound: false });
       this.loadDocument(nextProps);
     }
   }
@@ -87,6 +90,8 @@ type Props = {
       if (document) {
         this.props.ui.setActiveDocument(document);
         document.view();
+      } else {
+        this.setState({ notFound: true });
       }
     }
   };
@@ -153,6 +158,11 @@ type Props = {
     this.setState({ isDragging: false });
   };
 
+  renderNotFound() {
+    const { match } = this.props;
+    return <Search match={match} notFound />;
+  }
+
   render() {
     const isNew = this.props.newDocument;
     const isEditing = !!this.props.match.params.edit || isNew;
@@ -160,6 +170,10 @@ type Props = {
     const titleText = get(this.document, 'title', '');
     const document = this.document;
 
+    if (this.state.notFound) {
+      return this.renderNotFound();
+    }
+
     return (
       <Container column auto>
         {this.state.isDragging &&