Fixing logout button

website/src/App.js

@@ -9,10 +9,38 @@ import logoImage from 'images/logo.png'
 import { versionInfo } from './version'
 import { sizeInfo } from 'ui/style'
 import { api } from 'src/API'
+import { reactAutoBind } from 'auto-bind2'
 
 export class App extends React.Component {
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+    this.state = {
+      loggedInUser: api.loggedInUser
+    }
+  }
+
+  handleUpdate() {
+    this.setState({ 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)
+  }
+
+  handleLogout() {
+    api.logout()
+  }
+
   render() {
     const height = sizeInfo.headerHeight - sizeInfo.headerBorderWidth
+    const { loggedInUser } = this.state
 
     return (
       <Column minHeight='100vh'>
@@ -24,10 +52,10 @@ export class App extends React.Component {
                   height={height}
                   margin={sizeInfo.headerMargin} />
               </Row.Item>
-              <Row.Item grow>&nbsp;</Row.Item>
+              <Row.Item grow />
               <Row.Item>
-                { api.loggedInUser && <HeaderButton icon='profile' size={height} /> }
-                { api.loggedInUser && <HeaderButton icon='logout' size={height} /> }
+                { loggedInUser && <HeaderButton icon='profile' size={height} /> }
+                { loggedInUser && <HeaderButton icon='logout' size={height} onClick={this.handleLogout} /> }
               </Row.Item>
             </Row>
           </Box>