Integrated master/detail, refactor Icon, add base router

website/src/Auth/ProtectedRoute.js

@@ -6,7 +6,10 @@ import autobind from 'autobind-decorator'
 
 export class ProtectedRoute extends React.Component {
   static propTypes = {
-    location: PropTypes.shape({ pathname: PropTypes.string, search: PropTypes.string }),
+    location: PropTypes.shape({
+      pathname: PropTypes.string,
+      search: PropTypes.string,
+    }),
     admin: PropTypes.bool,
   }
 
@@ -16,26 +19,32 @@ export class ProtectedRoute extends React.Component {
   }
 
   componentDidMount() {
-    api.addListener('login', this.updateComponent)
+    api.addListener("login", this.updateComponent)
+    api.addListener("logout", this.updateComponent)
   }
 
   componentWillUnmount() {
-    api.removeListener('login', this.updateComponent)
+    api.removeListener("login", this.updateComponent)
+    api.removeListener("logout", this.updateComponent)
   }
 
   render(props) {
     const user = api.loggedInUser
 
-    if (user) {
-      if (user.pending) {
-        // The API might be in the middle of fetching the user information
-        // Return something and wait for login evint to fire to re-render
-        return <div />
-      } else if (!this.props.admin || (this.props.admin && user.administrator)) {
+    if (user.pending) {
+      return null
+    } else {
+      if (!user._id || (this.props.admin && !user.administrator)) {
+        return (
+          <Redirect
+            to={`/login?redirect=${this.props.location.pathname}${
+              this.props.location.search
+            }`}
+          />
+        )
+      } else {
         return <Route {...this.props} />
       }
     }
-
-    return <Redirect to={`/login?redirect=${this.props.location.pathname}${this.props.location.search}`} />
   }
 }