get account menu and invite lightbox working

frontend/src/Metamaps/GlobalUI/Account.js

@@ -7,27 +7,19 @@ const Account = {
   changing: false,
   init: function() {
     var self = Account
-
     $('.sidebarAccountIcon').click(self.toggleBox)
-    $('.sidebarAccountBox').click(function(event) {
-      event.stopPropagation()
-    })
     $('body').click(self.close)
   },
   toggleBox: function(event) {
     var self = Account
-
     if (self.isOpen) self.close()
     else self.open()
-
     event.stopPropagation()
   },
   open: function() {
     var self = Account
-
     Filter.close()
     $('.sidebarAccountIcon .tooltipsUnder').addClass('hide')
-
     if (!self.isOpen && !self.changing) {
       self.changing = true
       $('.sidebarAccountBox').fadeIn(200, function() {
@@ -39,7 +31,6 @@ const Account = {
   },
   close: function() {
     var self = Account
-
     $('.sidebarAccountIcon .tooltipsUnder').removeClass('hide')
     if (!self.changing) {
       self.changing = true

frontend/src/Metamaps/GlobalUI/ReactApp.js

@@ -76,7 +76,8 @@ const ReactApp = {
       mobile: self.mobile,
       mobileTitle: self.mobileTitle,
       mobileTitleWidth: self.mobileTitleWidth,
-      mobileTitleClick: (e) => Active.Map && InfoBox.toggleBox(e)
+      mobileTitleClick: (e) => Active.Map && InfoBox.toggleBox(e),
+      openInviteLightbox: () => self.openLightbox('invite')
     },
     self.getMapProps(),
     self.getTopicProps(),

frontend/src/components/App/AccountMenu.js

@@ -2,17 +2,19 @@ import React, { Component, PropTypes } from 'react'
 
 class AccountMenu extends Component {
   static propTypes = {
-    currentUser: PropTypes.object
+    currentUser: PropTypes.object,
+    onInviteClick: PropTypes.func
   }
 
   render () {
+    const { currentUser, onInviteClick } = this.props
     return <div>
-      <img className="sidebarAccountImage" src="https://metamaps-live.s3.amazonaws.com/users/images/555/629/996/sixtyfour/11835c3.png?1417298429" alt="11835c3" width="48" height="48" />
-      <h3 className="accountHeader">Connor</h3>
+      <img className="sidebarAccountImage" src={currentUser.get('image')} width="48" height="48" />
+      <h3 className="accountHeader">{currentUser.get('name')}</h3>
       <ul>
         <li className="accountListItem accountSettings">
           <div className="accountIcon"></div>
-          <a href="https://metamaps.cc/users/555629996/edit">Settings</a>
+          <a href={`/users/${currentUser.id}/edit`}>Settings</a>
         </li>
         <li className="accountListItem accountAdmin">
           <div className="accountIcon"></div>
@@ -22,7 +24,7 @@ class AccountMenu extends Component {
           <div className="accountIcon"></div>
           <a href="/oauth/authorized_applications">Apps</a>
         </li>
-        <li className="accountListItem accountInvite openLightbox" data-open="invite">
+        <li className="accountListItem accountInvite" onClick={onInviteClick}>
           <div className="accountIcon"></div>
           <span>Share Invite</span>
         </li>

frontend/src/components/App/UpperRightUI.js

@@ -8,7 +8,8 @@ class UpperRightUI extends Component {
   static propTypes = {
     currentUser: PropTypes.object,
     signInPage: PropTypes.bool,
-    unreadNotificationsCount: PropTypes.number
+    unreadNotificationsCount: PropTypes.number,
+    openInviteLightbox: PropTypes.func
   }
 
   static contextTypes = {
@@ -16,7 +17,7 @@ class UpperRightUI extends Component {
   }
 
   render () {
-    const { currentUser, signInPage, unreadNotificationsCount } = this.props
+    const { currentUser, signInPage, unreadNotificationsCount, openInviteLightbox } = this.props
     return <div className="upperRightUI">
       {currentUser && <a href="/maps/new" target="_blank" className="addMap upperRightEl upperRightIcon">
         <div className="tooltipsUnder">
@@ -33,7 +34,9 @@ class UpperRightUI extends Component {
           {!currentUser && <div className="accountInnerArrow"></div>}
         </div>
         <div className="sidebarAccountBox upperRightBox">
-          {currentUser ? <AccountMenu /> : <LoginForm />}
+          {currentUser
+            ? <AccountMenu onInviteClick={openInviteLightbox} currentUser={currentUser} />
+            : <LoginForm />}
         </div>
       </div>}
       <div className="clearfloat"></div>

frontend/src/components/App/index.js

@@ -14,7 +14,8 @@ class App extends Component {
     mobile: PropTypes.bool,
     mobileTitle: PropTypes.string,
     mobileTitleWidth: PropTypes.number,
-    mobileTitleClick: PropTypes.func
+    mobileTitleClick: PropTypes.func,
+    openInviteLightbox: PropTypes.func
   }
 
   static childContextTypes = {
@@ -28,7 +29,7 @@ class App extends Component {
   }
 
   render () {
-    const { children, toast, currentUser, unreadNotificationsCount,
+    const { children, toast, currentUser, unreadNotificationsCount, openInviteLightbox,
             mobile, mobileTitle, mobileTitleWidth, mobileTitleClick } = this.props
     return <div className="wrapper" id="wrapper">
       {mobile && <MobileHeader currentUser={currentUser}
@@ -37,7 +38,9 @@ class App extends Component {
                                mobileTitleWidth={mobileTitleWidth}
                                onTitleClick={mobileTitleClick} />}
       <UpperLeftUI currentUser={currentUser} />
-      {!mobile && <UpperRightUI currentUser={currentUser} unreadNotificationsCount={unreadNotificationsCount} />}
+      {!mobile && <UpperRightUI currentUser={currentUser}
+                                unreadNotificationsCount={unreadNotificationsCount}
+                                openInviteLightbox={openInviteLightbox} />}
       <Toast message={toast} />
       {!mobile && currentUser && <a className='feedback-icon' target='_blank' href='https://hylo.com/c/metamaps'></a>}
       {children}