import React, { PropTypes } from 'react';
import  { groupUsersByName } from '../filters/filters';
import UserGroup from './user_group';

const UserList = ({ list }) => {
  const groups = groupUsersByName(list);
  
  const groupAndSortByName = Object.keys(groups)
    .sort()
    .map((letter) => {
      return (
        <div key={ letter }>
          <UserGroup groups={ groups[letter] } letter={ letter } />
        </div>
      );
  });

  return (
    <div className="users-list">
      { groupAndSortByName }
    </div>
  );
};

UserList.propTypes = {
  list: PropTypes.array.isRequired
};

export default UserList;
@@ -61,16 +61,30 @@
 rsByName
+, filterSearch
  %7D from 
@@ -168,16 +168,22 @@
  (%7B list
+, term
  %7D) =%3E %7B
@@ -183,16 +183,74 @@
 %7D) =%3E %7B%0A
+  if (term) %7B%0A    list = filterSearch(list, term);%0A  %7D%0A  %0A
   const 
@@ -662,16 +662,53 @@
 Required
+,%0A  term: PropTypes.string.isRequired
 %0A%7D;%0A%0Aexp

add search term to user list