Integrated master/detail, refactor Icon, add base router

website/src/App.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from "react"
+import React, { Component } from "react"
 import {
   Login,
   Logout,
@@ -13,160 +13,67 @@ 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 { Header, Column, Footer } from "ui"
+import { BrowserRouter, Route, Switch } from "react-router-dom"
+import { sizeInfo } from "ui/style"
 import PropTypes from "prop-types"
-import autobind from "autobind-decorator"
+import { versionInfo } from "./version"
 
 export class App extends Component {
   static propTypes = {
     history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   }
 
-  constructor(props) {
-    super(props)
-    this.state = {
-      loggedInUser: api.loggedInUser,
-    }
-  }
-
-  componentDidMount() {
-    api.addListener("login", this.handleUpdate)
-    api.addListener("logout", this.handleUpdate)
-  }
-
-  componentWillUnmount() {
-    api.removeListener("login", this.handleUpdate)
-    api.removeListener("logout", this.handleUpdate)
-  }
-
-  @autobind
-  handleUpdate() {
-    this.setState({ loggedInUser: api.loggedInUser })
-  }
-
-  handleLogout() {
-    // We have to use window here because App does not have history in it's props
-    window.location.replace("/logout")
-  }
-
-  handleHome() {
-    window.location.replace("/")
-  }
-
-  handleProfile() {
-    window.location.replace("/profile")
-  }
-
-  @autobind
-  handleChangeTitle(title) {
-    this.setState({ title })
-  }
-
   render() {
-    const { loggedInUser } = this.state
-    let headerButtonsRight = null
-    let headerButtonsLeft = null
-
-    if (loggedInUser) {
-      headerButtonsLeft = (
-        <Fragment>
-          <HeaderButton image={logoImage} onClick={this.handleHome} />
-          <HeaderText text={this.state.title} />
-        </Fragment>
-      )
-      headerButtonsRight = (
-        <Fragment>
-          <HeaderButton icon="profile" onClick={this.handleProfile} />
-          <HeaderButton icon="logout" onClick={this.handleLogout} />
-        </Fragment>
-      )
-    }
-
     return (
-      <Router basename="/">
+      <BrowserRouter>
         <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>
-              </Row>
-            </Box>
-          </Column.Item>
+          <Route
+            path="/app"
+            render={(props) => (
+              <Column.Item height={sizeInfo.headerHeight}>
+                <Header
+                  {...props}
+                  left={[
+                    { image: require("images/badge.png"), path: "/app/home" },
+                    { text: "Teams", path: "/app/teams" },
+                    { text: "Users", path: "/app/users" },
+                  ]}
+                  right={[
+                    { icon: "profile", path: "/app/profile" },
+                    { icon: "logout", path: "/logout" },
+                  ]}
+                />
+              </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} />
-              )}
-            />
-            <DefaultRoute />
+            <ProtectedRoute exact path="/app/profile" component={Profile} />
+            <ProtectedRoute exact admin path="/app/home" component={Home} />
+            <ProtectedRoute exact admin path="/app/teams" component={Teams} />
+            <ProtectedRoute exact admin path="/system" component={System} />
+            <ProtectedRoute exact admin path="/app/users" component={Users} />
+            <DefaultRoute redirect="/app/home" />
           </Switch>
-          <Column.Item>
-            <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>
+          <Route
+            path="/app"
+            render={() => (
+              <Column.Item>
+                <Footer
+                  text={
+                    "v" + versionInfo.fullVersion + " " + versionInfo.copyright
+                  }
+                />
+              </Column.Item>
+            )}
+          />
         </Column>
-      </Router>
+      </BrowserRouter>
     )
   }
 }