From 45f55912ac4f4ad2b2046b1ffcb7fd862c1b8955 Mon Sep 17 00:00:00 2001
From: Maksym Mykhailenko <maxceem@gmail.com>
Date: Wed, 13 Feb 2019 16:57:39 +0800
Subject: [PATCH 1/2] winning submission from challenge 30083313 - Topcoder
 Connect - Team Management - Autocomplete

---
 .../TeamManagement/AutocompleteInput.jsx      | 109 +++++++++++++++++
 .../TeamManagement/AutocompleteInput.scss     |  41 +++++++
 .../TeamManagement/ProjectManagementDialog.js | 111 ++++++++----------
 .../TeamManagement/TeamManagement.jsx         |  21 +++-
 .../TeamManagement/TeamManagement.scss        |   8 +-
 .../TopcoderManagementDialog.js               | 104 ++++++++--------
 .../containers/TeamManagementContainer.jsx    |  92 ++++++++++++---
 7 files changed, 341 insertions(+), 145 deletions(-)
 create mode 100644 src/components/TeamManagement/AutocompleteInput.jsx
 create mode 100644 src/components/TeamManagement/AutocompleteInput.scss

diff --git a/src/components/TeamManagement/AutocompleteInput.jsx b/src/components/TeamManagement/AutocompleteInput.jsx
new file mode 100644
index 000000000..2f5eb56f5
--- /dev/null
+++ b/src/components/TeamManagement/AutocompleteInput.jsx
@@ -0,0 +1,109 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {findIndex} from 'lodash'
+import Select from '../Select/Select'
+import './AutocompleteInput.scss'
+import {loadMemberSuggestions} from '../../api/projectMembers'
+import {AUTOCOMPLETE_TRIGGER_LENGTH} from '../../config/constants'
+
+/**
+ * Render a searchable dropdown for selecting users that can be invited
+ */
+const AutocompleteInput = ({
+  onUpdate,
+  placeholder,
+  selectedMembers,
+  disabled,
+  allMembers,
+}) => {
+  const onChange = (inputValue, selectedOptions = []) => {
+
+    if (onUpdate) {
+      onUpdate(selectedOptions)
+    }
+  }
+
+  const asyncOptions = (input) => {
+    const value =  typeof input === 'string' ? input : ''
+    const createOption = {
+      handle: value,
+      // Decide if it's email
+      isEmail: (/(.+)@(.+){2,}\.(.+){2,}/).test(value),
+    }
+    if (value.length >= AUTOCOMPLETE_TRIGGER_LENGTH) {
+      return loadMemberSuggestions(value).then(r => {
+        // Remove current members from suggestions
+        const suggestions = r.filter(suggestion => (
+          findIndex(allMembers, (member) => member.handle === suggestion.handle) === -1 &&
+          // Remove current value from list to add it manually on top
+          suggestion.handle !== value
+        ))
+        // Only allow creation if it is not already exists in members
+        const shouldIncludeCreateOption = findIndex(allMembers, (member) => member.handle === value) === -1
+
+        return Promise.resolve({options: shouldIncludeCreateOption?[createOption, ...suggestions]: suggestions})
+      }).catch( () => {
+        return Promise.resolve({options: [createOption] })
+      })
+    }
+    return Promise.resolve({options: value.length > 0 ? [createOption] : []})
+  }
+
+  return (
+    <div className="autocomplete-wrapper">
+      <Select
+        multi
+        placeholder={placeholder}
+        value={selectedMembers}
+        onChange={onChange}
+        asyncOptions={asyncOptions}
+        valueKey="handle"
+        labelKey="handle"
+        disabled={disabled}
+      />
+    </div>
+  )
+}
+
+AutocompleteInput.defaultProps = {
+  placeholder: 'Enter one or more user handles',
+  selectedMembers: [],
+  allMembers: [],
+  disabled: false
+}
+
+AutocompleteInput.propTypes = {
+  /**
+   * Callback fired when selected members are updated
+   */
+  onUpdate: PropTypes.func,
+
+  /**
+   * The current logged in user in the app.
+   * Used to determinate "You" label and access
+   */
+  currentUser: PropTypes.object,
+
+  /**
+   * Placeholder to show when the input is empty
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * List of members that are currently selected
+   */
+  selectedMembers: PropTypes.arrayOf(PropTypes.object),
+
+  /**
+   * The flag if component is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * List of both current and invited members of project
+   */
+  allMembers: PropTypes.arrayOf(PropTypes.object)
+}
+
+
+export default AutocompleteInput
diff --git a/src/components/TeamManagement/AutocompleteInput.scss b/src/components/TeamManagement/AutocompleteInput.scss
new file mode 100644
index 000000000..9c53d4b1a
--- /dev/null
+++ b/src/components/TeamManagement/AutocompleteInput.scss
@@ -0,0 +1,41 @@
+@import "~tc-ui/src/styles/tc-includes";
+:global {
+  .management-dialog-overlay
+  .project-dialog-conatiner
+  .project-dialog
+  .input-container
+  .autocomplete-wrapper {
+    width: 100%;
+    padding: 0 $base-unit*2 ;
+
+    input {
+      margin: 0;
+    }
+
+    .Select > input[type="hidden"] {
+      display: none;
+    }
+
+    .Select-control {
+      max-height: $base-unit*8;
+      padding: $base-unit 0;
+
+      .Select-placeholder, .Select-input {
+        @include roboto;
+      }
+
+      .Select-placeholder {
+        line-height: $base-unit*8;
+      }
+
+      .Select-arrow-zone {
+        display: none;
+      }
+
+      .Select-loading-zone {
+        padding-right: $base-unit;
+      }
+
+    }
+  }
+}
diff --git a/src/components/TeamManagement/ProjectManagementDialog.js b/src/components/TeamManagement/ProjectManagementDialog.js
index f200e35a9..fd4d22a58 100644
--- a/src/components/TeamManagement/ProjectManagementDialog.js
+++ b/src/components/TeamManagement/ProjectManagementDialog.js
@@ -3,86 +3,59 @@ import React from 'react'
 import PT from 'prop-types'
 import moment from 'moment'
 import Modal from 'react-modal'
-import XMarkIcon from  '../../assets/icons/icon-x-mark.svg'
+import XMarkIcon from '../../assets/icons/icon-x-mark.svg'
 import Avatar from 'appirio-tech-react-components/components/Avatar/Avatar'
-import { getAvatarResized } from '../../helpers/tcHelpers'
-import FormsyForm from 'appirio-tech-react-components/components/Formsy'
-import { INVITE_CUSTOMER_FAILURE } from '../../config/constants'
-const TCFormFields = FormsyForm.Fields
+import {getAvatarResized} from '../../helpers/tcHelpers'
+import AutocompleteInput from './AutocompleteInput'
 
 class Dialog extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      inviteText: '',
-      validInviteText: false,
       clearText: false,
       showAlreadyMemberError: false,
       invitedMembers: {},
       members: {}
     }
     this.onChange = this.onChange.bind(this)
-    this.sendInvites = this.sendInvites.bind(this)
   }
 
-  componentWillMount(){
+  componentWillMount() {
     this.setState({
       invitedMembers: this.props.invites,
       members: this.props.members
     })
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.state.clearText && nextProps.processingInvites !== this.props.processingInvites &&
-      !nextProps.processingInvites) {
-      this.setState((prevState) => ({
-        inviteText: nextProps.error && nextProps.error.type === INVITE_CUSTOMER_FAILURE ? prevState.inviteText : '',
-        validInviteText: false,
-        clearText: false,
-      }))
-    }
-  }
-
-  onChange(currentValues) {
-    const text = currentValues.emails
-    const invites = text.split(/[,;]/g)
-    const handles = invites.filter((invite) => invite.startsWith('@')).map((invite) => invite.substring(1))
-    const isValid = invites.every(invite => {
-      invite = invite.trim()
-      return  invite.length > 1 && (/(.+)@(.+){2,}\.(.+){2,}/.test(invite) || invite.startsWith('@'))
-    })
-    let present = _.some(this.state.invitedMembers, invited => invites.indexOf(invited.email) > -1)
+  onChange(selectedMembers) {
+    // If a member invited with email exists in selectedMembers
+    let present = _.some(this.state.invitedMembers, invited => _.findIndex(selectedMembers,
+      selectedMember => selectedMember.isEmail && selectedMember.handle === invited.email) > -1)
+    // If a member invited with handle exists in selectedMembers
     present = present || _.some(this.state.invitedMembers, invited => {
       if (!invited.member) {
         return false
       }
-      return handles.indexOf(invited.member.handle) > -1
+      return _.findIndex(selectedMembers,
+        selectedMember => !selectedMember.isEmail && selectedMember.handle === invited.member.handle) > -1
     })
-    present = present || _.some(this.state.members, member => handles.indexOf(member.handle) > -1)
+    // If members exist in selectedMembers
+    present = present || _.some(this.state.members, m => _.findIndex(selectedMembers,
+      selectedMember => selectedMember.handle === m.handle) > -1)
     this.setState({
-      validInviteText: !present && isValid && text.trim().length > 0,
-      inviteText: currentValues.emails,
+      validInviteText: !present,
       showAlreadyMemberError: present
     })
-  }
-
-  // SEND INVITES
-  sendInvites() {
-    let invites = this.state.inviteText.split(/[,;]/g)
-    invites = invites.map(invite => invite.trim())
-    //emails = emails.filter((email) => /(.+)@(.+){2,}\.(.+){2,}/.test(email))
-    let handles = invites.filter((invite) => (invite.startsWith('@') && invite.length > 1))
-    handles = handles.map(handle => handle.replace(/^@/, ''))
-    const emails = invites.filter((invite) => (!invite.startsWith('@') && invite.length > 1))
-
-    this.props.sendInvite(emails, handles)
-    this.setState({clearText: true})
+    this.props.onSelectedMembersUpdate(selectedMembers)
   }
 
   render() {
-    const {members, currentUser, isMember, removeMember, removeInvite,
-      onCancel, invites = []} = this.props
+    const {
+      members, currentUser, isMember, removeMember, removeInvite,
+      onCancel, invites = [], selectedMembers, processingInvites
+    } = this.props
     const showRemove = currentUser.isAdmin || (!currentUser.isCopilot && isMember)
+    const allMembers = [...members, ...invites.map(i => i.member)]
     let i = 0
     return (
       <Modal
@@ -96,7 +69,7 @@ class Dialog extends React.Component {
         <div className="project-dialog">
           <div className="dialog-title">
             Project team
-            <span onClick={onCancel}><XMarkIcon /></span>
+            <span onClick={onCancel}><XMarkIcon/></span>
           </div>
 
           <div className="dialog-body">
@@ -115,7 +88,7 @@ class Dialog extends React.Component {
               return (
                 <div
                   key={i}
-                  className={`project-member-layout ${(i%2 !== 0) ? 'dark' : ''}`}
+                  className={`project-member-layout ${(i % 2 !== 0) ? 'dark' : ''}`}
                 >
 
                   <div className="memer-details">
@@ -146,7 +119,7 @@ class Dialog extends React.Component {
               return (
                 <div
                   key={i}
-                  className={`project-member-layout ${(i%2 !== 0) ? 'dark' : ''}`}
+                  className={`project-member-layout ${(i % 2 !== 0) ? 'dark' : ''}`}
                 >
                   <Avatar
                     userName={invite.email}
@@ -171,27 +144,28 @@ class Dialog extends React.Component {
             }))}
           </div>
 
-          <Formsy.Form className="input-container" onValidSubmit={this.sendInvites} onChange={this.onChange} >
+          <div className="input-container">
             <div className="hint">invite more people</div>
-            <TCFormFields.TextInput
-              name="emails"
-              wrapperClass="inviteTextInput"
-              type="text"
-              value={this.state.inviteText}
-              placeholder="Enter one or more emails or user handles separated by ';' or comma ','"
-              disabled={(!currentUser.isAdmin && !isMember) || this.state.clearText}
+            <AutocompleteInput
+              placeholder="Enter one or more emails or user handles"
+              onUpdate={this.onChange}
+              currentUser={currentUser}
+              selectedMembers={selectedMembers}
+              disabled={processingInvites || (!currentUser.isAdmin && !isMember)}
+              allMembers={allMembers}
             />
-            { this.state.showAlreadyMemberError && <div className="error-message">
-                Project Member(s) can't be invited again. Please remove them from list.
-            </div> }
+            {this.state.showAlreadyMemberError && <div className="error-message">
+              Project Member(s) can't be invited again. Please remove them from list.
+            </div>}
             <button
               className="tc-btn tc-btn-primary tc-btn-md"
               type="submit"
-              disabled={!this.state.validInviteText || this.state.clearText}
+              disabled={processingInvites || !this.state.validInviteText || this.state.clearText}
+              onClick={this.props.sendInvite}
             >
               Send Invite
             </button>
-          </Formsy.Form>
+          </div>
         </div>
 
       </Modal>
@@ -199,8 +173,12 @@ class Dialog extends React.Component {
   }
 }
 
+Dialog.defaultProps = {
+  invites: [],
+  members: []
+}
+
 Dialog.propTypes = {
-  processingInvites: PT.bool.isRequired,
   error: PT.oneOfType([PT.object, PT.bool]),
   currentUser: PT.object.isRequired,
   members: PT.arrayOf(PT.object).isRequired,
@@ -210,6 +188,9 @@ Dialog.propTypes = {
   invites: PT.arrayOf(PT.object),
   sendInvite: PT.func.isRequired,
   removeInvite: PT.func.isRequired,
+  onSelectedMembersUpdate: PT.func.isRequired,
+  selectedMembers: PT.arrayOf(PT.object),
+  processingInvites: PT.bool.isRequired,
 }
 
 export default Dialog
diff --git a/src/components/TeamManagement/TeamManagement.jsx b/src/components/TeamManagement/TeamManagement.jsx
index 3ae9a9df7..1d62336fd 100644
--- a/src/components/TeamManagement/TeamManagement.jsx
+++ b/src/components/TeamManagement/TeamManagement.jsx
@@ -56,7 +56,8 @@ class TeamManagement extends React.Component {
       showNewMemberConfirmation, onJoin, onJoinConfirm, onShowProjectDialog, isShowProjectDialog,
       projectTeamInvites, onProjectInviteDeleteConfirm, onProjectInviteSend, deletingInvite, changeRole,
       onDeleteInvite, isShowTopcoderDialog, onShowTopcoderDialog, processingInvites, processingMembers,
-      onTopcoderInviteSend, onTopcoderInviteDeleteConfirm, topcoderTeamInvites, error
+      onTopcoderInviteSend, onTopcoderInviteDeleteConfirm, topcoderTeamInvites, error,
+      onSelectedMembersUpdate, selectedMembers
     } = this.props
     const currentMember = members.filter((member) => member.userId === currentUser.userId)[0]
     const modalActive = isAddingTeamMember || deletingMember || isShowJoin || showNewMemberConfirmation || deletingInvite
@@ -153,7 +154,6 @@ class TeamManagement extends React.Component {
           }
           return (
             <ProjectDialog
-              processingInvites={processingInvites}
               error={error}
               currentUser={currentUser}
               members={members}
@@ -163,6 +163,9 @@ class TeamManagement extends React.Component {
               invites={projectTeamInvites}
               sendInvite={onProjectInviteSend}
               removeInvite={removeInvite}
+              onSelectedMembersUpdate={onSelectedMembersUpdate}
+              selectedMembers={selectedMembers}
+              processingInvites={processingInvites}
             />
           )
         })())}
@@ -176,7 +179,6 @@ class TeamManagement extends React.Component {
           }
           return (
             <TopcoderDialog
-              processingInvites={processingInvites}
               error={error}
               currentUser={currentUser}
               members={members}
@@ -187,6 +189,9 @@ class TeamManagement extends React.Component {
               invites={topcoderTeamInvites}
               removeInvite={removeInvite}
               changeRole={changeRole}
+              onSelectedMembersUpdate={onSelectedMembersUpdate}
+              selectedMembers={selectedMembers}
+              processingInvites={processingInvites}
             />
           )
         })())}
@@ -340,6 +345,16 @@ TeamManagement.propTypes = {
    */
   onTopcoderInviteSend: PropTypes.func,
 
+  /**
+   * Callback fired when selected members are updated
+   */
+  onSelectedMembersUpdate: PropTypes.func,
+
+  /**
+   * List of members added to auto complete input
+   */
+  selectedMembers: PropTypes.arrayOf(PropTypes.object),
+
   /**
    * Callback to send member role
    */
diff --git a/src/components/TeamManagement/TeamManagement.scss b/src/components/TeamManagement/TeamManagement.scss
index 5239b16c2..3bd441a82 100644
--- a/src/components/TeamManagement/TeamManagement.scss
+++ b/src/components/TeamManagement/TeamManagement.scss
@@ -337,8 +337,12 @@
             text-transform: uppercase;
           }
 
-          input {
-            width: stretch;
+          form {
+            width: 100%;
+          }
+
+          input, .autocomplete-wrapper {
+            width: 100%;
             margin: $base-unit*4 $base-unit*2;
           }
 
diff --git a/src/components/TeamManagement/TopcoderManagementDialog.js b/src/components/TeamManagement/TopcoderManagementDialog.js
index fbbe51128..46467bb5f 100644
--- a/src/components/TeamManagement/TopcoderManagementDialog.js
+++ b/src/components/TeamManagement/TopcoderManagementDialog.js
@@ -7,11 +7,9 @@ import Modal from 'react-modal'
 import XMarkIcon from  '../../assets/icons/icon-x-mark.svg'
 import Avatar from 'appirio-tech-react-components/components/Avatar/Avatar'
 import { getAvatarResized } from '../../helpers/tcHelpers'
-import FormsyForm from 'appirio-tech-react-components/components/Formsy'
-import { INVITE_TOPCODER_MEMBER_FAILURE } from '../../config/constants'
 import SelectDropdown from '../SelectDropdown/SelectDropdown'
 import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip'
-const TCFormFields = FormsyForm.Fields
+import AutocompleteInput from './AutocompleteInput'
 
 class Dialog extends React.Component {
   constructor(props) {
@@ -52,18 +50,6 @@ class Dialog extends React.Component {
     })
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.state.clearText && nextProps.processingInvites !== this.props.processingInvites &&
-      !nextProps.processingInvites) {
-      this.setState((prevState) => ({
-        userText: nextProps.error && nextProps.error.type === INVITE_TOPCODER_MEMBER_FAILURE ? prevState.userText : '',
-        validUserText: false,
-        clearText: false,
-        members: this.props.members
-      }))
-    }
-  }
-
   onUserRoleChange(memberId, id, type) {
     const managerType = Object.assign({}, this.state.managerType)
     managerType[memberId] = type
@@ -78,43 +64,38 @@ class Dialog extends React.Component {
   }
 
   addUsers() {
-    let handles = this.state.userText.split(/[,;]/g)
-    handles = handles.map(handle => handle.trim())
-    handles = handles.filter((handle) => (handle.startsWith('@') && handle.length > 1))
-    handles = handles.map(handle => handle.replace(/^@/, ''))
-
-    this.props.addUsers({
-      handles,
-      role: this.state.userRole
-    })
-    this.setState({clearText: true})
+    this.props.addUsers(this.state.userRole )
   }
 
-  onChange(currentValues) {
-    const text = currentValues.handlesText
-    let handles = text.split(/[,;]/g)
-    const isInvalid = handles.some(user => {
-      user = user.trim()
-      if (user === '') {
+  onChange(selectedMembers) {
+    // If a member invited with email exists in selectedMembers
+    let present = _.some(this.props.invites, invited => _.findIndex(selectedMembers,
+      selectedMember => selectedMember.isEmail && selectedMember.handle === invited.email) > -1)
+    // If a member invited with handle exists in selectedMembers
+    present = present || _.some(this.props.invites, invited => {
+      if (!invited.member) {
         return false
       }
-      return !(user.startsWith('@') && user.length > 1)
+      return _.findIndex(selectedMembers,
+        selectedMember => !selectedMember.isEmail && selectedMember.handle === invited.member.handle) > -1
     })
-    const validText = !isInvalid && text.trim().length > 0
-    handles = handles.filter((handle) => (handle.trim().startsWith('@') && handle.length > 1))
-    handles = handles.map(handle => handle.trim().replace(/^@/, ''))
-    const present = _.some(this.state.members, m => handles.indexOf(m.handle) > -1)
+    present = present || _.some(this.state.members, m => _.findIndex(selectedMembers,
+      selectedMember => selectedMember.handle === m.handle) > -1)
     this.setState({
-      validUserText: !present && validText,
+      validUserText: !present,
       showAlreadyMemberError: present,
-      userText: text
     })
+    this.props.onSelectedMembersUpdate(selectedMembers)
   }
 
   render() {
-    const {members, currentUser, isMember, removeMember, onCancel, removeInvite, invites = []} = this.props
+    const {
+      members, currentUser, isMember, removeMember, onCancel, removeInvite, invites = [],
+      selectedMembers, processingInvites
+    } = this.props
     const showRemove = currentUser.isAdmin || (isMember && currentUser.isManager)
     let i = 0
+    const allMembers = [...members, ...invites.map(i => i.member)]
     return (
       <Modal
         isOpen
@@ -256,34 +237,36 @@ class Dialog extends React.Component {
             }))}
           </div>
 
-          {showRemove && <Formsy.Form className="input-container" onValidSubmit={this.addUsers} onChange={this.onChange} >
+          {showRemove && <div className="input-container" >
             <div className="hint">invite more people</div>
-            <TCFormFields.TextInput
-              name="handlesText"
-              wrapperClass="inviteTextInput"
-              type="text"
-              value={this.state.userText}
-              placeholder="Enter one or more user @handles separated by ';' or comma ','"
-              disabled={(!currentUser.isAdmin && !isMember) || this.state.clearText}
+            <AutocompleteInput
+              onUpdate={this.onChange}
+              currentUser={currentUser}
+              selectedMembers={selectedMembers}
+              disabled={processingInvites || (!currentUser.isAdmin && !isMember)}
+              allMembers={allMembers}
             />
             { this.state.showAlreadyMemberError && <div className="error-message">
                 Project Member(s) can't be invited again. Please remove them from list.
             </div> }
-            <SelectDropdown
-              name="role"
-              value={this.state.userRole}
-              theme="role-drop-down default"
-              options={this.roles}
-              onSelect={this.handleRoles}
-            />
+            <Formsy.Form>
+              <SelectDropdown
+                name="role"
+                value={this.state.userRole}
+                theme="role-drop-down default"
+                options={this.roles}
+                onSelect={this.handleRoles}
+              />
+            </Formsy.Form>
             <button
               className="tc-btn tc-btn-primary tc-btn-md"
               type="submit"
-              disabled={!this.state.validUserText || this.state.clearText}
+              disabled={processingInvites || !this.state.validUserText || this.state.clearText}
+              onClick={this.addUsers}
             >
               Send Invite
             </button>
-          </Formsy.Form>
+          </div>
           }
           {!showRemove && <div className="dialog-placeholder" />}
         </div>
@@ -292,8 +275,12 @@ class Dialog extends React.Component {
   }
 }
 
+Dialog.defaultProps = {
+  invites: [],
+  members: []
+}
+
 Dialog.propTypes = {
-  processingInvites: PT.bool.isRequired,
   error: PT.oneOfType([PT.object, PT.bool]),
   currentUser: PT.object.isRequired,
   members: PT.arrayOf(PT.object).isRequired,
@@ -304,6 +291,9 @@ Dialog.propTypes = {
   invites: PT.arrayOf(PT.object),
   addUsers: PT.func.isRequired,
   removeInvite: PT.func.isRequired,
+  onSelectedMembersUpdate: PT.func.isRequired,
+  selectedMembers: PT.arrayOf(PT.object),
+  processingInvites: PT.bool.isRequired,
 }
 
 export default Dialog
diff --git a/src/projects/detail/containers/TeamManagementContainer.jsx b/src/projects/detail/containers/TeamManagementContainer.jsx
index 27012e5fe..5f6cd5523 100644
--- a/src/projects/detail/containers/TeamManagementContainer.jsx
+++ b/src/projects/detail/containers/TeamManagementContainer.jsx
@@ -1,16 +1,29 @@
-import React, { Component } from 'react'
+import React, {Component} from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
+import {connect} from 'react-redux'
+import {withRouter} from 'react-router-dom'
 import _ from 'lodash'
 import {
-  ROLE_CONNECT_COPILOT, ROLE_CONNECT_MANAGER, ROLE_ADMINISTRATOR, ROLE_CONNECT_ADMIN,
-  PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER, PROJECT_ROLE_CUSTOMER, ROLE_CONNECT_COPILOT_MANAGER,
+  PROJECT_ROLE_COPILOT,
+  PROJECT_ROLE_CUSTOMER,
+  PROJECT_ROLE_MANAGER,
+  ROLE_ADMINISTRATOR,
+  ROLE_CONNECT_ADMIN,
+  ROLE_CONNECT_COPILOT,
+  ROLE_CONNECT_COPILOT_MANAGER,
+  ROLE_CONNECT_MANAGER,
 } from '../../../config/constants'
 import TeamManagement from '../../../components/TeamManagement/TeamManagement'
-import { addProjectMember, updateProjectMember, removeProjectMember,
-  loadMemberSuggestions, inviteProjectMembers, deleteProjectInvite,
-  inviteTopcoderMembers, deleteTopcoderMemberInvite, acceptOrRefuseInvite
+import {
+  acceptOrRefuseInvite,
+  addProjectMember,
+  deleteProjectInvite,
+  deleteTopcoderMemberInvite,
+  inviteProjectMembers,
+  inviteTopcoderMembers,
+  loadMemberSuggestions,
+  removeProjectMember,
+  updateProjectMember
 } from '../../actions/projectMember'
 
 class TeamManagementContainer extends Component {
@@ -24,6 +37,8 @@ class TeamManagementContainer extends Component {
     this.onMemberDeleteConfirm = this.onMemberDeleteConfirm.bind(this)
     this.onJoinConfirm = this.onJoinConfirm.bind(this)
     this.changeRole = this.changeRole.bind(this)
+    this.onSelectedMembersUpdate = this.onSelectedMembersUpdate.bind(this)
+    this.onShowDialog = this.onShowDialog.bind(this)
   }
 
   componentWillMount() {
@@ -40,21 +55,25 @@ class TeamManagementContainer extends Component {
       // navigate to project listing
       this.props.history.push('/projects/')
     }
+    const {processingInvites} = this.props
+    if (processingInvites && !nextProps.processingInvites && !nextProps.error ) {
+      this.resetSelectedMembers()
+    }
   }
 
   onMemberDeleteConfirm(member) {
     // is user leaving current project
     const isLeaving = member.userId === this.props.currentUser.userId
     this.props.removeProjectMember(this.props.projectId, member.id, isLeaving)
-    this.setState({ isUserLeaving: isLeaving })
+    this.setState({isUserLeaving: isLeaving})
   }
 
   onJoinConfirm() {
-    const { currentUser, projectId, addProjectMember } = this.props
+    const {currentUser, projectId, addProjectMember} = this.props
     const role = currentUser.isCopilot ? PROJECT_ROLE_COPILOT : PROJECT_ROLE_MANAGER
     addProjectMember(
       projectId,
-      { userId: currentUser.userId, role }
+      {userId: currentUser.userId, role}
     )
   }
 
@@ -62,15 +81,17 @@ class TeamManagementContainer extends Component {
     this.props.deleteTopcoderMemberInvite(this.props.projectId, invite)
   }
 
-  onTopcoderInviteSend(items) {
-    this.props.inviteTopcoderMembers(this.props.projectId, items)
+  onTopcoderInviteSend(role) {
+    const {handles} = this.getEmailsAndHandles()
+    this.props.inviteTopcoderMembers(this.props.projectId, {role, handles})
   }
 
   onProjectInviteDelete(invite) {
     this.props.deleteProjectInvite(this.props.projectId, invite)
   }
 
-  onProjectInviteSend(emails, handles) {
+  onProjectInviteSend() {
+    const {handles, emails} = this.getEmailsAndHandles()
     this.props.inviteProjectMembers(this.props.projectId, emails, handles)
   }
 
@@ -79,7 +100,7 @@ class TeamManagementContainer extends Component {
   }
 
   anontateMemberProps() {
-    const { members, allMembers } = this.props
+    const {members, allMembers} = this.props
     // fill project members from state.members object
     return _.map(members, m => {
       if (!m.userId) return m
@@ -103,13 +124,44 @@ class TeamManagementContainer extends Component {
     })
   }
 
-  annotateInvites(invites, members){
+  annotateInvites(invites, members) {
     return _.map(invites, i => {
       i.member = _.find(members, m => m.userId === i.userId)
       return i
     })
   }
 
+  onSelectedMembersUpdate(selectedMembers) {
+    this.setState({selectedMembers})
+  }
+
+  resetSelectedMembers() {
+    this.onSelectedMembersUpdate([])
+  }
+
+  onShowDialog(visible) {
+    if(!visible) {
+      this.resetSelectedMembers()
+    }
+  }
+
+  getEmailsAndHandles() {
+    const {selectedMembers} = this.state
+    const handles = []
+    const emails = []
+    selectedMembers.map(selectedOption => {
+      const value = selectedOption.handle
+      // Test if its email
+      if (selectedOption.isEmail) {
+        emails.push(value)
+      } else {
+        handles.push(value)
+      }
+    })
+    return {emails, handles}
+  }
+
+
   render() {
     const projectMembers = this.anontateMemberProps()
     const projectTeamInvites = this.annotateInvites(this.props.projectTeamInvites, this.props.allMembers)
@@ -133,16 +185,20 @@ class TeamManagementContainer extends Component {
           onTopcoderInviteDeleteConfirm={this.onTopcoderInviteDelete}
           onTopcoderInviteSend={this.onTopcoderInviteSend}
           changeRole={this.changeRole}
+          onSelectedMembersUpdate={this.onSelectedMembersUpdate}
+          selectedMembers={this.state.selectedMembers}
+          onShowTopcoderDialog={this.onShowDialog}
+          onShowProjectDialot={this.onShowDialog}
         />
       </div>
     )
   }
 }
 
-const mapStateToProps = ({ loadUser, members, projectState }) => {
+const mapStateToProps = ({loadUser, members, projectState}) => {
   const adminRoles = [ROLE_ADMINISTRATOR, ROLE_CONNECT_ADMIN]
   const powerUserRoles = [ROLE_CONNECT_COPILOT, ROLE_CONNECT_MANAGER, ROLE_ADMINISTRATOR, ROLE_CONNECT_ADMIN]
-  const managerRoles = [ ROLE_ADMINISTRATOR, ROLE_CONNECT_ADMIN, ROLE_CONNECT_MANAGER ]
+  const managerRoles = [ROLE_ADMINISTRATOR, ROLE_CONNECT_ADMIN, ROLE_CONNECT_MANAGER]
   return {
     currentUser: {
       userId: parseInt(loadUser.user.id),

From 46b2db6df69e49e55f33299ec66fffbe3d1dfbd1 Mon Sep 17 00:00:00 2001
From: Maksym Mykhailenko <maxceem@gmail.com>
Date: Tue, 19 Feb 2019 10:15:40 +0800
Subject: [PATCH 2/2] debouncing server requests

---
 .../TeamManagement/AutocompleteInput.jsx      | 75 +++++++++++++------
 1 file changed, 51 insertions(+), 24 deletions(-)

diff --git a/src/components/TeamManagement/AutocompleteInput.jsx b/src/components/TeamManagement/AutocompleteInput.jsx
index 2f5eb56f5..6af34dfad 100644
--- a/src/components/TeamManagement/AutocompleteInput.jsx
+++ b/src/components/TeamManagement/AutocompleteInput.jsx
@@ -9,21 +9,40 @@ import {AUTOCOMPLETE_TRIGGER_LENGTH} from '../../config/constants'
 /**
  * Render a searchable dropdown for selecting users that can be invited
  */
-const AutocompleteInput = ({
-  onUpdate,
-  placeholder,
-  selectedMembers,
-  disabled,
-  allMembers,
-}) => {
-  const onChange = (inputValue, selectedOptions = []) => {
+class AutocompleteInput extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.onChange = this.onChange.bind(this)
+    this.asyncOptions = this.asyncOptions.bind(this)
+
+    this.debounceTimer = null
+  }
+
+  // cannot use debounce method from lodash, because we have to return Promise
+  loadMemberSuggestionsDebounced(value) {
+    return new Promise((resolve) => {
+      if (this.debounceTimer) {
+        clearTimeout(this.debounceTimer)
+      }
+
+      this.debounceTimer = setTimeout(() => {
+        resolve(loadMemberSuggestions(value))
+      }, 500)
+    })
+  }
+
+  onChange(inputValue, selectedOptions = []) {
+    const { onUpdate } = this.props
 
     if (onUpdate) {
       onUpdate(selectedOptions)
     }
   }
 
-  const asyncOptions = (input) => {
+  asyncOptions(input) {
+    const { allMembers } = this.props
+
     const value =  typeof input === 'string' ? input : ''
     const createOption = {
       handle: value,
@@ -31,7 +50,7 @@ const AutocompleteInput = ({
       isEmail: (/(.+)@(.+){2,}\.(.+){2,}/).test(value),
     }
     if (value.length >= AUTOCOMPLETE_TRIGGER_LENGTH) {
-      return loadMemberSuggestions(value).then(r => {
+      return this.loadMemberSuggestionsDebounced(value).then(r => {
         // Remove current members from suggestions
         const suggestions = r.filter(suggestion => (
           findIndex(allMembers, (member) => member.handle === suggestion.handle) === -1 &&
@@ -49,20 +68,28 @@ const AutocompleteInput = ({
     return Promise.resolve({options: value.length > 0 ? [createOption] : []})
   }
 
-  return (
-    <div className="autocomplete-wrapper">
-      <Select
-        multi
-        placeholder={placeholder}
-        value={selectedMembers}
-        onChange={onChange}
-        asyncOptions={asyncOptions}
-        valueKey="handle"
-        labelKey="handle"
-        disabled={disabled}
-      />
-    </div>
-  )
+  render() {
+    const {
+      placeholder,
+      selectedMembers,
+      disabled,
+    } = this.props
+
+    return (
+      <div className="autocomplete-wrapper">
+        <Select
+          multi
+          placeholder={placeholder}
+          value={selectedMembers}
+          onChange={this.onChange}
+          asyncOptions={this.asyncOptions}
+          valueKey="handle"
+          labelKey="handle"
+          disabled={disabled}
+        />
+      </div>
+    )
+  }
 }
 
 AutocompleteInput.defaultProps = {