Hook up team dropdowns and lists

website/src/Users/UserForm.js

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types'
 import autobind from 'autobind-decorator'
 import { regExpPattern } from 'regexp-pattern'
 import { api } from 'src/API'
-import { Row, Column, BoundInput, BoundButton, BoundCheckbox, BoundEmailIcon, DropdownList } from 'ui'
+import {
+  Row, Column, BoundInput, BoundButton, BoundCheckbox, BoundEmailIcon, BoundDropdown,
+} from 'ui'
 import { FormBinder } from 'react-form-binder'
 import { sizeInfo } from 'ui/style'
 
@@ -40,6 +42,9 @@ export class UserForm extends React.Component {
     lastName: {
       isValid: (r, v) => (v !== '')
     },
+    team: {
+      isValid: true
+    },
     administrator: {
       isValid: (r, v) => true,
       initValue: false,
@@ -66,8 +71,21 @@ export class UserForm extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      binder: new FormBinder(this.props.user, UserForm.bindings, this.props.onModifiedChanged)
+      binder: new FormBinder(props.user, UserForm.bindings, props.onModifiedChanged),
+      teams: []
     }
+
+    this.getTeams()
+  }
+
+  // TODO: This is not very efficient.  Better to get the teams in User.js and pass them in
+  // This however will always be up-to-date.  Need to use the WebSocket to refresh.
+  getTeams() {
+    api.listTeams().then((list) => {
+      this.setState({ teams: list.items.map((item) => ({ value: item._id, text: item.name, icon: 'team' })).sort((a, b) => (a.text.localeCompare(b.text))) })
+    }).catch(() => {
+      this.setState({ teams: [] })
+    })
   }
 
   componentWillReceiveProps(nextProps) {
@@ -75,6 +93,8 @@ export class UserForm extends React.Component {
       this.setState({
         binder: new FormBinder(nextProps.user, UserForm.bindings, nextProps.onModifiedChanged)
       })
+
+      this.getTeams()
     }
   }
 
@@ -111,17 +131,7 @@ export class UserForm extends React.Component {
   }
 
   render() {
-    const { binder } = this.state
-    const teams = [
-      { id: 1, name: 'Sign of the Times' },
-      { id: 2, name: 'Trash Monsters' },
-      { id: 3, name: 'The Bigger Picker Uppers' },
-      { id: 4, name: 'Carcass Masters' },
-      { id: 5, name: 'Dust Bunnies' },
-      { id: 6, name: 'Pavement Busters' },
-      { id: 7, name: 'Don\'t Hug That Tree' },
-      { id: 8, name: 'Broken Swingers' },
-    ]
+    const { binder, teams } = this.state
 
     return (
       <form style={{ width: '100%', height: '100%', overflow: 'scroll' }} id='userForm' onSubmit={this.handleSubmit}>
@@ -155,12 +165,7 @@ export class UserForm extends React.Component {
                     </Row>
                   </Column.Item>
                   <Column.Item>
-                    <DropdownList items={teams} render={(item) => (
-                      <DropdownList.Item key={item.id}>
-                        <DropdownList.Icon name='team' size={sizeInfo.dropdownIconSize} />
-                        <DropdownList.Text>{item.name}</DropdownList.Text>
-                      </DropdownList.Item>
-                    )} />
+                    <BoundDropdown name='team' label='Team' icon='team' items={teams} binder={binder} />
                   </Column.Item>
                   <Column.Item height={sizeInfo.formColumnSpacing} />
                   <Column.Item minHeight={sizeInfo.buttonHeight}>