finish most of redux retrofit

Server/api/auth.js

@@ -33,6 +33,11 @@ module.exports = (R, $) => {
   })
 
   R.get('/api/auth/user', async ctx => {
+    if (ctx.session.accessToken === undefined) {
+      ctx.body = { err: 'not_logged_in' }
+      ctx.status = 401
+    }
+
     const user = await $.discord.getUser(ctx.session.accessToken)
     ctx.session.userId = user.id
     ctx.session.avatarHash = user.avatar

UI/src/App.js

@@ -6,12 +6,17 @@ import configureStore from './store/configureStore'
 
 import Wrapper from './components/wrapper'
 import AppRouter from './router'
+import { userInit } from './actions'
 
 const store = configureStore()
 
 window.__APP_STORE__ = store
 
 class App extends Component {
+  componentWillMount () {
+    store.dispatch(userInit)
+  }
+
   render () {
     return (
       <Provider store={store}>

UI/src/actions/index.js

@@ -0,0 +1,25 @@
+import superagent from 'superagent'
+
+export const fetchServers = async dispatch => {
+  const rsp = await superagent.get('/api/servers')
+
+  dispatch({
+    type: Symbol.for('update servers'),
+    data: rsp.body
+  })
+}
+
+export const userInit = async dispatch => {
+  try {
+    const rsp = await superagent.get('/api/auth/user')
+    
+    dispatch({
+      type: Symbol.for('set user'),
+      data: rsp.body
+    })
+
+    dispatch(fetchServers)
+  } catch(e) {
+    console.log(e)
+  }
+}

UI/src/components/servers/ServerCard.js

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

UI/src/components/servers/UserCard.js

@@ -10,11 +10,13 @@ class UserCard extends Component {
 
   get avatar () {
     const { user } = this.props
-    if (user.avatar === '' || user.avatar == null) {
+    const avatar = user.get('avatar')
+
+    if (avatar === '' || avatar == null) {
       return `https://cdn.discordapp.com/embed/avatars/${Math.ceil(Math.random() * 9999) % 4}.png`
     }
 
-    return `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`
+    return `https://cdn.discordapp.com/avatars/${user.get('id')}/${avatar}.png`
   }
 
   render () {
@@ -24,10 +26,10 @@ class UserCard extends Component {
 
     return <div className='user-card'>
       <div className='user-card__icon'>
-        <img src={this.avatar} alt={user.username} />
+        <img src={this.avatar} alt={user.get('username')} />
       </div>
       <div className='user-card__info'>
-        <span className='user-card__info__name'>{user.username}</span><span className='user-card__info__discrim'>#{user.discriminator}</span>
+        <span className='user-card__info__name'>{user.get('username')}</span><span className='user-card__info__discrim'>#{user.get('discriminator')}</span>
       </div>
       <div className='user-card__actions'>
         <ul className='uk-iconnav uk-iconnav-vertical'>

UI/src/components/servers/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { Route } from 'react-router-dom'
-import Radium from 'radium'
+import { connect } from 'react-redux'
 import superagent from 'superagent'
 import './index.sass'
 
@@ -9,16 +9,18 @@ import RolePicker from '../role-picker'
 
 // import mockData from './mockData'
 
-class Servers extends Component {
+const mapState = ({ servers, user }) => {
-  async componentWillMount () {
+  return {
-    const rsp = await superagent.get(`/api/servers`)
+    servers,
-
+    user
-    this.setState({ servers: rsp.body })
   }
+}
 
+@connect(mapState)
+class Servers extends Component {
   render () {
     return <div className="servers">
-      <Navigation className="servers__nav" servers={[]} user={{}} />
+      <Navigation className="servers__nav" servers={this.props.servers} user={this.props.user} />
       <div className="servers__content">
         <Route path='/s/:server' component={RolePicker} />
         <Route path='/s/:server/edit' component={RolePicker} />
@@ -27,4 +29,4 @@ class Servers extends Component {
   }
 }
 
-export default Radium(Servers)
+export default Servers

UI/src/reducers/user.js

@@ -9,6 +9,10 @@ const initialState = Map({
 
 export default (state = initialState, { type, data }) => {
   switch (type) {
+
+    case Symbol.for('set user'):
+      return Map(data)
+
     default:
       return state
   }