119 lines
4.4 KiB
TypeScript
119 lines
4.4 KiB
TypeScript
import {createMuiTheme, MuiThemeProvider, Theme, WithStyles, withStyles} from '@material-ui/core';
|
|
import CssBaseline from '@material-ui/core/CssBaseline';
|
|
import axios, {AxiosResponse} from 'axios';
|
|
import * as React from 'react';
|
|
import {HashRouter, Redirect, Route, Switch} from 'react-router-dom';
|
|
import Header from './Header';
|
|
import LoadingSpinner from '../common/LoadingSpinner';
|
|
import Navigation from './Navigation';
|
|
import ScrollUpButton from '../common/ScrollUpButton';
|
|
import SettingsDialog from '../common/SettingsDialog';
|
|
import SnackBarHandler from '../snack/SnackBarHandler';
|
|
import * as config from '../config';
|
|
import Applications from '../application/Applications';
|
|
import Clients from '../client/Clients';
|
|
import Login from '../user/Login';
|
|
import Messages from '../message/Messages';
|
|
import Users from '../user/Users';
|
|
import {observer} from 'mobx-react';
|
|
import {observable} from 'mobx';
|
|
import {inject, Stores} from '../inject';
|
|
|
|
const lightTheme = createMuiTheme({
|
|
palette: {
|
|
type: 'light',
|
|
},
|
|
});
|
|
const darkTheme = createMuiTheme({
|
|
palette: {
|
|
type: 'dark',
|
|
},
|
|
});
|
|
|
|
const styles = (theme: Theme) => ({
|
|
content: {
|
|
margin: '0 auto',
|
|
marginTop: 64,
|
|
padding: theme.spacing.unit * 4,
|
|
width: '100%',
|
|
},
|
|
});
|
|
|
|
@observer
|
|
class Layout extends React.Component<WithStyles<'content'> & Stores<'currentUser'>> {
|
|
private static defaultVersion = '0.0.0';
|
|
|
|
@observable
|
|
private darkThemeVisible = true;
|
|
@observable
|
|
private showSettings = false;
|
|
@observable
|
|
private version = Layout.defaultVersion;
|
|
|
|
public componentDidMount() {
|
|
if (this.version === Layout.defaultVersion) {
|
|
axios.get(config.get('url') + 'version').then((resp: AxiosResponse<IVersion>) => {
|
|
this.version = resp.data.version;
|
|
});
|
|
}
|
|
}
|
|
|
|
public render() {
|
|
const {version, showSettings, darkThemeVisible} = this;
|
|
const {
|
|
classes,
|
|
currentUser: {
|
|
loggedIn,
|
|
authenticating,
|
|
user: {name, admin},
|
|
logout,
|
|
},
|
|
} = this.props;
|
|
const theme = darkThemeVisible ? darkTheme : lightTheme;
|
|
const loginRoute = () => (loggedIn ? <Redirect to="/" /> : <Login />);
|
|
return (
|
|
<MuiThemeProvider theme={theme}>
|
|
<HashRouter>
|
|
<div style={{display: 'flex'}}>
|
|
<CssBaseline />
|
|
<Header
|
|
admin={admin}
|
|
name={name}
|
|
version={version}
|
|
loggedIn={loggedIn}
|
|
toggleTheme={() => (this.darkThemeVisible = !this.darkThemeVisible)}
|
|
showSettings={() => (this.showSettings = true)}
|
|
logout={logout}
|
|
/>
|
|
<Navigation loggedIn={loggedIn} />
|
|
|
|
<main className={classes.content}>
|
|
<Switch>
|
|
{authenticating ? (
|
|
<Route path="/">
|
|
<LoadingSpinner />
|
|
</Route>
|
|
) : null}
|
|
<Route exact path="/login" render={loginRoute} />
|
|
{loggedIn ? null : <Redirect to="/login" />}
|
|
<Route exact path="/" component={Messages} />
|
|
<Route exact path="/messages/:id" component={Messages} />
|
|
<Route exact path="/applications" component={Applications} />
|
|
<Route exact path="/clients" component={Clients} />
|
|
<Route exact path="/users" component={Users} />
|
|
</Switch>
|
|
</main>
|
|
{showSettings && (
|
|
<SettingsDialog fClose={() => (this.showSettings = false)} />
|
|
)}
|
|
<ScrollUpButton />
|
|
<SnackBarHandler />
|
|
</div>
|
|
</HashRouter>
|
|
</MuiThemeProvider>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles, {withTheme: true})<{}>(inject('currentUser')(Layout));
|