hangover sync

Server/services/discord.js

@@ -209,13 +209,12 @@ class DiscordService extends Service {
 
     if (message.mentions.users.has(this.client.user.id)) {
       if (this.rootUsers.has(message.author.id)) {
-        this.handleCommand.call(this, message)
+        this.handleCommand(message)
       } else {
-        this.mentionResponse.call(this, message)
+        this.mentionResponse(message)
       }
     }
   }
 }
 
-
 module.exports = DiscordService

UI/package.json

@@ -33,7 +33,14 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://localhost:6769",
+  "proxy": {
+    "/api": {
+      "target": "http://localhost:6769"
+    },
+    "/api/socket.io": {
+      "target": "ws://localhost:6769/socket.io",
+      "ws": true
+  },
   "devDependencies": {
     "eslint": "^4.14.0",
     "eslint-config-standard": "^11.0.0-beta.0",

UI/src/components/add-server/index.js

@@ -0,0 +1,9 @@
+import React, { Component } from 'react'
+
+export default class AddServer extends Component {
+  render () {
+    return <div className="inner">
+      
+    </div>
+  }
+}

UI/src/components/servers/Navigation.js

@@ -3,7 +3,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import PropTypes from 'prop-types'
 import ServerCard from './ServerCard'
 import UserCard from './UserCard'
-import { Scrollbars } from 'react-custom-scrollbars';
+import { Scrollbars } from 'react-custom-scrollbars'
+import { NavLink } from 'react-router-dom'
 
 class ServersNavigation extends Component {
   static propTypes = {
@@ -24,6 +25,12 @@ class ServersNavigation extends Component {
               return acc
             }, [])
           }
+          <NavLink className='server-list__item add-new' activeClassName='active' to={`/s/add`}>
+            <div className='server-list__item__info'>
+              <i uk-icon="icon: plus; ratio: 0.9"></i>&nbsp;
+              Add to your server
+            </div>
+          </NavLink>
         </Scrollbars>
       </div>
     </Fragment>

UI/src/components/servers/ServerCard.sass

@@ -7,6 +7,10 @@
     align-items: center
     /* justify-content: center */
 
+
+    &.add-new
+      color: var(--c-7)
+    
     &.active
       background-color: var(--c-3)
 
@@ -44,5 +48,3 @@ a.server-list__item
   
   .active
     cursor: default
-
-

UI/src/components/servers/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Route } from 'react-router-dom'
+import { Route, Switch } from 'react-router-dom'
 import { Scrollbars } from 'react-custom-scrollbars'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router'
@@ -8,6 +8,7 @@ import './index.sass'
 import Navigation from './Navigation'
 import RolePicker from '../role-picker'
 import RoleEditor from '../role-editor'
+import AddServer from '../add-server'
 
 // import mockData from './mockData'
 
@@ -25,10 +26,17 @@ class Servers extends Component {
     return <div className="servers">
       <Navigation className="servers__nav" servers={this.props.servers} user={this.props.user} />
       <div className='servers__content'>
-        <Scrollbars className={`fade-element ${(this.props.fade) ? 'fade' : ''}`} autoHeight autoHeightMax='calc(100vh - 80px)'>
-          <Route path='/s/:server' component={RolePicker} exact />
-        </Scrollbars>
+        <Switch>
           <Route path='/s/:server/edit' component={RoleEditor} />
+          <Route path='/s/:server' render={() =>
+            <Scrollbars className={`fade-element ${(this.props.fade) ? 'fade' : ''}`} autoHeight autoHeightMax='calc(100vh - 80px)'>
+              <Switch>
+                <Route path='/s/add' component={AddServer} exact />
+                <Route path='/s/:server' component={RolePicker} exact />
+              </Switch>
+            </Scrollbars>
+          } />
+        </Switch>
       </div>
     </div>
   }

UI/src/components/wrapper/index.js

@@ -10,7 +10,7 @@ class Wrapper extends Component {
       <Scrollbars autoHeight autoHeightMax='100vh'>
         <div className='wrapper__background' />
         <div className='wrapper__container'>
-          <nav uk-navbar='' className='wrapper__nav' className='uk-navbar-transparent'>
+          <nav uk-navbar='' className='uk-navbar-transparent wrapper__nav'>
             <div className='uk-navbar-left'>
               <Link to="/">
                 <Logotype style={{ height: '2rem' }} className='wrapper__logotype' />

UI/src/components/wrapper/wrapper.sass

@@ -19,5 +19,6 @@
 
   &__nav
     padding: 0 20px
+    z-index: 1000