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} />
- ( + + ( - )} /> + {...p} + /> + )} + /> ( - )} /> + {...p} + /> + )} + /> ( - )} /> + {...p} + /> + )} + /> ( - )} /> + {...p} + /> + )} + /> ( - )} /> + {...p} + /> + )} + /> ( - )} /> + {...p} + /> + )} + /> + +
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 = () =>
+

404

+

Not found.

+ If this is unexpected, email support@tlon.io or submit an issue.

+
; + +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 (