finish redux feature parity

UI/package.json

@@ -6,6 +6,7 @@
     "color": "^2.0.1",
     "custom-react-scripts": "0.2.1",
     "eslint": "^4.13.0",
+    "history": "^4.7.2",
     "immutable": "^3.8.2",
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
@@ -14,6 +15,7 @@
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
+    "react-router-redux": "^5.0.0-alpha.8",
     "redux": "^3.7.2",
     "redux-devtools": "^3.4.1",
     "redux-devtools-dock-monitor": "^1.1.2",

UI/public/index.html

@@ -4,7 +4,8 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/png" sizes="any" href="%PUBLIC_URL%/favicon.png"/>
 <title>Roleypoly</title>
-<link rel="stylesheet" href="https://use.typekit.net/bck0pci.css">
+<script src="https://use.typekit.net/bck0pci.js"></script>
+<script>try{Typekit.load({ async: true });}catch(e){}</script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit-icons.min.js"></script>
@@ -12,7 +13,7 @@
 <noscript>
   You need to enable JavaScript to run this app.
 </noscript>
-<div id="root" class="tk-source-han-sans-japanese"></div>
+<div id="root" class=""></div>
 <!--
   This HTML file is a template.
   If you open it directly in the browser, you will see an empty page.

UI/src/App.js

@@ -1,14 +1,17 @@
 import React, { Component } from 'react'
 import { BrowserRouter } from 'react-router-dom'
 import { Provider } from 'react-redux'
-import './App.css'
+import createHistory from 'history/createBrowserHistory'
+import { ConnectedRouter } from 'react-router-redux'
 import configureStore from './store/configureStore'
+import './App.css'
 
 import Wrapper from './components/wrapper'
 import AppRouter from './router'
 import { userInit } from './actions'
 
-const store = configureStore()
+const history = createHistory()
+const store = configureStore(undefined, history)
 
 window.__APP_STORE__ = store
 
@@ -20,11 +23,11 @@ class App extends Component {
   render () {
     return (
       <Provider store={store}>
-        <BrowserRouter>
+        <ConnectedRouter history={history}>
           <Wrapper>
             <AppRouter />
           </Wrapper>
-        </BrowserRouter>
+        </ConnectedRouter>
       </Provider>
     )
   }

UI/src/actions/index.js

@@ -14,19 +14,23 @@ export const fetchServers = async dispatch => {
 }
 
 export const userInit = async dispatch => {
-  try {
-    const rsp = await superagent.get('/api/auth/user')
-    
-    dispatch({
-      type: Symbol.for('set user'),
-      data: rsp.body
-    })
+  if (!window.location.pathname.startsWith('/oauth')) {
+    try {
+      const rsp = await superagent.get('/api/auth/user')
 
-    dispatch(fetchServers)
-  } catch (e) {
-    if (!window.location.pathname.startsWith('/oauth')) {
+      dispatch({
+        type: Symbol.for('set user'),
+        data: rsp.body
+      })
+
+      dispatch(fetchServers)
+    } catch (e) {
       window.location.href = '/oauth/flow'
     }
+  } else {
+    dispatch({
+      type: Symbol.for('app ready')
+    })
   }
 }
 

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'
 

UI/src/index.css

@@ -7,6 +7,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.font-sans-serif {
+  font-family: sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
 :root {
   --c-white: #efefef;
   --c-9: #EBD6D4;

UI/src/reducers/index.js

@@ -3,6 +3,7 @@ import { combineReducers } from 'redux'
 import servers from './servers'
 import user from './user'
 import rolePicker from './role-picker'
+import { routerMiddleware } from 'react-router-redux';
 // import roles from './roles'
 
 const initialState = {
@@ -25,6 +26,7 @@ const rootReducer = combineReducers({
   appState,
   servers,
   user,
+  router: routerMiddleware,
   // roles,
   rolePicker
 })

UI/src/reducers/role-picker.js

@@ -1,9 +1,9 @@
-import { Map, Set } from 'immutable'
+import { Map, OrderedMap } from 'immutable'
 
 const initialState = Map({
   hidden: true, // should the view be hidden?
   emptyRoles: true, // helps derender roles so there's no visible element state change
-  viewMap: Set([]), // roles in categories
+  viewMap: OrderedMap({}), // roles in categories
   originalRolesSelected: Map({}), // Map<role id, bool> -- original roles for diffing against selected 
   rolesSelected: Map({}) // Map<role id, bool> -- new roles for diffing
 })
@@ -11,8 +11,8 @@ const initialState = Map({
 export default (state = initialState, { type, data }) => {
   switch (type) {
     case Symbol.for('setup role picker'):
-      return state.merge(data)
-
+      return state.mergeDeep(data)
+ 
     case Symbol.for('hide role picker ui'):
       return {
         ...state,
@@ -24,12 +24,12 @@ export default (state = initialState, { type, data }) => {
         ...state,
         emptyRoles: data
       }
-    
-    case Symbol.for('zero role picker'):
-      return initialState
 
     case Symbol.for('update selected roles'):
-      return state.set('rolesSelected', state.get('rolesSelected').set(data.id, data.state))
+      return state.setIn(['rolesSelected', data.id], data.state)
+      
+    case Symbol.for('zero role picker'):
+      return initialState
 
     default:
       return state

UI/src/router/index.js

@@ -5,9 +5,11 @@ import { connect } from 'react-redux'
 import Servers from '../components/servers'
 import OauthCallback from '../components/oauth-callback'
 import OauthFlow from '../components/oauth-flow'
+import { withRouter } from 'react-router';
 
 const aaa = (props) => (<div>{ JSON.stringify(props) }</div>)
 
+@withRouter
 @connect(({ appState }) => ({ ready: appState.ready }))
 export default class AppRouter extends Component {
   render () {

UI/src/store/configureStore.dev.js

@@ -5,13 +5,14 @@ import { createLogger } from 'redux-logger'
 // import api from '../middleware/api'
 import rootReducer from '../reducers'
 import DevTools from '../components/dev-tools'
+import { routerMiddleware } from 'react-router-redux'
 
-const configureStore = preloadedState => {
+const configureStore = (preloadedState, history) => {
   const store = createStore(
     rootReducer,
     preloadedState,
     compose(
-      applyMiddleware(thunk, createLogger()),
+      applyMiddleware(thunk, routerMiddleware(history), createLogger()),
       DevTools.instrument()
     )
   )

UI/src/store/configureStore.prod.js

@@ -1,12 +1,14 @@
 import { createStore, applyMiddleware } from 'redux'
+import { routerMiddleware } from 'react-router-redux'
+
 import thunk from 'redux-thunk'
 // import api from '../middleware/api'
 import rootReducer from '../reducers'
 
-const configureStore = preloadedState => createStore(
+const configureStore = (preloadedState, history) => createStore(
   rootReducer,
   preloadedState,
-  applyMiddleware(thunk)
+  applyMiddleware(thunk, routerMiddleware(history))
 )
 
 export default configureStore

UI/yarn.lock

@@ -6094,6 +6094,14 @@ react-router-dom@^4.2.2:
     react-router "^4.2.0"
     warning "^3.0.0"
 
+react-router-redux@^5.0.0-alpha.8:
+  version "5.0.0-alpha.8"
+  resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-5.0.0-alpha.8.tgz#5242c705730b2ac862aff7a8e90f870d0cf45e12"
+  dependencies:
+    history "^4.7.2"
+    prop-types "^15.6.0"
+    react-router "^4.2.0"
+
 react-router@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.2.0.tgz#61f7b3e3770daeb24062dae3eedef1b054155986"