sync: full redux retrofit done

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

@@ -0,0 +1,47 @@
+import { Map, Set } from 'immutable'
+import superagent from 'superagent'
+
+export const roleUpdate = (id, oldState) => (dispatch, getState) => {
+  dispatch({
+    type: Symbol.for('update selected roles'),
+    data: {
+      id,
+      state: !oldState
+    }
+  })
+}
+
+export const setup = id => async dispatch => {
+  const rsp = await superagent.get(`/api/server/${id}`)
+  const data = rsp.body
+
+  dispatch({
+    type: Symbol.for('update server roles'),
+    data: {
+      id,
+      roles: data
+    }
+  })
+
+  dispatch(constructView(id))
+}
+
+export const constructView = id => (dispatch, getState) => {
+  const server = getState().servers.get(id)
+  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())
+
+  console.log(categories, selected)
+  dispatch({
+    type: Symbol.for('setup role picker'),
+    data: {
+      viewMap: categories,
+      rolesSelected: selected,
+      originalRolesSelected: selected
+    }
+  })
+}

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

@@ -1,62 +1,47 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 import superagent from 'superagent'
+import * as Actions from './actions'
 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)
+  }
+}
+
+@connect(mapState)
 class RolePicker extends Component {
-  state = {
-    roles: [],
-    categories: {},
-    hidden: true,
-    serverMessage: `Hey there. This is a cool UI you can pick your roles from. If you have any questions, ask the mods on Discord!`
-  }
-
-  async componentDidUpdate (prevProps) {
-    if (prevProps.match.params.server !== this.props.match.params.server) {
-      this.setState({ hidden: true })
-      setTimeout(async () => {
-        this.setState({ roles: [] })      
-        this.setState({ roles: await this.getRoles(this.props.match.params.server), hidden: false })
-      }, 350)
-    }
-  }
-
-  async componentWillMount () {
-    this.setState({ roles: await this.getRoles(this.props.match.params.server), hidden: false })    
-  }
-
-  async getRoles (id) {
-    const rsp = await superagent.get(`/api/server/${id}`)
-    return rsp.body//.map(r => { r.selected = false; return r })
-  }
-
-  onChange = k => (newVal, oldVal) => {
-    this.setState((prevState) => {
-      return { roles: prevState.roles.map(r => {
-        if (r.id === k) {
-          r.selected = newVal
-        }
-
-        return r
-      })}
-    })
+  componentWillMount () {
+    const { dispatch, match: { params: { server } } } = this.props
+    dispatch(Actions.setup(server))
   }
 
   render () {
-    return <div className={`role-picker ${(this.state.hidden) ? 'hidden' : ''}`}>
-      <section>
-        <h3>Server Message</h3>
-        <p>{this.state.serverMessage}</p>
-      </section>
+    console.log(this.props)
+    if (this.props.server === undefined) {
+      return null
+    }
+
+    return <div className={`role-picker ${(this.props.data.hidden) ? 'hidden' : ''}`}>
+      { (this.props.server.get('message') !== '')
+        ? <section>
+            <h3>Server Message</h3>
+            <p>{this.props.server.get('message')}</p>
+          </section>
+        : null
+      }
       <section>
         <h3>Roles</h3>
-          {
-            this.state.roles.map((r, k) => {
-
-              return <Role key={k} role={r} onToggle={this.onChange(r.id)} />
+          {/* {
+            this.props.data.roles.map((r, k) => {
+              return <Role key={k} role={r} onToggle={this.dispatch(Actions.roleUpdate(r.id, r.selected))} />
             })
-          }
+          } */}
       </section>
     </div>
   }

UI/src/components/servers/Navigation.js

@@ -8,7 +8,7 @@ class ServersNavigation extends Component {
 
   static propTypes = {
     user: ImmutablePropTypes.map.isRequired,
-    servers: ImmutablePropTypes.setOf(ImmutablePropTypes.map).isRequired,
+    servers: ImmutablePropTypes.setOf(ImmutablePropTypes.orderedMap).isRequired,
     className: PropTypes.string
   }
 
@@ -17,7 +17,12 @@ class ServersNavigation extends Component {
     return <Fragment>
       <UserCard user={this.props.user} />
       <div className={this.props.className}>
-        { this.props.servers.map((s, i) => <ServerCard server={s} user={this.props.user} key={i} />) }
+        { 
+          this.props.servers.reduce((acc, s, i) => {
+            acc.push(<ServerCard server={s} user={this.props.user} key={i} />)
+            return acc
+          }, [])
+        }
       </div>
     </Fragment>
   }

UI/src/components/servers/ServerCard.js

@@ -15,28 +15,29 @@ class ServerCard extends Component {
 
     let icon = ''
 
+    console.log(__filename, server)
     
     const s = server.get('server')
     const gm = server.get('gm')
     const perms = server.get('perms')
-    if (perms.canManageRoles) {
+    if (perms.get('canManageRoles')) {
       icon = <span title='Role Manager' uk-tooltip='' role='img' aria-label='Role Manager'>🔰</span>
     }
 
-    if (perms.isAdmin) {
+    if (perms.get('isAdmin')) {
       icon = <span title='Server Admin' uk-tooltip='' role='img' aria-label='Server Admin'>🔰⭐️</span>
     }
 
-    return <NavLink className='server-list__item' activeClassName='active' to={`/s/${s.id}`}>
+    return <NavLink className='server-list__item' activeClassName='active' to={`/s/${s.get('id')}`}>
       <div className='server-list__item__icon'>
-        <img src={`https://cdn.discordapp.com/icons/${s.id}/${s.icon}.png`} alt={s.name} />
+        <img src={`https://cdn.discordapp.com/icons/${s.get('id')}/${s.get('icon')}.png`} alt={s.name} />
       </div>
       <div className='server-list__item__info'>
-        <b>{s.name}</b><br />
-        <span style={{ color: gm.color }}>{ gm.nickname || user.get('username') }</span> { icon }
+        <b>{s.get('name')}</b><br />
+        <span style={{ color: gm.get('color') }}>{ gm.get('nickname') || user.get('username') }</span> { icon }
       </div>
     </NavLink>
   }
 }
 
-export default Radium(ServerCard)
+export default ServerCard

UI/src/components/servers/UserCard.js

@@ -16,7 +16,7 @@ class UserCard extends Component {
     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/embed/avatars/${Math.ceil(Math.random() * 9999) % 5}.png`
     }
 
     return `https://cdn.discordapp.com/avatars/${user.get('id')}/${avatar}.png`