From 13cd3bd4a057f6095975500689ed69832eefff52 Mon Sep 17 00:00:00 2001
From: Kata <git@kat.cafe>
Date: Tue, 5 Dec 2017 02:11:49 -0600
Subject: [PATCH] add server list connection to discord

---
 API.paw                                  | Bin 0 -> 4553 bytes
 Server/api/servers_test.js               |  14 ++++
 Server/package.json                      |   2 +-
 Server/services/discord.js               |  89 +++++++++++++++++------
 UI/public/index.html                     |   3 +-
 UI/src/components/servers/Navigation.js  |   3 +-
 UI/src/components/servers/ServerCard.css |   6 +-
 UI/src/components/servers/ServerCard.js  |  19 ++++-
 UI/src/components/servers/UserCard.css   |  10 ++-
 UI/src/components/servers/index.js       |  14 +++-
 UI/src/components/wrapper/index.js       |   3 +-
 UI/src/components/wrapper/wrapper.css    |   4 +
 UI/src/index.css                         |   5 +-
 13 files changed, 138 insertions(+), 34 deletions(-)
 create mode 100644 API.paw
 create mode 100644 Server/api/servers_test.js
 create mode 100644 UI/src/components/wrapper/wrapper.css

diff --git a/API.paw b/API.paw
new file mode 100644
index 0000000000000000000000000000000000000000..93ad9d0d55dc930af4bf5aa9556e0d18c529bf2a
GIT binary patch
literal 4553
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
W0lvw75G(Phbs~?2u`xDqXZ{Ohi%!)5

literal 0
HcmV?d00001

diff --git a/Server/api/servers_test.js b/Server/api/servers_test.js
new file mode 100644
index 0000000..953b5d8
--- /dev/null
+++ b/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
+  })
+}
diff --git a/Server/package.json b/Server/package.json
index 283f8dd..486cb3a 100644
--- a/Server/package.json
+++ b/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",
diff --git a/Server/services/discord.js b/Server/services/discord.js
index 5920ee4..21348fc 100644
--- a/Server/services/discord.js
+++ b/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
diff --git a/UI/public/index.html b/UI/public/index.html
index 3c5b860..69902b7 100644
--- a/UI/public/index.html
+++ b/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.
diff --git a/UI/src/components/servers/Navigation.js b/UI/src/components/servers/Navigation.js
index 9144cd8..2c41ff1 100644
--- a/UI/src/components/servers/Navigation.js
+++ b/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>
   }
diff --git a/UI/src/components/servers/ServerCard.css b/UI/src/components/servers/ServerCard.css
index f25d724..47e57be 100644
--- a/UI/src/components/servers/ServerCard.css
+++ b/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 {
diff --git a/UI/src/components/servers/ServerCard.js b/UI/src/components/servers/ServerCard.js
index 2d324a4..b6e7dfa 100644
--- a/UI/src/components/servers/ServerCard.js
+++ b/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>
   }
diff --git a/UI/src/components/servers/UserCard.css b/UI/src/components/servers/UserCard.css
index 2d010ac..cd31f11 100644
--- a/UI/src/components/servers/UserCard.css
+++ b/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);
 }
\ No newline at end of file
diff --git a/UI/src/components/servers/index.js b/UI/src/components/servers/index.js
index acae198..c6d0738 100644
--- a/UI/src/components/servers/index.js
+++ b/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>
diff --git a/UI/src/components/wrapper/index.js b/UI/src/components/wrapper/index.js
index af85e40..193c3ec 100644
--- a/UI/src/components/wrapper/index.js
+++ b/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'>
diff --git a/UI/src/components/wrapper/wrapper.css b/UI/src/components/wrapper/wrapper.css
new file mode 100644
index 0000000..ceecb62
--- /dev/null
+++ b/UI/src/components/wrapper/wrapper.css
@@ -0,0 +1,4 @@
+.wrapper__logo:hover mask {
+  /* transform: translate 1s ease-in-out repeat; */
+  transform: rotate(30deg)
+}
\ No newline at end of file
diff --git a/UI/src/index.css b/UI/src/index.css
index 423b1c5..5b9b46c 100644
--- a/UI/src/index.css
+++ b/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 {