show a simple 404 page

frontend/src/Documents/DocumentEdit.tsx

@@ -8,6 +8,7 @@ import { Dispatch } from "redux";
 import { IDocumentJSON } from "~../../src/entity/Document";
 import { showDeletionToast } from "~AppToaster";
 import { LoadingStub } from "~LoadingStub";
+import { NotFound } from "~NotFound";
 import {
     deleteDocCancel,
     deleteDocStart,
@@ -59,7 +60,9 @@ export class DocumentEditComponent extends React.PureComponent<
     public render() {
         if (this.state.loaded) {
             const doc = this.props.allDocs[this.state.id];
-
+            if (!doc) {
+                return <NotFound />;
+            }
             return (
                 <div className="document">
                     <div className="documentHeader">
@@ -165,17 +168,11 @@ export class DocumentEditComponent extends React.PureComponent<
             this.props.fetchDocs();
         } else {
             const { id } = this.props.match.params as any;
-            if (
-                !this.state.loaded &&
-                this.props.allDocs &&
-                this.props.allDocs[id]
-            ) {
-                const doc = this.props.allDocs[id];
-
+            if (!this.state.loaded && this.props.allDocs) {
                 this.setState({
                     ...this.state,
                     loaded: true,
-                    id: doc.id,
+                    id,
                 });
             }
         }

frontend/src/Documents/DocumentView.tsx

@@ -8,6 +8,7 @@ import { RouteComponentProps, withRouter } from "react-router";
 import { Dispatch } from "redux";
 import { IDocumentJSON } from "~../../src/entity/Document";
 import { LoadingStub } from "~LoadingStub";
+import { NotFound } from "~NotFound";
 import { fetchDocsStart } from "~redux/docs/actions";
 import { IAppState } from "~redux/reducers";
 import { CodeBlock } from "./CodeBlock";
@@ -27,8 +28,12 @@ export class DocumentViewComponent extends React.PureComponent<
 > {
     public render() {
         const { id } = this.props.match.params as any;
-        if (this.props.allDocs && this.props.allDocs[id]) {
+        if (this.props.allDocs) {
             const doc = this.props.allDocs[id];
+            if (!doc) {
+                return <NotFound />;
+            }
+
             return (
                 <div className="document">
                     <div className="documentHeader">

frontend/src/Home/Home.tsx

@@ -58,11 +58,13 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
 
         if ((this.props.match.params as any).id && this.props.allDocs) {
             const { id } = this.props.match.params as any;
-            breadcrumbs.push({
-                icon: "document",
-                text: this.props.allDocs[id].name,
-                onClick: () => this.props.history.push(`/docs/${id}`),
-            });
+            if (this.props.allDocs[id]) {
+                breadcrumbs.push({
+                    icon: "document",
+                    text: this.props.allDocs[id].name,
+                    onClick: () => this.props.history.push(`/docs/${id}`),
+                });
+            }
         }
 
         return (
@@ -82,8 +84,8 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
                                 {this.props.uploading || this.props.dirty ? (
                                     <Spinner size={20} />
                                 ) : (
-                                    <Icon icon="saved" />
-                                )}
+                                        <Icon icon="saved" />
+                                    )}
                             </Button>
                             <Popover
                                 target={
@@ -158,12 +160,12 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
                         onClick={this.props.dispatchToggleDarkMode}
                     />
                 ) : (
-                    <Menu.Item
-                        icon="moon"
-                        text="Dark Mode"
-                        onClick={this.props.dispatchToggleDarkMode}
-                    />
-                )}
+                        <Menu.Item
+                            icon="moon"
+                            text="Dark Mode"
+                            onClick={this.props.dispatchToggleDarkMode}
+                        />
+                    )}
             </Menu>
         );
     }

frontend/src/NotFound.tsx

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+export function NotFound() {
+    return <div>404</div>;
+}