sync: full redux retrofit done

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>
   }