From d868a196b6c7484c72029d256ac6366b8802999c Mon Sep 17 00:00:00 2001 From: Jannis Mattheis Date: Wed, 18 Apr 2018 20:25:59 +0200 Subject: [PATCH] Typescriptify index, config and layout.jsx --- ui/src/{Layout.js => Layout.tsx} | 92 +++++++++++++++++--------------- ui/src/config.js | 9 ---- ui/src/config.ts | 13 +++++ ui/src/{index.js => index.tsx} | 20 ++++--- 4 files changed, 75 insertions(+), 59 deletions(-) rename ui/src/{Layout.js => Layout.tsx} (72%) delete mode 100644 ui/src/config.js create mode 100644 ui/src/config.ts rename ui/src/{index.js => index.tsx} (84%) diff --git a/ui/src/Layout.js b/ui/src/Layout.tsx similarity index 72% rename from ui/src/Layout.js rename to ui/src/Layout.tsx index 80487f2..2309e18 100644 --- a/ui/src/Layout.js +++ b/ui/src/Layout.tsx @@ -1,22 +1,21 @@ -import React, {Component} from 'react'; -import Reboot from 'material-ui/Reboot'; -import ScrollUpButton from './component/ScrollUpButton'; -import Header from './component/Header'; -import Navigation from './component/Navigation'; -import Messages from './pages/Messages'; -import Login from './pages/Login'; -import axios from 'axios'; -import {createMuiTheme, MuiThemeProvider, withStyles} from 'material-ui/styles'; -import * as config from './config'; -import GlobalStore from './stores/GlobalStore'; +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 Applications from './pages/Applications'; -import Clients from './pages/Clients'; -import Users from './pages/Users'; -import PropTypes from 'prop-types'; +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 LoadingSpinner from './component/LoadingSpinner'; +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: { @@ -29,73 +28,81 @@ const darkTheme = createMuiTheme({ }, }); -const styles = (theme) => ({ +const styles = (theme: Theme) => ({ content: { + margin: '0 auto', marginTop: 64, padding: theme.spacing.unit * 4, - margin: '0 auto', width: '100%', }, }); -class Layout extends Component { - static propTypes = { - classes: PropTypes.object.isRequired, - }; +interface IState { + darkTheme: boolean + redirect: boolean + showSettings: boolean + loggedIn: boolean + admin: boolean + name: string + authenticating: boolean + version: string +} - static defaultVersion = '0.0.0'; +class Layout extends React.Component, IState> { + private static defaultVersion = '0.0.0'; - state = { + public state = { + admin: GlobalStore.isAdmin(), + authenticating: GlobalStore.authenticating(), darkTheme: true, + loggedIn: GlobalStore.isLoggedIn(), + name: GlobalStore.getName(), redirect: false, showSettings: false, - loggedIn: GlobalStore.isLoggedIn(), - admin: GlobalStore.isAdmin(), - name: GlobalStore.getName(), - authenticating: GlobalStore.authenticating(), version: Layout.defaultVersion, }; - componentDidMount() { + public componentDidMount() { if (this.state.version === Layout.defaultVersion) { - axios.get(config.get('url') + 'version').then((resp) => { + axios.get(config.get('url') + 'version').then((resp:AxiosResponse) => { this.setState({...this.state, version: resp.data.version}); }); } } - componentWillMount() { + public componentWillMount() { GlobalStore.on('change', this.updateUser); } - componentWillUnmount() { + public componentWillUnmount() { GlobalStore.removeListener('change', this.updateUser); } - toggleTheme = () => this.setState({...this.state, darkTheme: !this.state.darkTheme}); + public toggleTheme = () => this.setState({...this.state, darkTheme: !this.state.darkTheme}); - updateUser = () => { + public updateUser = () => { this.setState({ ...this.state, - loggedIn: GlobalStore.isLoggedIn(), admin: GlobalStore.isAdmin(), - name: GlobalStore.getName(), authenticating: GlobalStore.authenticating(), + loggedIn: GlobalStore.isLoggedIn(), + name: GlobalStore.getName(), }); }; - hideSettings = () => this.setState({...this.state, showSettings: false}); - showSettings = () => this.setState({...this.state, showSettings: true}); + public hideSettings = () => this.setState({...this.state, showSettings: false}); + public showSettings = () => this.setState({...this.state, showSettings: true}); - render() { + 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 ? () : ()); return (
- +
@@ -103,8 +110,7 @@ class Layout extends Component {
{authenticating ? : null} - - (loggedIn ? () : ())}/> + {loggedIn ? null : } @@ -123,4 +129,4 @@ class Layout extends Component { } } -export default withStyles(styles, {withTheme: true})(Layout); +export default withStyles(styles, {withTheme: true})<{}>(Layout); diff --git a/ui/src/config.js b/ui/src/config.js deleted file mode 100644 index 2393594..0000000 --- a/ui/src/config.js +++ /dev/null @@ -1,9 +0,0 @@ -let config; - -export function set(c) { - config = c; -} - -export function get(val): string { - return config[val]; -} \ No newline at end of file diff --git a/ui/src/config.ts b/ui/src/config.ts new file mode 100644 index 0000000..03791ec --- /dev/null +++ b/ui/src/config.ts @@ -0,0 +1,13 @@ +export interface IConfig { + url: string +} + +let config: IConfig; + +export function set(c: IConfig) { + config = c; +} + +export function get(val: "url"): string { + return config[val]; +} \ No newline at end of file diff --git a/ui/src/index.js b/ui/src/index.tsx similarity index 84% rename from ui/src/index.js rename to ui/src/index.tsx index 919c991..4c5a98e 100644 --- a/ui/src/index.js +++ b/ui/src/index.tsx @@ -1,12 +1,12 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Layout from './Layout'; -import registerServiceWorker from './registerServiceWorker'; -import * as config from './config' -import * as Notifications from './stores/Notifications'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; import 'typeface-roboto'; import 'typeface-roboto-mono'; import * as UserAction from './actions/UserAction'; +import * as config from './config' +import Layout from './Layout'; +import registerServiceWorker from './registerServiceWorker'; +import * as Notifications from './stores/Notifications'; const defaultDevConfig = { url: 'http://localhost:80/', @@ -21,9 +21,15 @@ const defaultProdConfig = { url: urlWithSlash, }; +declare global { + // tslint:disable-next-line + interface Window { + config: config.IConfig; + } +} + (function clientJS() { Notifications.requestPermission(); - if (process.env.NODE_ENV === 'production') { config.set(window.config || defaultProdConfig); } else {