ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-12 15:01:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

spa: add 404 page

Browse Source
This commit is contained in:
Matilde Park 2020-06-09 14:22:40 -04:00
parent 26d4f33968
commit fdb1d1f849
3 changed files with 58 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
pkg/interface/src/App.js
View File

@ -1,5 +1,5 @@
import * as React from 'react'; 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 styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
import './css/indigo-static.css'; import './css/indigo-static.css';
import './css/fonts.css'; import './css/fonts.css';
@ -8,11 +8,13 @@ import { light } from '@tlon/indigo-react';
import LaunchApp from './apps/launch/app'; import LaunchApp from './apps/launch/app';
import ChatApp from './apps/chat/app'; import ChatApp from './apps/chat/app';
import DojoApp from './apps/dojo/app'; import DojoApp from './apps/dojo/app';
import StatusBar from './components/StatusBar';
import GroupsApp from './apps/groups/app'; import GroupsApp from './apps/groups/app';
import LinksApp from './apps/links/app'; import LinksApp from './apps/links/app';
import PublishApp from './apps/publish/app'; import PublishApp from './apps/publish/app';
import StatusBar from './components/StatusBar';
import NotFound from './components/404';
import GlobalStore from './store/global'; import GlobalStore from './store/global';
import GlobalSubscription from './subscription/global'; import GlobalSubscription from './subscription/global';
import GlobalApi from './api/global'; import GlobalApi from './api/global';
@ -71,48 +73,64 @@ export default class App extends React.Component {
api={this.api} api={this.api}
/> />
<div> <div>
<Route exact path="/" render={ p => ( <Switch>
<Route exact path="/"
render={ p => (
<LaunchApp <LaunchApp
ship={this.ship} ship={this.ship}
channel={channel} channel={channel}
selectedGroups={selectedGroups} selectedGroups={selectedGroups}
{...p} /> {...p}
)} /> />
)}
/>
<Route path="/~chat" render={ p => ( <Route path="/~chat" render={ p => (
<ChatApp <ChatApp
ship={this.ship} ship={this.ship}
channel={channel} channel={channel}
selectedGroups={selectedGroups} selectedGroups={selectedGroups}
{...p} /> {...p}
)} /> />
)}
/>
<Route path="/~dojo" render={ p => ( <Route path="/~dojo" render={ p => (
<DojoApp <DojoApp
ship={this.ship} ship={this.ship}
channel={channel} channel={channel}
selectedGroups={selectedGroups} selectedGroups={selectedGroups}
{...p} /> {...p}
)} /> />
)}
/>
<Route path="/~groups" render={ p => ( <Route path="/~groups" render={ p => (
<GroupsApp <GroupsApp
ship={this.ship} ship={this.ship}
channel={channel} channel={channel}
selectedGroups={selectedGroups} selectedGroups={selectedGroups}
{...p} /> {...p}
)} /> />
)}
/>
<Route path="/~link" render={ p => ( <Route path="/~link" render={ p => (
<LinksApp <LinksApp
ship={this.ship} ship={this.ship}
channel={channel} channel={channel}
selectedGroups={selectedGroups} selectedGroups={selectedGroups}
{...p} /> {...p}
)} /> />
)}
/>
<Route path="/~publish" render={ p => ( <Route path="/~publish" render={ p => (
<PublishApp <PublishApp
ship={this.ship} ship={this.ship}
channel={channel} channel={channel}
selectedGroups={selectedGroups} selectedGroups={selectedGroups}
{...p} /> {...p}
)} /> />
)}
/>
<Route component={NotFound} />
</Switch>
</div> </div>
</Router> </Router>
</Root> </Root>

15
pkg/interface/src/components/404.js Normal file
View File

@ -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;

17
pkg/interface/src/components/StatusBar.js
View File

@ -7,14 +7,16 @@ import { Sigil } from '../lib/sigil';
const getLocationName = (basePath) => { const getLocationName = (basePath) => {
if (basePath === '~chat') if (basePath === '~chat')
return 'Chat'; return 'Chat';
if (basePath === '~dojo') else if (basePath === '~dojo')
return 'Dojo'; return 'Dojo';
if (basePath === '~groups') else if (basePath === '~groups')
return 'Groups'; return 'Groups';
if (basePath === '~link') else if (basePath === '~link')
return 'Links'; return 'Links';
if (basePath === '~publish') else if (basePath === '~publish')
return 'Publish'; return 'Publish';
else
return 'Unknown';
}; };
const StatusBar = (props) => { const StatusBar = (props) => {
@ -24,8 +26,9 @@ const StatusBar = (props) => {
? 'Home' ? 'Home'
: getLocationName(basePath); : getLocationName(basePath);
const popout = window.location.href.includes('popout/') const display = (!window.location.href.includes('popout/') &&
? 'dn' : 'db'; (locationName !== 'Unknown'))
? 'db' : 'dn';
const invites = (props.invites && props.invites['/contacts']) const invites = (props.invites && props.invites['/contacts'])
? props.invites['/contacts'] ? props.invites['/contacts']
@ -34,7 +37,7 @@ const StatusBar = (props) => {
return ( return (
<div <div
className={ 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 }} style={{ height: 45 }}
> >