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

interface: broke out routes from main App.js

Browse Source
This commit is contained in:
Logan Allen 2020-08-12 11:23:25 -07:00
parent 97bbac159c
commit a6f88fad80
5 changed files with 129 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,13 +13,7 @@ import './css/fonts.css';
import light from './themes/light';
import dark from './themes/old-dark';
import LaunchApp from './apps/launch/app';
import ChatApp from './apps/chat/app';
import DojoApp from './apps/dojo/app';
import GroupsApp from './apps/groups/app';
import LinksApp from './apps/links/app';
import PublishApp from './apps/publish/app';
import { Content } from './components/Content';
import StatusBar from './components/StatusBar';
import Omnibox from './components/Omnibox';
import ErrorComponent from './components/Error';
@ -30,17 +24,6 @@ import GlobalApi from './api/global';
import { uxToHex } from './lib/util';
import { Sigil } from './lib/sigil';
// const Style = createGlobalStyle`
// ${cssReset}
// html {
// background-color: ${p => p.theme.colors.white};
// }
//
// strong {
// font-weight: 600;
// }
// `;
const Root = styled.div`
font-family: ${p => p.theme.fonts.sans};
height: 100%;
@ -49,10 +32,6 @@ const Root = styled.div`
margin: 0;
`;
const Content = styled.div`
height: calc(100% - 45px);
`;
const StatusBarWithRouter = withRouter(StatusBar);
class App extends React.Component {
@ -118,10 +97,9 @@ class App extends React.Component {
}
render() {
const channel = window.channel;
const associations = this.state.associations ? this.state.associations : { contacts: {} };
const { state } = this;
const associations = state.associations ?
state.associations : { contacts: {} };
const theme = state.dark ? dark : light;
return (
@ -143,86 +121,11 @@ class App extends React.Component {
dark={state.dark}
show={state.omniboxShown}
/>
<Content>
<Switch>
<Route
exact
path='/'
render={p => (
<LaunchApp
ship={this.ship}
api={this.api}
{...state}
{...p}
/>
)}
/>
<Route
path='/~chat'
render={p => (
<ChatApp
ship={this.ship}
api={this.api}
subscription={this.subscription}
{...state}
{...p}
/>
)}
/>
<Route
path='/~dojo'
render={p => (
<DojoApp
ship={this.ship}
channel={channel}
subscription={this.subscription}
{...p}
/>
)}
/>
<Route
path='/~groups'
render={p => (
<GroupsApp
ship={this.ship}
api={this.api}
subscription={this.subscription}
{...state}
{...p}
/>
)}
/>
<Route
path='/~link'
render={p => (
<LinksApp
ship={this.ship}
api={this.api}
subscription={this.subscription}
{...state}
{...p}
/>
)}
/>
<Route
path='/~publish'
render={p => (
<PublishApp
ship={this.ship}
api={this.api}
subscription={this.subscription}
{...state}
{...p}
/>
)}
/>
<Route
render={props => (
<ErrorComponent {...props} code={404} description="Not Found" />
)}
/>
</Switch>
</Content>
<Content
ship={this.ship}
api={this.api}
subscription={this.subscription}
{...state} />
</Router>
</Root>
</ThemeProvider>

2
pkg/interface/src/apps/dojo/app.js
View File

@ -30,7 +30,7 @@ export default class DojoApp extends Component {
componentDidMount() {
document.title = 'OS1 - Dojo';
const channel = new this.props.channel();
const channel = new window.channel();
this.api = new Api(this.props.ship, channel);
this.store.api = this.api;

2
pkg/interface/src/apps/launch/app.js
View File

@ -14,8 +14,6 @@ export default class LaunchApp extends React.Component {
}
componentWillUnmount() {}
render() {
const { props } = this;

76
pkg/interface/src/components/Content.js Normal file
View File

@ -0,0 +1,76 @@
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import styled from 'styled-components';
import { TwoPaneApp } from './TwoPaneApp';
import LaunchApp from '../apps/launch/app';
import DojoApp from '../apps/dojo/app';
import GroupsApp from '../apps/groups/app';
export const Container = styled.div`
height: calc(100% - 45px);
`;
export const Content = (props) => {
return (
<Container>
<Switch>
<Route
exact
path='/'
render={p => (
<LaunchApp
history={p.history}
location={p.location}
match={p.match}
{...props} />
)}
/>
<Route
path='/~dojo'
render={p => (
<DojoApp
history={p.history}
location={p.location}
match={p.match}
{...props} />
)}
/>
<Route
path='/~groups'
render={p => (
<GroupsApp
history={p.history}
location={p.location}
match={p.match}
{...props} />
)}
/>
<Route
path={[
'/~chat',
'/~publish',
'/~link'
]}
render={ p => (
<TwoPaneApp
history={p.history}
location={p.location}
match={p.match}
{...props} />
)}
/>
<Route
render={p => (
<ErrorComponent
code={404}
description="Not Found"
{...p} />
)}
/>
</Switch>
</Container>
);
}

44
pkg/interface/src/components/TwoPaneApp.js Normal file
View File

@ -0,0 +1,44 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import LinksApp from '../apps/links/app';
import PublishApp from '../apps/publish/app';
import ChatApp from '../apps/chat/app';
export const TwoPaneApp = (props) => {
return (
<Switch>
<Route
path='/~chat'
render={p => (
<ChatApp
location={p.location}
match={p.match}
history={p.history}
{...props} />
)}
/>
<Route
path='/~link'
render={p => (
<LinksApp
location={p.location}
match={p.match}
history={p.history}
{...props} />
)}
/>
<Route
path='/~publish'
render={p => (
<PublishApp
location={p.location}
match={p.match}
history={p.history}
{...props} />
)}
/>
</Switch>
);
}