From 46f2a7cda7efa88e5ac727d0cea7358ce068f506 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Tue, 10 Nov 2020 12:24:47 -0600
Subject: [PATCH] Create a 404 page. Fixes #71

---
 src/server/index.tsx               |  6 ++++++
 src/shared/components/app.tsx      | 11 ++++++-----
 src/shared/components/no-match.tsx | 15 +++++++++++++++
 3 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 src/shared/components/no-match.tsx

diff --git a/src/server/index.tsx b/src/server/index.tsx
index c8d60448..828fa0c6 100644
--- a/src/server/index.tsx
+++ b/src/server/index.tsx
@@ -44,6 +44,12 @@ server.get('/*', async (req, res) => {
   let site: GetSiteResponse = resolver[0];
   let routeData = resolver.slice(1, resolver.length);
 
+  // Redirect to the 404 if there's an API error
+  if (routeData[0] && routeData[0].error) {
+    console.log(`Route error: ${routeData[0].error}`);
+    return res.redirect('/404');
+  }
+
   let acceptLang = req.headers['accept-language']
     ? req.headers['accept-language'].split(',')[0]
     : 'en';
diff --git a/src/shared/components/app.tsx b/src/shared/components/app.tsx
index 67d94591..65946451 100644
--- a/src/shared/components/app.tsx
+++ b/src/shared/components/app.tsx
@@ -3,11 +3,12 @@ import { Route, Switch } from 'inferno-router';
 import { Provider } from 'inferno-i18next';
 import { Helmet } from 'inferno-helmet';
 import { i18n } from '../i18next';
-import { routes } from '../../shared/routes';
-import { Navbar } from '../../shared/components/navbar';
-import { Footer } from '../../shared/components/footer';
+import { routes } from '../routes';
+import { Navbar } from './navbar';
+import { Footer } from './footer';
+import { NoMatch } from './no-match';
 import { Theme } from './theme';
-import { Symbols } from '../../shared/components/symbols';
+import { Symbols } from './symbols';
 import { GetSiteResponse } from 'lemmy-js-client';
 import './styles.scss';
 
@@ -48,7 +49,7 @@ export class App extends Component<AppProps, any> {
                     render={props => <C {...props} {...rest} />}
                   />
                 ))}
-                {/* <Route render={(props) => <NoMatch {...props} />} /> */}
+                <Route render={props => <NoMatch {...props} />} />
               </Switch>
               <Symbols />
             </div>
diff --git a/src/shared/components/no-match.tsx b/src/shared/components/no-match.tsx
new file mode 100644
index 00000000..7020b2bd
--- /dev/null
+++ b/src/shared/components/no-match.tsx
@@ -0,0 +1,15 @@
+import { Component } from 'inferno';
+
+export class NoMatch extends Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
+  render() {
+    return (
+      <div class="container">
+        <h1>404</h1>
+      </div>
+    );
+  }
+}