fix(inbox): some teammembers are not showing in assign component

close #1236

src/modules/common/components/filterableList/Filter.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 type Props = {
   placeholder?: string;
-  onChange: (e: React.FormEvent<HTMLElement>) => void;
+  onChange: (e) => void;
 };
 
 function Filter({ placeholder = 'Search', onChange }: Props) {

src/modules/common/components/filterableList/FilterableList.tsx

@@ -19,6 +19,7 @@ type Props = {
 
   // hooks
   onClick?: (items: any[], id: string) => void;
+  onSearch?: (e: React.FormEvent<HTMLElement>) => void;
   onExit?: (items: any[]) => void;
 };
 
@@ -117,7 +118,7 @@ class FilterableList extends React.Component<Props, State> {
     return (
       <div className={this.props.className}>
         <PopoverHeader>
-          <Filter onChange={this.filterItems} />
+          <Filter onChange={this.props.onSearch || this.filterItems} />
         </PopoverHeader>
 
         <PopoverBody>

src/modules/inbox/components/assignBox/AssignBox.tsx

@@ -1,8 +1,12 @@
+import client from 'apolloClient';
+import gql from 'graphql-tag';
+import debounce from 'lodash/debounce';
 import FilterableList from 'modules/common/components/filterableList/FilterableList';
 import { __, getUserAvatar } from 'modules/common/utils';
 import Alert from 'modules/common/utils/Alert';
 import React from 'react';
 import { IUser } from '../../../auth/types';
+import { queries } from '../../graphql';
 import { IConversation } from '../../types';
 
 interface IAssignee {
@@ -18,7 +22,6 @@ type Props = {
   className?: string;
   afterSave?: () => void;
   // from containers
-  assignees: IUser[];
   assign: (
     doc: { conversationIds?: string[]; assignedUserId: string },
     callback: (error: Error) => void
@@ -31,26 +34,49 @@ type State = {
 };
 
 class AssignBox extends React.Component<Props, State> {
+  private timer?: NodeJS.Timer;
+
   constructor(props: Props) {
     super(props);
 
     this.state = {
-      assigneesForList: this.generateAssignParams(
-        props.assignees,
-        props.targets
-      )
+      assigneesForList: []
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      assigneesForList: this.generateAssignParams(
-        nextProps.assignees,
-        nextProps.targets
-      )
-    });
+  componentDidMount() {
+    this.fetchUsers();
   }
 
+  fetchUsers = (e?) => {
+    const searchValue = e ? e.target.value : '';
+
+    debounce(() => {
+      client
+        .query({
+          query: gql(queries.userList),
+          variables: {
+            perPage: 20,
+            searchValue
+          }
+        })
+        .then(({ data }: { data: { users?: IUser[] } }) => {
+          const verifiedUsers =
+            (data.users || []).filter(user => user.username) || [];
+
+          this.setState({
+            assigneesForList: this.generateAssignParams(
+              verifiedUsers,
+              this.props.targets
+            )
+          });
+        })
+        .catch(error => {
+          Alert.error(error.message);
+        });
+    }, 500)();
+  };
+
   generateAssignParams(assignees: IUser[] = [], targets: IConversation[] = []) {
     return assignees.map(assignee => {
       const count = targets.reduce((memo, target) => {
@@ -132,7 +158,8 @@ class AssignBox extends React.Component<Props, State> {
       className,
       links,
       selectable: true,
-      items: this.state.assigneesForList
+      items: this.state.assigneesForList,
+      onSearch: this.fetchUsers
     };
 
     if (event) {

src/modules/inbox/containers/AssignBox.tsx

@@ -3,9 +3,8 @@ import Alert from 'modules/common/utils/Alert';
 import React from 'react';
 import { compose, graphql } from 'react-apollo';
 import { withProps } from '../../common/utils';
-import { UsersQueryResponse } from '../../settings/team/types';
 import AssignBox from '../components/assignBox/AssignBox';
-import { mutations, queries } from '../graphql';
+import { mutations } from '../graphql';
 import {
   AssignMutationResponse,
   AssignMutationVariables,
@@ -21,18 +20,10 @@ type Props = {
   afterSave: () => void;
 };
 
-type FinalProps = {
-  usersQuery: UsersQueryResponse;
-} & Props &
-  AssignMutationResponse &
-  UnAssignMutationResponse;
+type FinalProps = Props & AssignMutationResponse & UnAssignMutationResponse;
 
 const AssignBoxContainer = (props: FinalProps) => {
-  const { usersQuery, assignMutation, conversationsUnassign } = props;
-
-  if (usersQuery.loading) {
-    return null;
-  }
+  const { assignMutation, conversationsUnassign } = props;
 
   const assign = (
     {
@@ -70,11 +61,8 @@ const AssignBoxContainer = (props: FinalProps) => {
       });
   };
 
-  const verifiedUsers = usersQuery.users.filter(user => user.username) || [];
-
   const updatedProps = {
     ...props,
-    assignees: verifiedUsers,
     assign,
     clear
   };
@@ -84,9 +72,6 @@ const AssignBoxContainer = (props: FinalProps) => {
 
 export default withProps<Props>(
   compose(
-    graphql<Props, UsersQueryResponse>(gql(queries.userList), {
-      name: 'usersQuery'
-    }),
     graphql<Props, AssignMutationResponse, AssignMutationVariables>(
       gql(mutations.conversationsAssign),
       {