guarantee team order in team manager modal

app/components/BookBuilder/TeamManager/GroupList.jsx

+import { find, keys } from 'lodash'
 import React from 'react'
 
 import Group from './Group'
@@ -27,11 +28,20 @@ export class GroupList extends React.Component {
 
   render () {
     const { teams, users, update } = this.props
-    const self = this
+    const options = this.options
 
-    const groups = teams.map(function (team, i) {
-      const name = team.name.trim()
-      if (!self.options[name]) return
+    // TODO -- refactor
+    // do it like this to guarantee order of groups
+    const groups = keys(options).map((key, i) => {
+      let name
+
+      // get team of this name
+      const team = find(teams, (team) => {
+        name = team.name.trim()
+        return name === key
+      })
+
+      if (!team) return
 
       return (
         <div key={i}>
@@ -39,7 +49,7 @@ export class GroupList extends React.Component {
             team={team}
             users={users}
             update={update}
-            options={self.options[name]}
+            options={options[name]}
           />
           <div className={styles.groupSeperator} />
         </div>
@@ -61,18 +71,3 @@ GroupList.propTypes = {
 }
 
 export default GroupList
-
-/*
-
-<TeamGroup
-  type="copyEditor"
-/>
-
-<div className={styles.groupSeperator} />
-
-<TeamGroup
-  type="author"
-/>
-
-<div className={styles.groupSeperator} />
-*/