finish most of redux retrofit

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 />
-        <span style={{ color: gm.color }}>{ gm.nickname || user.username }</span> { icon }
+        <b>{s.name}</b><br />
+        <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 {
-  async componentWillMount () {
-    const rsp = await superagent.get(`/api/servers`)
-
-    this.setState({ servers: rsp.body })
+const mapState = ({ servers, user }) => {
+  return {
+    servers,
+    user
   }
+}
 
+@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