finish redux feature parity

Server/Roleypoly.js

@@ -1,4 +1,4 @@
-const log = new (require('./logger'))('World')
+const log = new (require('./logger'))('Roleypoly')
 const Sequelize = require('sequelize')
 const fetchModels = require('./models')
 const fetchApis = require('./api')
@@ -40,9 +40,9 @@ class Roleypoly {
     //   enableReadyCheck: true,
     //   enableOfflineQueue: true
     // })
-
     this.ctx.discord = new (require('./services/discord'))(this.ctx)
     this.ctx.sessions = new (require('./services/sessions'))(this.ctx)
+    this.ctx.P = new (require('./services/presentation'))(this.ctx)
   }
 
   async mountRoutes () {

Server/api/auth.js

@@ -36,6 +36,7 @@ module.exports = (R, $) => {
     if (ctx.session.accessToken === undefined) {
       ctx.body = { err: 'not_logged_in' }
       ctx.status = 401
+      return
     }
 
     const user = await $.discord.getUser(ctx.session.accessToken)

Server/api/servers.js

@@ -2,7 +2,7 @@ module.exports = (R, $) => {
   R.get('/api/servers', async (ctx) => {
     const { userId } = ctx.session
     const srv = $.discord.getRelevantServers(userId)
-    const presentable = $.discord.presentableServers(srv, userId)
+    const presentable = $.P.oldPresentableServers(srv, userId)
 
     ctx.body = presentable
   })

Server/index.js

@@ -37,9 +37,9 @@ async function start () {
       await next()
     } catch (e) {
       log.error(e)
-      ctx.status = 500
+      ctx.status = ctx.status || 500
       if (DEVEL) {
-        ctx.body = e.stack
+        ctx.body = ctx.body || e.stack
       } else {
         ctx.body = {
           err: 'something terrible happened.'

Server/models/Server.js

@@ -7,7 +7,7 @@ module.exports = (sql, DataTypes) => {
     categories: {
       type: DataTypes.JSON
     },
-    note: {
+    message: {
       type: DataTypes.TEXT
     }
   })

Server/package.json

@@ -26,6 +26,7 @@
     "koa-passport": "^4.0.1",
     "koa-session": "^5.5.1",
     "ksuid": "^0.4.0",
+    "lru-cache": "^4.1.1",
     "passport-discord": "^0.1.3",
     "passport-oauth2-refresh": "^1.0.0",
     "pg": "^7.4.0",

Server/services/discord.js

@@ -15,6 +15,7 @@ class DiscordService extends Service {
     this.client = new discord.Client()
 
     this.startBot()
+
   }
 
   async startBot () {
@@ -25,42 +26,12 @@ class DiscordService extends Service {
     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
-        },
-        roles: this.presentableRoles(server.id, gm),
-        message: 'moe moe kyuuuuuuuuun~',
-        perms: this.getPermissions(gm)
-      }
-    })
+  gm (serverId, userId) {
+    return this.client.guilds.get(serverId).members.get(userId)
   }
 
-  presentableRoles (serverId, gm) {
-    return this.client.guilds
-    .get(serverId)
-    .roles
-    .filter(r => r.id !== serverId)
-    .map((role) => ({
-      color: role.hexColor,
-      position: role.position,
-      calculatedPosition: role.calculatedPosition,
-      id: role.id,
-      name: role.name,
-      selected: gm.roles.has(role.id)
-    }))
+  getRoles (server) {
+    return this.client.guilds.get(server).roles
   }
 
   getPermissions (gm) {

Server/services/presentation.js

@@ -0,0 +1,49 @@
+const Service = require('./Service')
+const LRU = require('lru-cache')
+
+class PresentationService extends Service {
+  constructor (ctx) {
+    super(ctx)
+    this.M = ctx.M
+    this.discord = ctx.discord
+
+    this.cache = LRU({ max: 500, maxAge: 100 * 60 * 5 })
+  }
+
+  oldPresentableServers (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
+        },
+        roles: server.roles.filter(r => r.id !== server.id).map(r => ({
+          id: r.id,
+          color: r.color,
+          name: r.name,
+          selected: gm.roles.has(r.id),
+          position: r.position
+        })),
+        message: 'moe moe kyuuuuuuuuun~',
+        perms: this.discord.getPermissions(gm)
+      }
+    })
+  }
+
+  rolesByServer (serverId, userId) {
+    // get from discord, merge with server categories
+  }
+
+
+}
+
+module.exports = PresentationService

Server/services/server.js

@@ -0,0 +1,42 @@
+const Service = require('./Service')
+
+class ServerService extends Service {
+  constructor (ctx) {
+    super(ctx)
+    this.Server = ctx.M.Server
+    this.P = ctx.P
+  }
+
+  async ensure (server) {
+    const srv = await this.get(server.id)
+    if (srv == null) {
+      return this.create({
+        id: server.id,
+        message: '',
+        categories: {}
+      })
+    }
+  }
+
+  create ({ id, message, categories }) {
+    const srv = this.Server.build({ id, message, categories })
+
+    return srv.save()
+  }
+
+  update (id, newData) {
+    const srv = this.get(id)
+
+    return srv.update(newData)
+  }
+
+  get (id) {
+    return this.Server.findOne({
+      where: {
+        id
+      }
+    })
+  }
+}
+
+module.exports = ServerService

Server/yarn.lock

@@ -2022,6 +2022,13 @@ lru-cache@^4.0.1:
     pseudomap "^1.0.1"
     yallist "^2.0.0"
 
+lru-cache@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -2635,7 +2642,7 @@ promptly@2.2.0:
   dependencies:
     read "^1.0.4"
 
-pseudomap@^1.0.1:
+pseudomap@^1.0.1, pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
 
@@ -3441,7 +3448,7 @@ y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
 
-yallist@^2.0.0:
+yallist@^2.0.0, yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
 

UI/package.json

@@ -6,6 +6,7 @@
     "color": "^2.0.1",
     "custom-react-scripts": "0.2.1",
     "eslint": "^4.13.0",
+    "history": "^4.7.2",
     "immutable": "^3.8.2",
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
@@ -14,6 +15,7 @@
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
+    "react-router-redux": "^5.0.0-alpha.8",
     "redux": "^3.7.2",
     "redux-devtools": "^3.4.1",
     "redux-devtools-dock-monitor": "^1.1.2",

UI/public/index.html

@@ -4,7 +4,8 @@
 <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">
+<script src="https://use.typekit.net/bck0pci.js"></script>
+<script>try{Typekit.load({ async: true });}catch(e){}</script>
 <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>
@@ -12,7 +13,7 @@
 <noscript>
   You need to enable JavaScript to run this app.
 </noscript>
-<div id="root" class="tk-source-han-sans-japanese"></div>
+<div id="root" class=""></div>
 <!--
   This HTML file is a template.
   If you open it directly in the browser, you will see an empty page.

UI/src/App.js

@@ -1,14 +1,17 @@
 import React, { Component } from 'react'
 import { BrowserRouter } from 'react-router-dom'
 import { Provider } from 'react-redux'
-import './App.css'
+import createHistory from 'history/createBrowserHistory'
+import { ConnectedRouter } from 'react-router-redux'
 import configureStore from './store/configureStore'
+import './App.css'
 
 import Wrapper from './components/wrapper'
 import AppRouter from './router'
 import { userInit } from './actions'
 
-const store = configureStore()
+const history = createHistory()
+const store = configureStore(undefined, history)
 
 window.__APP_STORE__ = store
 
@@ -20,11 +23,11 @@ class App extends Component {
   render () {
     return (
       <Provider store={store}>
-        <BrowserRouter>
+        <ConnectedRouter history={history}>
           <Wrapper>
             <AppRouter />
           </Wrapper>
-        </BrowserRouter>
+        </ConnectedRouter>
       </Provider>
     )
   }

UI/src/actions/index.js

@@ -14,19 +14,23 @@ export const fetchServers = async dispatch => {
 }
 
 export const userInit = async dispatch => {
-  try {
-    const rsp = await superagent.get('/api/auth/user')
-    
-    dispatch({
-      type: Symbol.for('set user'),
-      data: rsp.body
-    })
+  if (!window.location.pathname.startsWith('/oauth')) {
+    try {
+      const rsp = await superagent.get('/api/auth/user')
 
-    dispatch(fetchServers)
-  } catch (e) {
-    if (!window.location.pathname.startsWith('/oauth')) {
+      dispatch({
+        type: Symbol.for('set user'),
+        data: rsp.body
+      })
+
+      dispatch(fetchServers)
+    } catch (e) {
       window.location.href = '/oauth/flow'
     }
+  } else {
+    dispatch({
+      type: Symbol.for('app ready')
+    })
   }
 }
 

UI/src/components/role-picker/actions.js

@@ -12,16 +12,16 @@ export const roleUpdate = (id, oldState) => (dispatch, getState) => {
 }
 
 export const setup = id => async dispatch => {
-  const rsp = await superagent.get(`/api/server/${id}`)
-  const data = rsp.body
+  // const rsp = await superagent.get(`/api/server/${id}`)
+  // const data = rsp.body
 
-  dispatch({
-    type: Symbol.for('update server roles'),
-    data: {
-      id,
-      roles: data
-    }
-  })
+  // dispatch({
+  //   type: Symbol.for('update server roles'),
+  //   data: {
+  //     id,
+  //     roles: data
+  //   }
+  // })
 
   dispatch(constructView(id))
 }
@@ -31,9 +31,7 @@ export const constructView = id => (dispatch, getState) => {
   const roles = server.get('roles')
 
   const categories = roles.groupBy(x => x.get('category'))
-  const selected = roles.reduce((acc, r) => {
-    return acc.set(r.id, r.selected)
-  }, Map())
+  const selected = roles.reduce((acc, r) => acc.set(r.get('id'), r.get('selected')), Map())
 
   console.log(categories, selected)
   dispatch({

UI/src/components/role-picker/index.js

@@ -7,7 +7,6 @@ import './RolePicker.sass'
 import Role from '../role'
 
 const mapState = ({ rolePicker, servers }, ownProps) => {
-  console.log(servers)
   return {
     data: rolePicker,
     server: servers.get(ownProps.match.params.server)
@@ -21,8 +20,12 @@ class RolePicker extends Component {
     dispatch(Actions.setup(server))
   }
 
+  isSelected (id) {
+    return this.props.data.getIn([ 'rolesSelected', id ])
+  }
+
   render () {
-    console.log(this.props)
+    console.log(this.constructor.name, this.props)
     if (this.props.server === undefined) {
       return null
     }
@@ -37,11 +40,11 @@ class RolePicker extends Component {
       }
       <section>
         <h3>Roles</h3>
-          {/* {
-            this.props.data.roles.map((r, k) => {
-              return <Role key={k} role={r} onToggle={this.dispatch(Actions.roleUpdate(r.id, r.selected))} />
+          {
+            this.props.server.get('roles').map((r, k) => {
+              return <Role key={k} role={r} selected={this.isSelected(r.get('id'))} onToggle={() => this.props.dispatch(Actions.roleUpdate(r.get('id'), this.isSelected(r.get('id'))))} />
             })
-          } */}
+          }
       </section>
     </div>
   }

UI/src/components/role/Role.sass

@@ -20,7 +20,11 @@
       border-color: var(--role-color-hover)
       background-color: transparent 
       &:active
-        box-shadow: none  
+        box-shadow: none
+  
+  &:active .role__option
+    box-shadow: none
+
 
   &__option
     border-radius: 50%

UI/src/components/role/index.js

@@ -9,12 +9,14 @@ class Role extends Component {
   static propTypes = {
     role: PropTypes.object.isRequired,
     onToggle: PropTypes.func,
-    type: PropTypes.string
+    type: PropTypes.string,
+    selected: PropTypes.bool.isRequired
   }
 
   render () {
-    const { role } = this.props
-    let color = Color(role.color)
+    let { role, selected } = this.props
+
+    let color = Color(role.get('color'))
 
     if (color.rgbNumber() === 0) {
       color = whiteColor
@@ -24,17 +26,16 @@ class Role extends Component {
     let hc = color.lighten(0.1)
 
     return <div
-      onClick={this.props.onToggle.bind(null, !role.selected, role.selected)}
-      className='role'
+      onClick={this.props.onToggle.bind(null, !selected, selected)}
+      className='role font-sans-serif'
       style={{
         '--role-color-hex': c.string(),
         '--role-color-hover': hc.string(),
         '--role-color-rgba': `rgba(${c.red()}, ${c.green()}, ${c.blue()}, 0.7)`
       }}>
-      {/* circle svg */}
-      <div className={`role__option ${(role.selected) ? 'selected' : ''}`}/>
+      <div className={`role__option ${(selected) ? 'selected' : ''}`}/>
       <div className='role__name'>
-        {role.name}
+        {role.get('name')}
       </div>
     </div>
   }

UI/src/components/servers/Navigation.js

@@ -5,10 +5,9 @@ import ServerCard from './ServerCard'
 import UserCard from './UserCard'
 
 class ServersNavigation extends Component {
-
   static propTypes = {
     user: ImmutablePropTypes.map.isRequired,
-    servers: ImmutablePropTypes.setOf(ImmutablePropTypes.orderedMap).isRequired,
+    servers: ImmutablePropTypes.orderedMapOf(ImmutablePropTypes.map).isRequired,
     className: PropTypes.string
   }
 

UI/src/components/servers/ServerCard.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { NavLink } from 'react-router-dom'
-import Radium from 'radium'
 import './ServerCard.sass'
+import { withRouter } from 'react-router';
 
 class ServerCard extends Component {
   static propTypes = {

UI/src/components/servers/index.js

@@ -5,6 +5,7 @@ import './index.sass'
 
 import Navigation from './Navigation'
 import RolePicker from '../role-picker'
+import { withRouter } from 'react-router';
 
 // import mockData from './mockData'
 

UI/src/index.css

@@ -7,6 +7,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.font-sans-serif {
+  font-family: sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
 :root {
   --c-white: #efefef;
   --c-9: #EBD6D4;

UI/src/reducers/index.js

@@ -3,6 +3,7 @@ import { combineReducers } from 'redux'
 import servers from './servers'
 import user from './user'
 import rolePicker from './role-picker'
+import { routerMiddleware } from 'react-router-redux';
 // import roles from './roles'
 
 const initialState = {
@@ -25,6 +26,7 @@ const rootReducer = combineReducers({
   appState,
   servers,
   user,
+  router: routerMiddleware,
   // roles,
   rolePicker
 })

UI/src/reducers/role-picker.js

@@ -1,9 +1,9 @@
-import { Map, Set } from 'immutable'
+import { Map, OrderedMap } from 'immutable'
 
 const initialState = Map({
   hidden: true, // should the view be hidden?
   emptyRoles: true, // helps derender roles so there's no visible element state change
-  viewMap: Set([]), // roles in categories
+  viewMap: OrderedMap({}), // roles in categories
   originalRolesSelected: Map({}), // Map<role id, bool> -- original roles for diffing against selected 
   rolesSelected: Map({}) // Map<role id, bool> -- new roles for diffing
 })
@@ -11,8 +11,8 @@ const initialState = Map({
 export default (state = initialState, { type, data }) => {
   switch (type) {
     case Symbol.for('setup role picker'):
-      return state.merge(data)
-
+      return state.mergeDeep(data)
+ 
     case Symbol.for('hide role picker ui'):
       return {
         ...state,
@@ -24,12 +24,12 @@ export default (state = initialState, { type, data }) => {
         ...state,
         emptyRoles: data
       }
-    
-    case Symbol.for('zero role picker'):
-      return initialState
 
     case Symbol.for('update selected roles'):
-      return state.set('rolesSelected', state.get('rolesSelected').set(data.id, data.state))
+      return state.setIn(['rolesSelected', data.id], data.state)
+      
+    case Symbol.for('zero role picker'):
+      return initialState
 
     default:
       return state

UI/src/router/index.js

@@ -5,9 +5,11 @@ import { connect } from 'react-redux'
 import Servers from '../components/servers'
 import OauthCallback from '../components/oauth-callback'
 import OauthFlow from '../components/oauth-flow'
+import { withRouter } from 'react-router';
 
 const aaa = (props) => (<div>{ JSON.stringify(props) }</div>)
 
+@withRouter
 @connect(({ appState }) => ({ ready: appState.ready }))
 export default class AppRouter extends Component {
   render () {

UI/src/store/configureStore.dev.js

@@ -5,13 +5,14 @@ import { createLogger } from 'redux-logger'
 // import api from '../middleware/api'
 import rootReducer from '../reducers'
 import DevTools from '../components/dev-tools'
+import { routerMiddleware } from 'react-router-redux'
 
-const configureStore = preloadedState => {
+const configureStore = (preloadedState, history) => {
   const store = createStore(
     rootReducer,
     preloadedState,
     compose(
-      applyMiddleware(thunk, createLogger()),
+      applyMiddleware(thunk, routerMiddleware(history), createLogger()),
       DevTools.instrument()
     )
   )

UI/src/store/configureStore.prod.js

@@ -1,12 +1,14 @@
 import { createStore, applyMiddleware } from 'redux'
+import { routerMiddleware } from 'react-router-redux'
+
 import thunk from 'redux-thunk'
 // import api from '../middleware/api'
 import rootReducer from '../reducers'
 
-const configureStore = preloadedState => createStore(
+const configureStore = (preloadedState, history) => createStore(
   rootReducer,
   preloadedState,
-  applyMiddleware(thunk)
+  applyMiddleware(thunk, routerMiddleware(history))
 )
 
 export default configureStore

UI/yarn.lock

@@ -6094,6 +6094,14 @@ react-router-dom@^4.2.2:
     react-router "^4.2.0"
     warning "^3.0.0"
 
+react-router-redux@^5.0.0-alpha.8:
+  version "5.0.0-alpha.8"
+  resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-5.0.0-alpha.8.tgz#5242c705730b2ac862aff7a8e90f870d0cf45e12"
+  dependencies:
+    history "^4.7.2"
+    prop-types "^15.6.0"
+    react-router "^4.2.0"
+
 react-router@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.2.0.tgz#61f7b3e3770daeb24062dae3eedef1b054155986"

start.sh

@@ -0,0 +1,13 @@
+#!/bin/sh
+
+docker-compose up -d 
+
+cd Server
+yarn
+yarn dev
+
+cd ..
+
+cd UI
+yarn
+yarn start