Get app working against deployed service

This commit is contained in:
John Lyon-Smith
2018-04-08 21:25:17 -07:00
parent d674f5e7eb
commit ee836def93
9 changed files with 141 additions and 86 deletions

View File

@@ -20,9 +20,10 @@
},
"rules": {
"key-spacing": 0,
"jsx-quotes": [2, "prefer-single"],
"object-curly-spacing": [2, "always"],
"space-before-function-paren": ["error", "never"],
"comma-dangle": ["error", "only-multiline"]
"comma-dangle": ["error", "only-multiline"],
"jsx-quotes": "off",
"quotes": "off"
}
}

View File

@@ -1,18 +1,26 @@
import React, { Component, Fragment } from 'react'
import { Login, Logout, ResetPassword, ForgotPassword, ConfirmEmail, ProtectedRoute, DefaultRoute } from './Auth'
import { Home } from './Home'
import { Profile } from './Profile'
import { Users } from './Users'
import { Teams } from './Teams'
import { System } from './System'
import { HeaderButton, HeaderText, Column, Row, Text, Box } from 'ui'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import logoImage from 'images/logo.png'
import { versionInfo } from './version'
import { sizeInfo, colorInfo } from 'ui/style'
import { api } from 'src/API'
import PropTypes from 'prop-types'
import autobind from 'autobind-decorator'
import React, { Component, Fragment } from "react"
import {
Login,
Logout,
ResetPassword,
ForgotPassword,
ConfirmEmail,
ProtectedRoute,
DefaultRoute,
} from "./Auth"
import { Home } from "./Home"
import { Profile } from "./Profile"
import { Users } from "./Users"
import { Teams } from "./Teams"
import { System } from "./System"
import { HeaderButton, HeaderText, Column, Row, Text, Box } from "ui"
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
import logoImage from "images/logo.png"
import { versionInfo } from "./version"
import { sizeInfo, colorInfo } from "ui/style"
import { api } from "src/API"
import PropTypes from "prop-types"
import autobind from "autobind-decorator"
export class App extends Component {
static propTypes = {
@@ -22,18 +30,18 @@ export class App extends Component {
constructor(props) {
super(props)
this.state = {
loggedInUser: api.loggedInUser
loggedInUser: api.loggedInUser,
}
}
componentDidMount() {
api.addListener('login', this.handleUpdate)
api.addListener('logout', this.handleUpdate)
api.addListener("login", this.handleUpdate)
api.addListener("logout", this.handleUpdate)
}
componentWillUnmount() {
api.removeListener('login', this.handleUpdate)
api.removeListener('logout', this.handleUpdate)
api.removeListener("login", this.handleUpdate)
api.removeListener("logout", this.handleUpdate)
}
@autobind
@@ -43,15 +51,15 @@ export class App extends Component {
handleLogout() {
// We have to use window here because App does not have history in it's props
window.location.replace('/logout')
window.location.replace("/logout")
}
handleHome() {
window.location.replace('/')
window.location.replace("/")
}
handleProfile() {
window.location.replace('/profile')
window.location.replace("/profile")
}
@autobind
@@ -73,20 +81,25 @@ export class App extends Component {
)
headerButtonsRight = (
<Fragment>
<HeaderButton icon='profile' onClick={this.handleProfile} />
<HeaderButton icon='logout' onClick={this.handleLogout} />
<HeaderButton icon="profile" onClick={this.handleProfile} />
<HeaderButton icon="logout" onClick={this.handleLogout} />
</Fragment>
)
}
return (
<Router basename='/'>
<Column minHeight='100vh'>
<Column.Item height={sizeInfo.headerHeight - sizeInfo.headerBorderWidth}>
<Box background={colorInfo.headerButtonBackground}
borderBottom={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}
style={{ boxSizing: 'content' }}>
<Row minWidth='100vw'>
<Router basename="/">
<Column minHeight="100vh">
<Column.Item
height={sizeInfo.headerHeight - sizeInfo.headerBorderWidth}>
<Box
background={colorInfo.headerButtonBackground}
borderBottom={{
width: sizeInfo.headerBorderWidth,
color: colorInfo.headerBorder,
}}
style={{ boxSizing: "content" }}>
<Row minWidth="100vw">
<Row.Item>{headerButtonsLeft}</Row.Item>
<Row.Item grow />
<Row.Item>{headerButtonsRight}</Row.Item>
@@ -94,21 +107,62 @@ export class App extends Component {
</Box>
</Column.Item>
<Switch>
<Route exact path='/login' component={Login} />
<Route exact path='/logout' component={Logout} />
<Route exact path='/confirm-email' component={ConfirmEmail} />
<Route exact path='/reset-password' component={ResetPassword} />
<Route exact path='/forgot-password' component={ForgotPassword} />
<ProtectedRoute exact path='/profile' render={props => (<Profile {...props} changeTitle={this.handleChangeTitle} />)} />
<ProtectedRoute exact admin path='/users' render={props => (<Users {...props} changeTitle={this.handleChangeTitle} />)} />
<ProtectedRoute exact admin path='/teams' render={props => (<Teams {...props} changeTitle={this.handleChangeTitle} />)} />
<ProtectedRoute exact admin path='/system' render={props => (<System {...props} changeTitle={this.handleChangeTitle} />)} />
<ProtectedRoute exact admin path='/home' render={props => (<Home {...props} changeTitle={this.handleChangeTitle} />)} />
<Route exact path="/login" component={Login} />
<Route exact path="/logout" component={Logout} />
<Route exact path="/confirm-email" component={ConfirmEmail} />
<Route exact path="/reset-password" component={ResetPassword} />
<Route exact path="/forgot-password" component={ForgotPassword} />
<ProtectedRoute
exact
path="/profile"
render={(props) => (
<Profile {...props} changeTitle={this.handleChangeTitle} />
)}
/>
<ProtectedRoute
exact
admin
path="/users"
render={(props) => (
<Users {...props} changeTitle={this.handleChangeTitle} />
)}
/>
<ProtectedRoute
exact
admin
path="/teams"
render={(props) => (
<Teams {...props} changeTitle={this.handleChangeTitle} />
)}
/>
<ProtectedRoute
exact
admin
path="/system"
render={(props) => (
<System {...props} changeTitle={this.handleChangeTitle} />
)}
/>
<ProtectedRoute
exact
admin
path="/home"
render={(props) => (
<Home {...props} changeTitle={this.handleChangeTitle} />
)}
/>
<DefaultRoute />
</Switch>
<Column.Item>
<Box background={colorInfo.headerButtonBackground} borderTop={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}>
<Text color='dimmed' margin={sizeInfo.footerTextMargin}>{'v' + versionInfo.version} {versionInfo.copyright}</Text>
<Box
background={colorInfo.headerButtonBackground}
borderTop={{
width: sizeInfo.headerBorderWidth,
color: colorInfo.headerBorder,
}}>
<Text color="dimmed" margin={sizeInfo.footerTextMargin}>
{"v" + versionInfo.fullVersion} {versionInfo.copyright}
</Text>
</Box>
</Column.Item>
</Column>

View File

@@ -1,6 +1,6 @@
export const versionInfo = {
version: '1.0.0',
fullVersion: '1.0.0-20180407.3',
fullVersion: '1.0.0-20180408.0',
title: 'Deighton AR System',
copyright: '© 2018, Kingston Software Solutions.',
supportEmail: 'support@kss.us.com',