From fdb1d1f8496c272d3e422668e2f15389e51e82f5 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Tue, 9 Jun 2020 14:22:40 -0400
Subject: [PATCH] spa: add 404 page

---
 pkg/interface/src/App.js                  | 48 ++++++++++++++++-------
 pkg/interface/src/components/404.js       | 15 +++++++
 pkg/interface/src/components/StatusBar.js | 17 ++++----
 3 files changed, 58 insertions(+), 22 deletions(-)
 create mode 100644 pkg/interface/src/components/404.js

diff --git a/pkg/interface/src/App.js b/pkg/interface/src/App.js
index f0c08ebb3..34c8d2919 100644
--- a/pkg/interface/src/App.js
+++ b/pkg/interface/src/App.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BrowserRouter as Router, Route, Link, withRouter } from 'react-router-dom';
+import { BrowserRouter as Router, Route, withRouter, Switch } from 'react-router-dom';
 import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
 import './css/indigo-static.css';
 import './css/fonts.css';
@@ -8,11 +8,13 @@ import { light } from '@tlon/indigo-react';
 import LaunchApp from './apps/launch/app';
 import ChatApp from './apps/chat/app';
 import DojoApp from './apps/dojo/app';
-import StatusBar from './components/StatusBar';
 import GroupsApp from './apps/groups/app';
 import LinksApp from './apps/links/app';
 import PublishApp from './apps/publish/app';
 
+import StatusBar from './components/StatusBar';
+import NotFound from './components/404';
+
 import GlobalStore from './store/global';
 import GlobalSubscription from './subscription/global';
 import GlobalApi from './api/global';
@@ -71,48 +73,64 @@ export default class App extends React.Component {
             api={this.api}
             />
             <div>
-              <Route exact path="/" render={ p => (
+            <Switch>
+              <Route exact path="/"
+              render={ p => (
                 <LaunchApp
                   ship={this.ship}
                   channel={channel}
                   selectedGroups={selectedGroups}
-                  {...p} />
-              )} />
+                  {...p}
+                />
+              )}
+              />
               <Route path="/~chat" render={ p => (
                 <ChatApp
                   ship={this.ship}
                   channel={channel}
                   selectedGroups={selectedGroups}
-                  {...p} />
-              )} />
+                  {...p}
+                />
+              )}
+              />
               <Route path="/~dojo" render={ p => (
                 <DojoApp
                   ship={this.ship}
                   channel={channel}
                   selectedGroups={selectedGroups}
-                  {...p} />
-              )} />
+                  {...p}
+                />
+              )}
+              />
               <Route path="/~groups" render={ p => (
                 <GroupsApp
                   ship={this.ship}
                   channel={channel}
                   selectedGroups={selectedGroups}
-                  {...p} />
-              )} />
+                  {...p}
+                />
+              )}
+              />
               <Route path="/~link" render={ p => (
                 <LinksApp
                   ship={this.ship}
                   channel={channel}
                   selectedGroups={selectedGroups}
-                  {...p} />
-              )} />
+                  {...p}
+                />
+              )}
+              />
               <Route path="/~publish" render={ p => (
                 <PublishApp
                   ship={this.ship}
                   channel={channel}
                   selectedGroups={selectedGroups}
-                  {...p} />
-              )} />
+                  {...p}
+                />
+              )}
+              />
+              <Route component={NotFound} />
+              </Switch>
             </div>
           </Router>
         </Root>
diff --git a/pkg/interface/src/components/404.js b/pkg/interface/src/components/404.js
new file mode 100644
index 000000000..fbe74bce8
--- /dev/null
+++ b/pkg/interface/src/components/404.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const NotFound = () => <div
+  className="fixed inter tc"
+  style={{
+    top: '50vh',
+    left: '50%',
+    transform: 'translate(-50%, -25vh)',
+    fontFeatureSettings: '\'zero\' 1' }}>
+  <h1 className="fw2 f2">404</h1>
+  <p className="tc">Not found.<br /><br />
+  If this is unexpected, email <code>support@tlon.io</code> or <a className="bb" href="https://github.com/urbit/urbit/issues/new/choose">submit an issue</a>.</p>
+</div>;
+
+export default NotFound;
diff --git a/pkg/interface/src/components/StatusBar.js b/pkg/interface/src/components/StatusBar.js
index 1a74ec0b9..71a00505b 100644
--- a/pkg/interface/src/components/StatusBar.js
+++ b/pkg/interface/src/components/StatusBar.js
@@ -7,14 +7,16 @@ import { Sigil } from '../lib/sigil';
 const getLocationName = (basePath) => {
   if (basePath === '~chat')
     return 'Chat';
-  if (basePath === '~dojo')
+  else if (basePath === '~dojo')
     return 'Dojo';
-  if (basePath === '~groups')
+  else if (basePath === '~groups')
     return 'Groups';
-  if (basePath === '~link')
+  else if (basePath === '~link')
     return 'Links';
-  if (basePath === '~publish')
+  else if (basePath === '~publish')
     return 'Publish';
+  else
+    return 'Unknown';
 };
 
 const StatusBar = (props) => {
@@ -24,8 +26,9 @@ const StatusBar = (props) => {
     ? 'Home'
     : getLocationName(basePath);
 
-  const popout = window.location.href.includes('popout/')
-    ? 'dn' : 'db';
+  const display = (!window.location.href.includes('popout/') &&
+    (locationName !== 'Unknown'))
+      ? 'db' : 'dn';
 
   const invites = (props.invites && props.invites['/contacts'])
     ? props.invites['/contacts']
@@ -34,7 +37,7 @@ const StatusBar = (props) => {
   return (
     <div
       className={
-        'bg-white bg-gray0-d w-100 justify-between relative tc pt3 ' + popout
+        'bg-white bg-gray0-d w-100 justify-between relative tc pt3 ' + display
       }
       style={{ height: 45 }}
     >