Make list use data/render model

website/src/Users/UserList.js

@@ -27,26 +27,23 @@ export class UserList extends React.Component {
 
   render() {
     const { selectedUser, selectionModified } = this.props
+    const { users } = this.state
 
     return (
       <Column fillParent>
         <Column.Item grow>
-          <List>
-            {
-            this.state.users
-            ? this.state.users.map((user, index) =>
-              (<List.Item key={user._id || '0'} onClick={(e) => (this.props.onUserListClick(e, index))}
+          <List data={users} render={(user, index) => {
+            return (
+              <List.Item key={user._id || '0'} onClick={(e) => (this.props.onUserListClick(e, index))}
                 active={user === this.props.selectedUser}>
                 <List.Icon name={user.administrator ? 'admin' : 'profile'} size={sizeInfo.listIcon} />
                 <List.Text>
                   { user._id ? user.firstName + ' ' + user.lastName : '[New User]' }
                 </List.Text>
                 { user === selectedUser && selectionModified ? <List.Icon name='edit' size={sizeInfo.listIcon} /> : null }
-              </List.Item>)
+              </List.Item>
             )
-            : null
-            }
-          </List>
+          }} />
         </Column.Item>
         <Column.Item height={sizeInfo.formColumnSpacing} />
         <Column.Item height={sizeInfo.buttonHeight}>

website/src/ui/List.js

@@ -6,13 +6,12 @@ import { sizeInfo, colorInfo, fontInfo } from './style'
 
 class List extends Component {
   static propTypes = {
-    children: PropTypes.node,
-    // data: PropTypes.array,
-    // render: PropTypes.func,
+    data: PropTypes.array,
+    render: PropTypes.func.isRequired,
   }
 
   render() {
-    const { children } = this.props
+    const { data, render } = this.props
 
     return (
       <Box
@@ -24,7 +23,7 @@ class List extends Component {
           fontFamily: fontInfo.family,
           overflow: 'scroll',
         }}>
-        {children}
+        {data ? data.map(render) : null}
       </Box>
     )
   }