diff --git a/ui/src/Layout.tsx b/ui/src/Layout.tsx index 3df1e9e..9088d38 100644 --- a/ui/src/Layout.tsx +++ b/ui/src/Layout.tsx @@ -15,7 +15,9 @@ 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'; +import {currentUser} from './stores/CurrentUser'; +import {observer} from 'mobx-react'; +import {observable} from 'mobx'; const lightTheme = createMuiTheme({ palette: { @@ -37,66 +39,35 @@ const styles = (theme: Theme) => ({ }, }); -interface IState { - darkTheme: boolean; - redirect: boolean; - showSettings: boolean; - loggedIn: boolean; - admin: boolean; - name: string; - authenticating: boolean; - version: string; -} - -class Layout extends React.Component, IState> { +@observer +class Layout extends React.Component> { 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, - }; + @observable + private darkThemeVisible = true; + @observable + private showSettings = false; + @observable + private version = Layout.defaultVersion; public componentDidMount() { - if (this.state.version === Layout.defaultVersion) { + if (this.version === Layout.defaultVersion) { axios.get(config.get('url') + 'version').then((resp: AxiosResponse) => { 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 { + loggedIn, + authenticating, + user: {name, admin}, + } = currentUser; + + const {version, showSettings, darkThemeVisible} = this; const {classes} = this.props; - const theme = this.state.darkTheme ? darkTheme : lightTheme; + const theme = darkThemeVisible ? darkTheme : lightTheme; const loginRoute = () => (loggedIn ? : ); return ( @@ -108,8 +79,8 @@ class Layout extends React.Component, IState> { name={name} version={version} loggedIn={loggedIn} - toggleTheme={this.toggleTheme} - showSettings={this.showSettings} + toggleTheme={() => (this.darkThemeVisible = !this.darkThemeVisible)} + showSettings={() => (this.showSettings = true)} /> @@ -129,7 +100,9 @@ class Layout extends React.Component, IState> { - {showSettings && } + {showSettings && ( + (this.showSettings = false)} /> + )}