From 5e790ba65c4e6cd3851be53a2f7d4a5cbe385218 Mon Sep 17 00:00:00 2001
From: John Lyon-Smith <john@lyon-smith.org>
Date: Wed, 28 Feb 2018 16:28:36 -0800
Subject: [PATCH] Fixing logout button

---
 mobile/.expo/packager-info.json      |  6 ++---
 server/package.json                  |  2 +-
 website/src/App.js                   | 34 +++++++++++++++++++++++++---
 website/src/ui/HeaderButton.style.js |  4 +++-
 website/src/ui/style.js              |  1 +
 5 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/mobile/.expo/packager-info.json b/mobile/.expo/packager-info.json
index 24e8ec3..2457a5a 100644
--- a/mobile/.expo/packager-info.json
+++ b/mobile/.expo/packager-info.json
@@ -1,5 +1,5 @@
 {
-  "expoServerPort": null,
-  "packagerPort": null,
-  "packagerPid": null
+  "expoServerPort": 19000,
+  "packagerPort": 19001,
+  "packagerPid": 46572
 }
\ No newline at end of file
diff --git a/server/package.json b/server/package.json
index ea285fe..8cc7e89 100644
--- a/server/package.json
+++ b/server/package.json
@@ -4,7 +4,7 @@
   "description": "Deighton AR Server",
   "main": "src/server.js",
   "scripts": {
-    "start": "babel-node src/dar-server.js",
+    "start": "babel-node src/server.js",
     "start:prod": "NODE_ENV=production npm start",
     "build": "babel src -d dist -s",
     "serve": "NODE_ENV=production node dist/server.js",
diff --git a/website/src/App.js b/website/src/App.js
index 8bd6e5d..22c6158 100644
--- a/website/src/App.js
+++ b/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>
diff --git a/website/src/ui/HeaderButton.style.js b/website/src/ui/HeaderButton.style.js
index 21bd69f..d3025e7 100644
--- a/website/src/ui/HeaderButton.style.js
+++ b/website/src/ui/HeaderButton.style.js
@@ -7,9 +7,11 @@ export default {
     borderWidth: 0,
     padding: '0 0 0 0',
     outline: 'none',
-
     ':hover': {
       background: colorInfo.headerButtonBackgroundHover,
+    },
+    ':active': {
+      background: colorInfo.headerButtonBackgroundActive,
     }
   }
 }
diff --git a/website/src/ui/style.js b/website/src/ui/style.js
index 2a6fd1f..3f086a0 100644
--- a/website/src/ui/style.js
+++ b/website/src/ui/style.js
@@ -6,6 +6,7 @@ export const colorInfo = {
   buttonBackgroundHover: '#3CB0FD',
   headerButtonBackground: '#FAFAFA',
   headerButtonBackgroundHover: '#DADADA',
+  headerButtonBackgroundActive: '#AAAAAA',
   disabledButtonBackground: '#E0E0E0',
   modalBackground: '#FFFFFF',
   uncheckedCheckbox: '#A0A0A0',