add server list connection to discord

Server/api/servers_test.js

@@ -0,0 +1,14 @@
+module.exports = (R, $) => {
+  R.get('/api/~/relevant-servers/:user', (ctx, next) => {
+    // ctx.body = 'ok'
+    const srv = $.discord.getRelevantServers(ctx.params.user)
+    ctx.body = $.discord.presentableServers(srv, ctx.params.user)
+    return
+  })
+
+  R.get('/api/~/roles/:server', (ctx, next) => {
+    // ctx.body = 'ok'
+    ctx.body = $.discord.getRoles(ctx.params.server)
+    return
+  })
+}

Server/package.json

@@ -29,7 +29,7 @@
     "pg": "^7.4.0",
     "pg-hstore": "^2.3.2",
     "pm2": "^2.8.0",
-    "sequelize": "^4.25.1",
+    "sequelize": "^4.26.0",
     "socket.io": "^2.0.4",
     "standard": "^10.0.3",
     "superagent": "^3.8.1",

Server/services/discord.js

@@ -10,13 +10,58 @@ class DiscordService extends Service {
     this.clientId = process.env.DISCORD_CLIENT_ID
     this.clientSecret = process.env.DISCORD_CLIENT_SECRET
     this.oauthCallback = process.env.OAUTH_AUTH_CALLBACK
-    this.botCallback = `${ctx.config.appUrl}/oauth/bot/callback`
+    this.botCallback = `${ctx.config.appUrl}/api/oauth/bot/callback`
+
+    this.client = new discord.Client()
 
     this.startBot()
   }
 
   async startBot () {
-    await discord.login(this.botToken)
+    await this.client.login(this.botToken)
+  }
+
+  getRelevantServers (userId) {
+    return this.client.guilds.filter((g) => g.members.has(userId))
+  }
+
+  presentableServers (collection, userId) {
+    return collection.map((server) => {
+      const gm = server.members.get(userId)
+
+      return {
+        id: server.id,
+        gm: {
+          nickname: gm.nickname,
+          color: gm.displayHexColor
+        },
+        server: {
+          id: server.id,
+          name: server.name,
+          ownerID: server.ownerID,
+          icon: server.icon
+        },
+        perms: this.getPermissions(gm)
+      }
+    })
+  }
+
+  presentableRoles (serverId) {
+    return this.client.guilds.get(serverId).roles.map((role) => {
+      return {
+        color: role.hexColor,
+        position: role.calculatedPosition,
+        id: role.id,
+
+      }
+    })
+  }
+
+  getPermissions (gm) {
+    return {
+      isAdmin: gm.permissions.hasPermission('ADMINISTRATOR'),
+      canManageRoles: gm.permissions.hasPermission('MANAGE_ROLES', false, true)
+    }
   }
 
   // oauth step 2 flow, grab the auth token via code
@@ -42,31 +87,31 @@ class DiscordService extends Service {
   }
 
   // on sign out, we revoke the token we had.
-  async revokeAuthToken (code, state) {
-    const url = 'https://discordapp.com/api/oauth2/revoke'
-    try {
-      const rsp =
-        await superagent
-          .post(url)
-          .send({
-            client_id: this.clientId,
-            client_secret: this.clientSecret,
-            grant_type: 'authorization_code',
-            code: code,
-            redirect_uri: this.oauthCallback
-          })
+  // async revokeAuthToken (code, state) {
+  //   const url = 'https://discordapp.com/api/oauth2/revoke'
+  //   try {
+  //     const rsp =
+  //       await superagent
+  //         .post(url)
+  //         .send({
+  //           client_id: this.clientId,
+  //           client_secret: this.clientSecret,
+  //           grant_type: 'authorization_code',
+  //           code: code,
+  //           redirect_uri: this.oauthCallback
+  //         })
 
-      return rsp.body
-    } catch (e) {
-      this.log.error('getAuthToken failed', e)
-      throw e
-    }
-  }
+  //     return rsp.body
+  //   } catch (e) {
+  //     this.log.error('getAuthToken failed', e)
+  //     throw e
+  //   }
+  // }
 
   // returns oauth authorize url with IDENTIFY permission
   // we only need IDENTIFY because we only use it for matching IDs from the bot
   getAuthUrl (state) {
-    return `https://discordapp.com/oauth2/authorize?client_id=${this.clientId}&redirect_uri=${this.oauthCallback}&response_type=code&scope=identify`
+    return `https://discordapp.com/oauth2/authorize?client_id=${this.clientId}&redirect_uri=${this.oauthCallback}&response_type=code&scope=identify&state=${state}`
   }
 
   // returns the bot join url with MANAGE_ROLES permission

UI/public/index.html

@@ -4,6 +4,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/png" sizes="any" href="%PUBLIC_URL%/favicon.png"/>
 <title>Roleypoly</title>
+<link rel="stylesheet" href="https://use.typekit.net/bck0pci.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit-icons.min.js"></script>
@@ -11,7 +12,7 @@
 <noscript>
   You need to enable JavaScript to run this app.
 </noscript>
-<div id="root"></div>
+<div id="root" class="tk-source-han-sans-japanese"></div>
 <!--
   This HTML file is a template.
   If you open it directly in the browser, you will see an empty page.

UI/src/components/servers/Navigation.js

@@ -7,10 +7,11 @@ import UserCard from './UserCard'
 
 class ServersNavigation extends Component {
   render () {
+    console.log(this.props.servers)
     return <Fragment>
       <UserCard user={this.props.user} />
       <div className={this.props.className}>
-        { this.props.servers.map((s, i) => <ServerCard server={s} key={i} />) }
+        { this.props.servers.map((s, i) => <ServerCard server={s} user={this.props.user} key={i} />) }
       </div>
     </Fragment>
   }

UI/src/components/servers/ServerCard.css

@@ -1,8 +1,10 @@
 .server-list__item {
   display: flex;
-  border-bottom: 1px solid var(--c-3);
+  /* border-bottom: 1px solid var(--c-3); */
   padding: 25px 15px;
   padding-right: 0;
+  align-items: center;
+  /* justify-content: center; */
 }
 
 a.server-list__item {
@@ -21,6 +23,8 @@ a.server-list__item.active {
 .server-list__item:hover:not(.active) {
   background-color: rgba(0,0,0,0.25) !important;
   cursor: pointer;
+  transform: translateX(1px); 
+  transition: background 0.05s ease-in-out, transform 0.1s ease-in-out;  
 }
 
 .server-list__item:last-of-type {

UI/src/components/servers/ServerCard.js

@@ -5,14 +5,25 @@ import './ServerCard.css'
 
 class ServerCard extends Component {
   render () {
-    const { server } = this.props
-    return <NavLink className='server-list__item' activeClassName='active' to={`/s/${server.id}`}>
+    const { server: { server, id, gm, perms }, user } = this.props
+
+    let icon = ''
+    
+    if (perms.canManageRoles) {
+      icon = <span title='Role Manager' uk-tooltip=''>🔰</span>
+    }
+
+    if (perms.isAdmin) {
+      icon = <span title='Server Admin' uk-tooltip=''>🔰⭐️</span>
+    }
+
+    return <NavLink className='server-list__item' activeClassName='active' to={`/s/${id}`}>
       <div className='server-list__item__icon'>
-        <img src={`https://cdn.discordapp.com/icons/${server.id}/${server.icon}.png`} />
+        <img src={`https://cdn.discordapp.com/icons/${id}/${server.icon}.png`} />
       </div>
       <div className='server-list__item__info'>
         <b>{server.name}</b><br />
-        <span>{server.name}</span>
+        <span style={{ color: gm.color }}>{ gm.nickname || user.username }</span> { icon }
       </div>
     </NavLink>
   }

UI/src/components/servers/UserCard.css

@@ -2,7 +2,7 @@
   position: relative;
   display: flex;
   background-color: rgba(0,0,0,0.3);
-  border-bottom: 1px solid var(--c-3);  
+  /* border-bottom: 1px solid var(--c-3);   */
   padding: 25px 15px;
   grid-area: user;
 }
@@ -40,6 +40,14 @@
   justify-content: center;
 }
 
+.user-card__actions svg {
+  transition: transform 0.05s ease-in-out;
+}
+
+.user-card__actions svg:hover {
+  transform: scale(1.15);
+}
+
 .user-card__actions polygon {
   fill: var(--c-7);
 }

UI/src/components/servers/index.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import Radium from 'radium'
+import superagent from 'superagent'
 import './index.css'
 
 import Navigation from './Navigation'
@@ -7,9 +8,20 @@ import Navigation from './Navigation'
 import mockData from './mockData'
 
 class Servers extends Component {
+  state = {
+    user: mockData.user,
+    servers: [],
+  }
+
+  async componentWillMount () {
+    const rsp = await superagent.get(`/api/~/relevant-servers/62601275618889728`)
+
+    this.setState({ servers: rsp.body })
+  }
+
   render () {
     return <div className="servers">
-      <Navigation className="servers__nav" servers={mockData.servers} user={mockData.user} />
+      <Navigation className="servers__nav" servers={this.state.servers} user={this.state.user} />
       <div className="servers__content">
         {/* another router probably. */}
       </div>

UI/src/components/wrapper/index.js

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
 import Radium from 'radium'
 import Logotype from '../logotype'
 import styles from './styles'
+import './wrapper.css'
 
 class Wrapper extends Component {
   render () {
@@ -11,7 +12,7 @@ class Wrapper extends Component {
       <div style={styles.container}>
         <nav uk-navbar='' style={styles.nav} className='uk-navbar-transparent'>
           <div className='uk-navbar-left'>
-            <Logotype style={{ height: '2rem' }} />
+            <Logotype style={{ height: '2rem' }} className='wrapper__logotype' />
           </div>
           <div class='uk-navbar-right'>
             <ul class='uk-navbar-nav'>

UI/src/components/wrapper/wrapper.css

@@ -0,0 +1,4 @@
+.wrapper__logo:hover mask {
+  /* transform: translate 1s ease-in-out repeat; */
+  transform: rotate(30deg)
+}

UI/src/index.css

@@ -1,7 +1,10 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
+  font-family: "source-han-sans-japanese", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 :root {