finish redux feature parity

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'