133 lines
4.7 KiB
TypeScript
133 lines
4.7 KiB
TypeScript
import axios, {AxiosResponse} from 'axios';
|
|
import CssBaseline from 'material-ui/CssBaseline';
|
|
import {createMuiTheme, MuiThemeProvider, Theme, WithStyles, withStyles} from 'material-ui/styles';
|
|
import * as React from 'react';
|
|
import {HashRouter, Redirect, Route, Switch} from 'react-router-dom';
|
|
import Header from './component/Header';
|
|
import LoadingSpinner from './component/LoadingSpinner';
|
|
import Navigation from './component/Navigation';
|
|
import ScrollUpButton from './component/ScrollUpButton';
|
|
import SettingsDialog from './component/SettingsDialog';
|
|
import SnackBarHandler from './component/SnackBarHandler';
|
|
import * as config from './config';
|
|
import Applications from './pages/Applications';
|
|
import Clients from './pages/Clients';
|
|
import Login from './pages/Login';
|
|
import Messages from './pages/Messages';
|
|
import Users from './pages/Users';
|
|
import GlobalStore from './stores/GlobalStore';
|
|
|
|
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%',
|
|
},
|
|
});
|
|
|
|
interface IState {
|
|
darkTheme: boolean
|
|
redirect: boolean
|
|
showSettings: boolean
|
|
loggedIn: boolean
|
|
admin: boolean
|
|
name: string
|
|
authenticating: boolean
|
|
version: string
|
|
}
|
|
|
|
class Layout extends React.Component<WithStyles<'content'>, IState> {
|
|
private static defaultVersion = '0.0.0';
|
|
|
|
public state = {
|
|
admin: GlobalStore.isAdmin(),
|
|
authenticating: GlobalStore.authenticating(),
|
|
darkTheme: true,
|
|
loggedIn: GlobalStore.isLoggedIn(),
|
|
name: GlobalStore.getName(),
|
|
redirect: false,
|
|
showSettings: false,
|
|
version: Layout.defaultVersion,
|
|
};
|
|
|
|
public componentDidMount() {
|
|
if (this.state.version === Layout.defaultVersion) {
|
|
axios.get(config.get('url') + 'version').then((resp:AxiosResponse<IVersion>) => {
|
|
this.setState({...this.state, version: resp.data.version});
|
|
});
|
|
}
|
|
}
|
|
|
|
public componentWillMount() {
|
|
GlobalStore.on('change', this.updateUser);
|
|
}
|
|
|
|
public componentWillUnmount() {
|
|
GlobalStore.removeListener('change', this.updateUser);
|
|
}
|
|
|
|
public toggleTheme = () => this.setState({...this.state, darkTheme: !this.state.darkTheme});
|
|
|
|
public updateUser = () => {
|
|
this.setState({
|
|
...this.state,
|
|
admin: GlobalStore.isAdmin(),
|
|
authenticating: GlobalStore.authenticating(),
|
|
loggedIn: GlobalStore.isLoggedIn(),
|
|
name: GlobalStore.getName(),
|
|
});
|
|
};
|
|
|
|
public hideSettings = () => this.setState({...this.state, showSettings: false});
|
|
public showSettings = () => this.setState({...this.state, showSettings: true});
|
|
|
|
public render() {
|
|
const {name, admin, version, loggedIn, showSettings, authenticating} = this.state;
|
|
const {classes} = this.props;
|
|
const theme = this.state.darkTheme ? 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.toggleTheme} showSettings={this.showSettings}/>
|
|
<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.hideSettings}/>}
|
|
<ScrollUpButton/>
|
|
<SnackBarHandler/>
|
|
</div>
|
|
</HashRouter>
|
|
</MuiThemeProvider>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles, {withTheme: true})<{}>(Layout);
|